Open Design 生成可交互原型完整实操教程
Open Design 原型分为线框图（Wireframe）、高保真可交互原型两大类，支持Web后台、移动端APP、多页面产品流程，生成带真实点击交互的HTML原型，可直接预览、交付产品评审、交付前端开发。
前置条件（必须提前配置）
- 安装桌面客户端，右上角设置切换简体中文
- 左侧「模型配置」连通AI（推荐Claude 3.5 Sonnet / Claude Code，原型交互逻辑最稳定）
- 无需额外图像模型，原型以界面布局、组件交互为主
一、新建原型项目（核心第一步）
- 左侧菜单栏点击原型标签，进入新建原型面板
- 填写项目名称：如「电商APP全套原型」「后台数据管理系统原型」
- 选择设计系统（决定组件规范）
- Web后台：Linear、Stripe、Neutral Modern
- 移动端APP：Apple、Android、Soft Minimal
- 极简线框：Wireframe Base（仅线条无色彩）
- 选择精度模式（二选一）
- 线框图：黑白线条，只梳理页面结构、跳转逻辑，适合需求评审、前期产品规划
- 高保真原型：完整配色、按钮、表单、弹窗、真实交互，可直接给开发/客户演示
- 可选附加配置
- Include landing widget：是否附带官网首页（纯产品原型建议关闭）
- Include OS widgets：是否生成手机系统组件（做APP开启，Web后台关闭）
- 点击橙色创建进入工作台
二、选择原型专属技能（匹配你的产品类型）
顶部「技能Skills」下拉，原型3个核心技能，不要选错：
- web-prototype（网页后台/管理系统，最常用）
适用：OA后台、数据Dashboard、企业管理平台、SaaS操作后台，自动侧边导航、表格、弹窗、分页、筛选组件 - mobile-app（移动端APP原型）
适用：iOS/安卓APP、小程序，自动底部tab、弹窗、登录页、列表、表单、个人中心 - multi-page-flow（多页面完整产品流程）
适用：需要页面跳转逻辑（登录→首页→详情→下单→支付整套流程），自带页面路由交互
禁止选用saas-landing、image-poster，这两类是落地页/海报，无页面跳转交互逻辑
三、原型万能提示词模板（直接复制修改）
模板1：Web后台管理原型（web-prototype）
生成高保真企业客户管理后台原型，响应式网页 页面包含：登录页、首页数据仪表盘、客户列表表格、新增客户弹窗、客户详情页、权限设置页 交互要求：侧边栏可折叠、表格支持分页筛选、新增弹窗弹出关闭、状态切换按钮、下拉选择框 风格：Linear极简商务，主色#165DFF，浅色模式，卡片圆角，清晰数据层级 所有页面支持互相跳转，完整交互逻辑，无多余动画模板2：电商APP多页面流程（mobile-app + multi-page-flow）
9:16竖版电商APP高保真原型，完整页面流转流程 页面清单：启动页、登录注册、首页推荐、商品分类、商品详情、购物车、结算支付、个人中心、订单列表 交互：底部4个Tab切换、商品加入购物车弹窗、加减数量、支付弹窗、返回上一页 风格：柔和浅色系，圆角卡片，适配手机移动端，真实可点击交互模板3：极简线框图（仅梳理结构）
生成线框图原型，无色彩，仅黑白线条 需求：工具类小程序3页原型，首页工具列表、编辑页面、我的页面 标注每个按钮跳转页面，区分弹窗、输入框、列表、底部导航，只展示布局结构，不做视觉美化四、填写原型需求问卷（避免大量返工）
提交提示词后自动弹出问卷，重点填写：
- 目标平台：Web网页 / iOS / Android小程序
- 产品受众：企业管理员 / 普通C端用户 / 内部运营
- 交互复杂度：简单单页 / 多页面跳转流程 / 复杂表单弹窗
- 输出用途：内部需求评审 / 客户演示 / 前端开发交付
- 页面数量：填写需要生成多少个页面（最少2页起）
五、选定视觉配色方案
软件提供5套视觉方向，原型推荐：
- 后台系统：Tech Utility 科技商务
- 消费APP：Soft Warm 柔和清新
- 线框图：直接跳过配色，选择极简黑白
六、生成原型+在线迭代修改
- 等待1–3分钟，流式生成全套页面+交互代码，右侧预览窗口可真实点击跳转（不是静态图片）
- 局部微调指令（底部输入框发送，无需重生成整套原型）
- 新增页面：
新增一个消息通知页面，从首页右上角铃铛按钮跳转 - 修改交互：
表格增加批量删除按钮，弹窗关闭按钮移到右上角 - 调整布局：
侧边导航宽度缩小，所有输入框增加占位提示文字 - 切换精度：
把整套原型改为黑白线框图模式 - 修复跳转：
商品详情点击返回，回到首页而不是购物车
- 新增页面：
七、原型导出多种交付格式
右上角「导出」，原型分场景选择：
- ZIP完整源码（开发交付首选）
包含全套HTML、CSS、JS交互代码，解压本地打开就能跑，前端可直接二次开发 - PDF文档（评审存档）
所有页面静态截图，适合打印开会评审 - 独立HTML文件
发给客户在线预览，保留全部点击跳转交互 - PPTX
产品路演、需求汇报使用
八、原型制作实用技巧
- 多页面跳转必写
提示词清晰列出所有页面+跳转关系，否则AI只会生成单页面 - 线框图优先前期需求
产品思路未确定时先用线框图，修改成本极低；定稿再生成高保真 - 交互稳定模型选择
做复杂多页面流程优先 Claude 3.5 Sonnet，DeepSeek次之，国产模型交互逻辑容易缺失 - 批量新增页面
第一版生成基础框架后，再发指令追加页面，不用一次性写满全部需求 - 移动端原型预览：切换预览框手机视图，检查按钮、输入框适配