Open Design 是每个 Vibe Coder 的梦想
一份面向 vibe coder 的 Open Design 实战手册——用上你自己的 agent，挑一套设计系统来摆脱 AI 的廉价感，用提示词搭出真正能转化的结构，再把粗糙的 PRD 在几分钟内变成一个落地页、一个移动应用和一个桌面应用。基于 Sean Kochel 的实操演示。
这份指南是一本面向 vibe coder 的 Open Design 实战手册：用上你早已在用的 agent，挑一套设计系统，让产出不再一眼就让人喊出“这是 AI 生成的”，用提示词搭出真正能转化的结构，再通过对话不断迭代。它跟着 Sean Kochel 在他的实操演示中接连完成的三个项目走——一个落地页、一个移动应用、一个桌面应用——并根据当前版本重新撰写、更新。想看现场实操就看上方的视频，想看文字版就继续往下读。
Open Design 工作区——原型、幻灯片、图片和视频，全都在一块从容而熟悉的画布上。
什么是 Open Design？
Open Design 是一个开源、本地优先的设计平台，它跑在你早已在用的编程 agent 之上。它会检测你机器上已有的 CLI——Claude Code、Codex、Cursor、Gemini、Copilot、OpenCode，还有几十种其他工具——并让那个 agent 来驱动生成。用 Sean 的话说：有一个 CLI 层用来配置你的 agent，一段系统提示词驱动质量，然后是真正让它有价值的部分——skill 支持和一个深厚的设计系统库。产出的是真实的 HTML 文件，所以你做出来的东西能直接放进你真正的项目里。
vibe coder 为什么在意它：
- 用你自己的 agent 和密钥——不用再订阅第二份服务，也没有供应商锁定。
- 本地运行——产出是 HTML，可以直接搬进你的代码库。
- 设计系统消灭 AI 廉价感——从一个真实品牌出发，而不是一张空白画布。
- skill 可定制——把你自己的文案规则、UX 范式或流程直接放进去。
- 开源，Apache-2.0——读它、fork 它、用它交付客户项目。
每个 vibe 项目都会撞上的两个问题
Sean 把整套工作流围绕两种失败模式来组织，它们值得被点名，因为这本手册接下来的内容就是教你如何避开它们：
- 看起来像 AI 廉价货。千篇一律的渐变、同一款衬线字体、一堆套娃容器——连你自己都不喜欢。
- 它的结构撑不起它的目的。一个不会转化的落地页，一个流程说不通的应用。
一套设计系统解决第一个问题。一段带真实结构的精心提示词解决第二个问题。接下来每个项目都要把这两点记在心里。
第 1 步——安装并选择你的 agent
你有三种入门方式：
| 方式 | 适合谁 | 前置要求 |
|---|---|---|
| 桌面应用 | 大多数人——零配置 | 无。下载打开即可。 |
| 从源码运行 | 想读或改代码的开发者 | Node ~24，pnpm 10.33.x |
| 装进你的 agent | 常驻终端的人 | 一个已有的编程 agent CLI |
最快的方式是桌面应用——到 open-design.ai/download 下载；它会自动检测你 PATH 上已有的 agent CLI。如果想改用源码运行：
git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web打开它打印出来的本地 URL（它用的是动态端口——不要写死某个端口）。首次启动时，把 Open Design 指向你想用来驱动工作的那个 agent，或者用你自己的 API 密钥。
第 2 步——做一个能转化的落地页
这是 Sean 的第一个演示，也是后面所有项目的模板：
- 挑一套设计系统。演示里他选了 Anthropic 的。这是你抵御廉价感的护栏——agent 会继承那个品牌的配色、字体和组件语言。
设计系统库：每一项都把一个真实品牌拆解成配色、排版、组件，以及你可以复用的视觉氛围。
- 提示结构，而不只是氛围。Sean 明确告诉它要做哪些板块——一共十一个——并把他 PRD 里的执行摘要（产品愿景、问题陈述、目标用户、提议方案、核心功能）粘进去，这样文案才有真实的上下文可依。
- 回答它的探询问题。和 Claude Design 一样，Open Design 在动笔前会问澄清性问题。这里它调用自己的 SaaS 落地页 skill 来执行——而因为 skill 不过是文件，你完全可以换成加载你自己的文案准则或板块结构作为 skill。
- 让它跑起来。大约五分钟后，他就拿到了一个专业的初稿——一个真正以转化为导向的结构、一张清爽的对比表、一张排版精美的案例卡片、一段扎实的 FAQ。
想要不一样的感觉？Sean 用完全相同的需求说明，把语气从编辑风换成粗野主义（brutalist），得到了一个明显不同的设计——结构相同，外皮不同，因为重活都是设计系统在干。
第 3 步——逐屏搭建一个移动应用
在移动端演示里，Sean 一次只做一个界面。他沿用同一套 Anthropic 设计系统，然后为每个界面粘进一段从 PRD 搭出来的提示词——一个首页信息流、一个“查漏补缺”推荐界面、一个随手记的饮食日志。agent 会问它的澄清问题，模拟出一个 iOS 布局，并在三个界面上始终遵循所选的设计系统。
这里的启示是：你怎么提示 UX，决定了结果的大部分。当他把同一个应用重新设想成一个以聊天为先的教练式界面时，他得到了一组截然不同——但依然自洽——的界面。设计系统让它保持品牌一致；你的提示词决定范式。
模板库：原型、幻灯片、图片和视频的起点，可以按类型筛选并 fork 后开工。
第 4 步——玩转多模态：从界面到桌面应用
最后一个演示展示了多模态的妙处。Sean 把他的三个移动界面截图，丢进一个新的对话，然后给出一个开放式的请求：“给这套核心功能模拟一个 web 应用版本。”五分钟后，他就有了一个干净的三栏桌面版译写——导航在左、工作画布居中、进度视图在右——连斜杠命令的交互也一并模拟了出来。
哪怕只是一段模糊的提示词加上参考图，也能给你一个可用的起点。有一份正经的规格说明，结果会更锐利，但核心结论不变：你可以在不同载体之间自由流动。
小贴士
- 永远从设计系统出发。它是对抗 AI 廉价感最有力的单一杠杆。
- 明确地提示结构。把板块或界面一一列出来；从 PRD 粘进真实上下文，文案才不空洞。
- 善用 skill——也写你自己的。skill 不过是文件；把你的文案规则或 UX 范式直接加载进工作流。
- 通过对话迭代。不同的 UX 设定会产出非常不同的结果；这是一个特性，所以多试几种。
- 用好参考图。把已有界面截图丢进去，在不同载体之间译写。
- 记住产出是 HTML。它生来就是为了放进一个你已经动工的项目里。
FAQ
我必须用某个特定的模型吗？ 不用。Open Design 会驱动你配置好的任何 agent——Claude Code、Codex、Cursor、Gemini、OpenCode 等等——或者用你自己的 API 密钥。没有供应商锁定。
这和 Claude Design 有什么不同？ 同样熟悉的感觉，但它免费、开源、本地优先、与模型无关，而且可定制程度高得多——你可以加进自己的 skill 和流程。再加上单一供应商工具给不了你的图片和视频生成能力。
我能把做出来的东西并入一个已有的应用吗？ 可以——产出是 HTML 文件，就是为了放进一个你已经动工的项目而生的。Sean 在一个配套视频里讲了以规格驱动的合并工作流。
它免费吗？ 这个应用在 Apache-2.0 下开源，本地运行免费。你只需为接入的那个 agent 和那些供应商所用的模型与媒体用量付费。
这份文字指南基于 Sean Kochel 的实操演示。观看上方的完整视频，并订阅 Sean Kochel 以获取更多 AI 构建工作流。