Open Design 原型分为线框图（Wireframe）、高保真可交互原型两大类，支持Web后台、移动端APP、多页面产品流程，生成带真实点击交互的HTML原型，可直接预览、交付产品评审、交付前端开发。

前置条件（必须提前配置）

1. 安装桌面客户端，右上角设置切换简体中文
2. 左侧「模型配置」连通AI（推荐Claude 3.5 Sonnet / Claude Code，原型交互逻辑最稳定）
3. 无需额外图像模型，原型以界面布局、组件交互为主

一、新建原型项目（核心第一步）

1. 左侧菜单栏点击原型标签，进入新建原型面板
2. 填写项目名称：如「电商APP全套原型」「后台数据管理系统原型」
3. 选择设计系统（决定组件规范）
   • Web后台：Linear、Stripe、Neutral Modern
   • 移动端APP：Apple、Android、Soft Minimal
   • 极简线框：Wireframe Base（仅线条无色彩）
4. 选择精度模式（二选一）
   • 线框图：黑白线条，只梳理页面结构、跳转逻辑，适合需求评审、前期产品规划
   • 高保真原型：完整配色、按钮、表单、弹窗、真实交互，可直接给开发/客户演示
5. 可选附加配置
   • Include landing widget：是否附带官网首页（纯产品原型建议关闭）
   • Include OS widgets：是否生成手机系统组件（做APP开启，Web后台关闭）
6. 点击橙色创建进入工作台

二、选择原型专属技能（匹配你的产品类型）

顶部「技能Skills」下拉，原型3个核心技能，不要选错：

1. web-prototype（网页后台/管理系统，最常用）
   适用：OA后台、数据Dashboard、企业管理平台、SaaS操作后台，自动侧边导航、表格、弹窗、分页、筛选组件
2. mobile-app（移动端APP原型）
   适用：iOS/安卓APP、小程序，自动底部tab、弹窗、登录页、列表、表单、个人中心
3. 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页原型，首页工具列表、编辑页面、我的页面 标注每个按钮跳转页面，区分弹窗、输入框、列表、底部导航，只展示布局结构，不做视觉美化

四、填写原型需求问卷（避免大量返工）

提交提示词后自动弹出问卷，重点填写：

1. 目标平台：Web网页 / iOS / Android小程序
2. 产品受众：企业管理员 / 普通C端用户 / 内部运营
3. 交互复杂度：简单单页 / 多页面跳转流程 / 复杂表单弹窗
4. 输出用途：内部需求评审 / 客户演示 / 前端开发交付
5. 页面数量：填写需要生成多少个页面（最少2页起）

五、选定视觉配色方案

软件提供5套视觉方向，原型推荐：

• 后台系统：Tech Utility 科技商务
• 消费APP：Soft Warm 柔和清新
• 线框图：直接跳过配色，选择极简黑白

六、生成原型+在线迭代修改

1. 等待1–3分钟，流式生成全套页面+交互代码，右侧预览窗口可真实点击跳转（不是静态图片）
2. 局部微调指令（底部输入框发送，无需重生成整套原型）
   • 新增页面：新增一个消息通知页面，从首页右上角铃铛按钮跳转
   • 修改交互：表格增加批量删除按钮，弹窗关闭按钮移到右上角
   • 调整布局：侧边导航宽度缩小，所有输入框增加占位提示文字
   • 切换精度：把整套原型改为黑白线框图模式
   • 修复跳转：商品详情点击返回，回到首页而不是购物车

七、原型导出多种交付格式

右上角「导出」，原型分场景选择：

1. ZIP完整源码（开发交付首选）
   包含全套HTML、CSS、JS交互代码，解压本地打开就能跑，前端可直接二次开发
2. PDF文档（评审存档）
   所有页面静态截图，适合打印开会评审
3. 独立HTML文件
   发给客户在线预览，保留全部点击跳转交互
4. PPTX
   产品路演、需求汇报使用

八、原型制作实用技巧

1. 多页面跳转必写
   提示词清晰列出所有页面+跳转关系，否则AI只会生成单页面
2. 线框图优先前期需求
   产品思路未确定时先用线框图，修改成本极低；定稿再生成高保真
3. 交互稳定模型选择
   做复杂多页面流程优先 Claude 3.5 Sonnet，DeepSeek次之，国产模型交互逻辑容易缺失
4. 批量新增页面
   第一版生成基础框架后，再发指令追加页面，不用一次性写满全部需求
5. 移动端原型预览：切换预览框手机视图，检查按钮、输入框适配