一句话
Open Design 是你常用编程助手的设计层。一次对话，就能从一段想法走到可导航、有样式的原型——不用另学设计工具，也不用反复导出和交接。
用 Open Design 做原型的流程
- 01
描述流程
用大白话说明要做什么——“一个引导流程，包含欢迎页、套餐选择页和确认页”。Open Design 会调用原型能力，生成多个相互关联的屏幕，而不是一个单页。
- 02
生成带样式的屏幕
智能助手会套用 Open Design 的设计系统和原型模板，让每个屏幕共享字体、间距和组件。你得到的是一套连贯的界面，而不是互不相干的静态示意图。
- 03
接上交互
按钮能跳转、标签页能切换、弹窗能打开。原型渲染成自包含的 HTML，在任何浏览器里都像真东西一样运行——查看它不需要任何原型工具账号。
- 04
迭代并交付
直接用语言修改——“把套餐选择页改成三列布局”。产物就在你的项目里，设计和最终代码共享同一份来源，减少设计到工程的交接损耗。
你能做出哪些原型
网页原型
通用桌面网页原型。通过复制种子文件 `assets/template.html` 并粘贴 `references/layouts.md` 中的布局生成单个独立 HTML 文件。适用于落地页、营销页、文档或 SaaS 页面的默认选项。
移动应用
在页面中渲染于像素级精确的 iPhone 15 Pro 框架内的移动应用屏幕。通过复制种子文件 assets/template.html 并粘贴 references/layouts.md 中的一个屏幕原型来构建。当需求提到《移动应用》、《iOS 应用》、《Android 应用》、《手机屏幕》或《应用 UI》时使用。
SaaS 落地页
单页 SaaS 落地页，包含主视觉、功能特性、社会证明、价格方案和行动号召。遵循当前 DESIGN.md 的颜色/排版/布局规范。触发关键词："saas landing"、"marketing page"、"product landing"。
游戏化应用
三屏手机原型展示游戏化应用界面：封面海报、每日任务与经验值进度条、任务详情。适用于游戏化应用、习惯追踪、RPG 风格生活应用、升级系统、每日任务、XP/连击应用等需求。
员工入职
单页新员工入职计划——第一周日程安排、伙伴+经理介绍、学习路径、设备清单以及'完成标志'目标。当需求提及'入职'、'新员工'、'第一周计划'或'onboarding'时使用。
Kami Landing
生成印刷级单页纸质文档——温暖羊皮纸底色、墨蓝强调色、单一衬线字重，无斜体，无冷灰。输出呈现专业白皮书或工作室单页效果，而非应用 UI。原生多语言支持（EN · zh-CN · ja）。单个独立 HTML 文件，零依赖。
用 Open Design 做原型 vs. 老办法
| 你需要什么 | 用 Open Design | 传统原型工具 |
|---|---|---|
| 从想法到第一屏 | 在你常用的编程助手里说一句话 | 打开另一个工具、新建文件、手动拖框 |
| 多个相互链接的屏幕 | 成套生成，共享样式、导航可用 | 每一屏手动绘制并手动连线 |
| 一致的视觉系统 | 从可复用的设计系统中读取并自动套用 | 每个文件重做一遍，或纯靠手维护 |
| 可分享的成果 | 自包含 HTML——任何浏览器都能打开，不需账号 | 查看者要占一个席位或要厂商工具的分享链接 |
| 通往真实代码的路径 | 产物在代码仓库里，设计与代码同源 | 一次交接之后从零重建 |
| 成本与锁定 | 开源、自带密钥、本地运行 | 按席位订阅、厂商托管、导出受限 |
下面每一个都从一句话需求开始，并渲染成可点击的真实产物。挑一个接近你想法的模板，描述要改的地方，智能助手会继续完善。
原型常见问题
-
01 用 Open Design 做原型需要 Figma 这类设计工具吗？
不需要。Open Design 在你的编程助手里运行，把原型渲染成 HTML。你用语言描述流程，它会产出屏幕，不需要另学或购买画布工具。
-
02 产出的是可交互原型还是静态示意图？
可交互。导航、标签页、弹窗都能用，因为输出是真实的 HTML 和 CSS。你能在任何浏览器里像用户一样点击体验。
-
03 可以用哪些编程助手？
Open Design 支持 Claude Code、Codex、Cursor 和 Gemini CLI 等二十多种编程助手。
-
04 原型能变成真正的产品吗？
这正是重点。产物就在你的项目里，同一套设计系统和组件会带进生产代码，而不是交接后被丢弃。
今晚就把下一个想法做成原型
下载 Open Design，把下一个“要是……”变成真正能点击、能分享的原型。