面向团队的 Open Design —— 可版本化的技能、专属品牌系统与反套路护栏

本指南讲的是把 Open Design 当成一套真正可版本化的设计工作流来用 —— 而不仅仅是一次性的原型生成器。让它对团队真正有价值的组合是：你现有的 agent、基于文件的技能，以及品牌 DESIGN.md 体系，再配上反套路护栏，让产出看起来不像机器生成的。本文沿用 AICodeKing 在他的视频里给出的分析，并结合当前版本重写、更新。完整拆解请看上方视频，或继续往下读文字版。

插件库：直接从注册表安装技能——包括反粗制滥造（anti-slop）的设计技能。

什么是 Open Design？

Open Design 是一款本地优先、开源的设计应用，它连接你已经在用的编码 agent。它不自带模型，而是从你的环境路径中检测 Claude Code、Codex、Cursor、Gemini、OpenCode 和 Qwen Code 等工具，并把该 agent 当作设计引擎使用 —— 如果一个都没装，则回退到 Anthropic API（BYOK）。它采用 Apache-2.0 许可，唯一的成本就是你所选模型的开销。用 AICodeKing 的话说，它是“一层包裹在你已有 agent 外面的设计外壳”。

为什么它是团队工作流，而不只是一个聊天框

AICodeKing 看好它的原因：它不是一个带预览的空白提示框。它的价值在于三样东西的组合，而这三样都是可版本化的：

1. 你现有的编码 agent —— 引擎，你已经付过钱了。
2. 基于文件的技能 —— 每个技能都为某一类具体界面（SaaS 落地页、仪表盘、定价页、文档、博客、移动应用、幻灯片）给 agent 提供规则，而不是“给我做个好看的页面”。
3. DESIGN.md 品牌系统 —— 纯 markdown 的设计系统，涵盖配色、排版、间距、布局、组件、动效、语气、品牌规则与反模式。

因为技能和设计系统都是文件，团队可以创建自己内部的仪表盘技能和自己的品牌 DESIGN.md，把它们提交到 git，让 Claude Code、Codex 或任何 agent 生成遵循这些规则的成果物。这是一套可版本化、可 fork、可评审的设计工作流 —— 是一个封闭的设计聊天框给不了的。

插件中心：浏览注册表、导入插件，并为你的团队做好准备。

反套路机制

这是 AICodeKing 最喜欢的部分，也是团队产出能保持拿得出手的原因：Open Design 专门对抗 AI 生成 UI 的那些破绽。提示词栈在生成成果物之前会跑一遍多维度评审（设计哲学、层次、执行、具体性、克制），每个技能都可以附带一份 agent 必须满足的 P0/P1/P2 清单，而且仓库明确禁止那些常见的翻车套路 —— 刺眼的紫色渐变、千篇一律的 emoji 图标、随意加左边框点缀的圆角卡片、假数据、装饰性填充。再搭配需求发现表单（在动笔前先询问界面类型、受众、语气、品牌、规模）和方向选择器（带确定性调色板的精选视觉方向），agent 就有了稳定的事实来源，而不会在每次细化时漂移走样。

安装

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.ai/download 下载桌面应用。首次加载时它会检测你已安装的 agent CLI；选一个，或使用 Anthropic BYOK 选项。完整插件库可在 open-design.ai/plugins 浏览。

一个带团队味道的示范

AICodeKing 建议的流程能干净地映射到真实工作中：选 Codex 或 Claude Code 作为 agent，选一个技能（SaaS 落地页或仪表盘），再选一个设计系统（比如 Linear 或 Stripe —— 容易判断好坏）。提一个具体的需求，比如给一个内部产品做落地页，填好需求发现表单，选一个方向，然后让它跑。计划会流式生成出来，agent 会读取技能和 DESIGN.md，并写出真实的文件。

HyperFrames 画廊：由代码驱动的动效与视频作品，你可以复刻并二次创作。

产出会在沙箱预览中渲染，并可导出为 HTML、PDF、ZIP 和 Markdown（幻灯片类技能为 PPTX 风格）。由于设计系统和技能始终留在提示词栈里，细化时不会漂移 —— agent 会保持稳定的参照，而不是每一轮都重新发明外观。

对生产环境要诚实

AICodeKing 看得很清醒，你也该如此：这是一个早期项目，所以请把它当作一个强力的起点，而不是一个即插即用的生产级设计团队。产出质量在很大程度上取决于你指向的模型 —— 弱模型加上好的设计系统，得到的依然是糟糕的设计判断力。Claude Code 能拿到最丰富的流式输出；其他 CLI 是按行缓冲的。而且由于守护进程会带着一个工作目录来启动 agent，你要慎重考虑安装哪些技能、暴露哪些目录。对于快速原型、落地页、内部仪表盘和幻灯片，它确实很有用；而对于要上线的生产 UI，先生成，然后审查代码、测试响应式、再细化。

小贴士

• 写你自己的技能 + 品牌 DESIGN.md 并提交它们 —— 这才是团队的超能力。
• 评估产出时，选一个辨识度高的设计系统（Linear/Stripe），这样质量好坏一目了然。
• 用好需求发现表单和方向选择器，在生成前锁定方向。
• 使用本地 CLI，让生成走在你已经付费的订阅上。
• 对生产环境而言，把产出当作起点 —— 审查、测试、细化。

常见问题

团队能构建自己的技能和设计系统吗？ 能 —— 技能是文件夹，设计系统是 DESIGN.md 文件。把它们提交到 git，任何已连接的 agent 都会据此生成，于是整套工作流都是可版本化、可 fork 的。

是什么让产出看起来不像 AI 生成的？ 生成前的多维度自我评审、每个技能各自的 P0/P1/P2 清单，以及对常见套路（紫色渐变、千篇一律的图标、假数据）的明确禁令，再加上需求发现表单和方向选择器。

它能用于生产环境吗？ 它是一个早期但有能力的起点。把它用于原型、仪表盘、落地页和幻灯片；对于生产 UI，请审查并细化生成的代码。

它免费吗？ 这款应用基于 Apache-2.0 开源，本地运行免费。你只需为所连接的 agent 与密钥的模型用量付费。

---

这篇文字指南基于 AICodeKing 的分析。请观看上方完整视频，并订阅 AICodeKing 获取更多 AI 工具深度内容。