从规格到前端，中间没有交接
把 agent 指向一份 DESIGN.md 和一段描述，它就写出贴合系统的真实前端代码——组件、屏幕、看板——直接在你的项目里。没有标注、不用「等设计」。
一句话
Open Design 把设计系统变成机器可读，弭平设计到工程的断层：写你代码的同一个 agent 套用系统、渲染出真实 UI。
工程师怎么用 Open Design
- 01
读系统，不读标注
DESIGN.md 就在 repo 里。agent 像读代码库其余部分一样读它——没有导出的规格要解读。
- 02
生成贴合系统的 UI
描述屏幕或组件，agent 写出已经匹配系统的前端。原型、后台看板、内部工具——几分钟搞定。
- 03
它本就是你的代码
产出是 repo 里的 HTML / 框架代码，能在 PR 里 review。「设计」和「实现」之间没有翻译步骤。
工程师能生成什么
原型 查看完整提示词 → 文档页面
文档页面 — 侧边导航、可滚动正文和目录。当需求提到'文档'、'指南'、'API 参考'或'教程'时使用。
原型 查看完整提示词 → 工程运维手册
工程运维手册 — 包含服务概览、告警表、仪表盘链接、常用命令操作步骤、值班轮换和事故响应清单。适用于需要运维文档、值班指南、SRE 文档或运维手册的场景。
演示文稿 查看完整提示词 → Html Ppt 知识架构蓝图
奶油蓝图架构 deck — 奶油纸 #F0EAE0 底色 + 单一锈红 #B5392A 高亮、48px 蓝图网格 mask、2px 黑边硬卡片、pipeline 步骤盒（其中一个抬高）、右侧锈红 insight callout、Playfair 衬线大字、SVG 虚线反馈环。零渐变零软阴影，认真且印刷友好。
演示文稿 查看完整提示词 → Html Ppt 技术分享
会议 / 内部技术分享演示文稿 — GitHub-dark 风格、JetBrains Mono 字体、终端代码块、议程 + 问答页面。适用于工程演示、内部分享会、技术会议演讲和代码详解。
原型 查看完整提示词 → 数据可视化报告
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
原型 查看完整提示词 → 看板
看板/任务面板，包含多个列（待办/进行中/审核中/已完成）、可拖动样式的卡片、成员头像、泳道和顶部筛选栏。当需求中提到'kanban'、'task board'、'sprint board'、'trello'、'看板'时使用。
用 Open Design 做前端 vs. 交接式
| 你需要什么 | 用 Open Design | 设计到开发交接 |
|---|---|---|
| 拿到可开工的设计 | ●一份 agent 直接读的 DESIGN.md | 一个你手动重新解读的 Figma 文件 |
| 匹配系统 | ●生成时自动强制 | 对着规格肉眼比、慢慢跑偏 |
| 做内部工具 / 看板 | ●prompt → repo 里贴合系统的前端 | 等设计师，然后做两遍 |
| review | ●它是代码——在 PR 里 diff | 对着 mockup 像素比对 |
| 成本与锁定 | ●开源、在你 repo 里、本机运行 | 全团队都要授权的设计工具 |
直接在 repo 里生成的、贴合系统的真实前端。挑一个接近你在做的，描述它。
工程常见问题
-
01 我还需要设计师吗？
品牌和方向需要。但做贴合系统的 UI 和内部工具时，agent 读 DESIGN.md 直接写前端——不用交接往返。
-
02 它产出什么？
repo 里真实的 HTML / 框架代码，在 PR 里可 review——不是你要重写一遍的 mockup。
-
03 怎么保持贴合系统？
DESIGN.md 是事实来源；agent 在生成时套用，所以产出无需手动像素核对就匹配。
-
04 可以用哪些 agent？
Claude Code、Codex、Cursor Agent、Gemini CLI 等一方适配，自带 provider 密钥。
今晚就生成你的下一个 UI
给 repo 点个 star、装上 Open Design，把一份 DESIGN.md 变成前端——在你本来就用的 agent 里。