以一句话的速度做原型
把脑子里的流程描述出来，让 agent 拼出真实可点击的原型——多个屏幕、统一样式、可交互——直接渲染成 HTML，能打开、能分享、能交给工程。
一句话
Open Design 是你正在用的编码 agent 的设计层。对原型来说，就是在一次对话里从一段想法走到可导航、有样式的原型——不用设计工具、不用导出、没有交接断层。
用 Open Design 做原型的流程
- 01
描述流程
用大白话告诉 agent 你要做什么——"一个引导流程，含欢迎页、套餐选择页和确认页"。Open Design 会加载原型 skill，让 agent 知道要产出多个屏幕，而不是单页。
- 02
生成带样式的屏幕
agent 套用 Open Design 的设计系统和原型模板，每个屏幕共享字体、间距和组件，而不是看起来像草稿。你得到的是一套连贯的屏幕，不是互不相干的 mockup。
- 03
接上交互
按钮能跳转、标签页能切换、弹窗能打开。原型渲染成自包含的 HTML，在任何浏览器里都像真东西一样运行——查看它不需要任何原型工具账号。
- 04
迭代并交付
靠跟 agent 对话来改——"把套餐选择页改成三列布局"。因为产物就在你的项目里，设计和最终代码共享同一份事实来源，弥合了设计到工程的交接断层。
你能做出哪些原型
原型 查看完整提示词 → 网页原型
通用桌面网页原型。通过复制种子文件 `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 | 传统原型工具 |
|---|---|---|
| 从想法到第一屏 | ●在你本来就开着的 agent 里一句话 | 打开另一个工具、新建文件、手动拖框 |
| 多个相互链接的屏幕 | ●成套生成，共享样式、导航可用 | 每一屏手动绘制并手动连线 |
| 一致的视觉系统 | ●从可复用的设计系统里取，由 agent 套用 | 每个文件重做一遍，或纯靠手维护 |
| 可分享的成果 | ●自包含 HTML——任何浏览器都能打开，不需账号 | 查看者要占一个席位或要厂商工具的分享链接 |
| 通往真实代码的路径 | ●产物在你的 repo 里，设计与代码同源 | 一次交接之后从零重建 |
| 成本与锁定 | ●开源、自带密钥、本地运行 | 按席位订阅、厂商托管、导出受限 |
下面每一个都是从一句 prompt 开始、渲染成可点击产物的。挑一个跟你想法接近的模板，描述你的改法，agent 帮你改。
原型常见问题
-
01 用 Open Design 做原型需要 Figma 这类设计工具吗？
不需要。Open Design 在你的编码 agent 里运行，把原型渲染成 HTML。你用语言描述流程，agent 产出屏幕。没有额外的画布工具要学或要付费。
-
02 产出的是可交互原型还是静态 mockup？
可交互。导航、标签页、弹窗都能用，因为输出是真实的 HTML 和 CSS。你能在任何浏览器里像用户一样点击体验。
-
03 可以用哪些 agent？
Open Design 支持 Claude Code、Codex、Cursor Agent、Gemini CLI 等十多个一方适配。你自带 provider 密钥，没有任何东西替你托管。
-
04 原型能变成真正的产品吗？
这正是重点。产物就在你的项目里，同一套设计系统和组件会带进生产代码，而不是交接后被丢弃。
今晚就把下一个想法做成原型
给 repo 点个 star、装上 Open Design，在你本来就用的 agent 里，把下一个"要是……"变成能点击的东西。