认识 Open Design

Open Design（GitHub：nexu-io/open-design，Apache-2.0 开源）是社区推出的 AI 设计工作台，界面与工作方式和 Claude Design 同款：对话描述意图 → AI 在画布上生成可交互设计稿 → 批注 / 对话继续迭代。它与 Claude Design 最大的差别在架构：它自己不带任何模型——安装后自动检测你机器上已有的 coding agent CLI（Claude Code、Codex、Gemini 等 20+ 种），让那个 agent 充当设计引擎。

这带来一个对我们团队非常实际的结果：没有 Claude 账号也能用。有 ChatGPT 订阅的同事装一个 codex CLI，Open Design 就能驱动 GPT 出稿——而 swift-web 的设计资源照样全量生效（原因见下文「引擎无关」）。

与 Claude Design / Figma 的关系

	Open Design	Claude Design	Figma
性质	开源桌面应用，本地运行	Anthropic 官方云端产品	商业云端设计平台
模型	你机器上的任意 coding agent（Claude / GPT / Gemini…）	Claude（内置）	不适用（Figma Make 另计）
账号门槛	无（用你已有的 agent 订阅计费）	Claude 付费账号	Figma 账号
多人协作	无云端共享——靠分发设计系统资源包	Team / Enterprise 组织共享	实时协作（最强项）
数据位置	全部在本机	Anthropic 云端	Figma 云端

一句话定位：Claude Design 的开源本地替代。适合装不上 Claude 账号、或希望稿件全程留在本机的同事；代价是没有云端多人评审——成稿以导出 HTML / 截图的形式分享。

接入 swift-web 设计系统（约五分钟）

swift-web 为 Open Design 提供了专用设计系统资源包（与 Claude Design 的 20 张卡片同源——都从框架源码自动派生）。以下步骤在 macOS 上实测通过：

安装：从 open-design.ai 下载 DMG（或 brew install --cask open-design），启动并完成初始设置——应用会自动检测你机器上已装的 coding agent CLI。
下载资源包：swift-web-open-design.zip（含 DESIGN.md 设计叙述 + tokens.css 全量语义 token + components.html 组件真实形态 + manifest.json）。
放入设计系统目录：解压后把整个 swift-web/ 文件夹放进：
```
~/Library/Application Support/Open Design/namespaces/release-stable/data/design-systems/
```
应用会即时识别出名为 swift-web 的设计系统（草稿态）。
发布：在应用的设计系统面板把 swift-web 从 draft 置为 published——发布后它才会出现在新建项目的设计系统选择器里。
出稿：新建项目时选择 swift-web 设计系统，用自然语言描述页面即可。第一轮它通常会弹一个快速确认问卷（配色 / 栏目 / 数量等），作答后正式生成。

品牌变体示例：swift-web · yc001（糖心）

除了上面的底版（框架默认蓝），我们还提供一个品牌变体成品示例：swift-web-yc001-open-design.zip（糖心品牌：固定暗色底 + 品牌红 + 金币/VIP 等 27 个品牌补充 token）。导入方式与底版完全相同。

⚠️ 该变体是成品示例，非实时同步 —— 它不随框架变更自动刷新（按需重建），仅用于直观感受「品牌注入」能产出什么。要拿与最新框架一致的资源，请用上面的底版。

它值得下载看一眼的原因：变体和底版是同一套组件，只换了 token 值——这就是「新品牌接入 = 一张 token 清单」（见规范与治理·纪律三）的成品形态。你作为设计师交付一张定稿 token 清单后，换来的就是这样一套专属设计系统：之后在里面出的每一稿，天生就是品牌色，不需要每次叮嘱 AI「记得用我们的红」。

选哪个：做糖心项目 → 用变体（出稿即品牌）；其他项目 / 探索新品牌配色 → 用底版（中性起点，对 AI 说「换成 X 色系」自由探索，定稿后按纪律三申请自己品牌的变体）。

引擎无关：为什么 GPT 也能吃到我们的设计系统

Open Design 的设计系统是纯文件：生成时把 DESIGN.md（9 段式设计叙述）、tokens.css（语义 token 全量）、components.html（组件真实形态）原文注入 agent 的提示词。也就是说无论驱动的是 Claude 还是 GPT，模型读到的设计约束一字不差。

我们用同一份资源包对 Claude 与 GPT 5.5 双引擎做过实测：两侧产出的稿子都严格落在 token 体系内——色彩全部经 var(--primary) 等语义变量消费、圆角 0.5rem、hover 用 brightness(0.92)、中文字体栈正确，未出现散点色。资源保真度与引擎选择无关，同事可以放心用手头可用的模型。

从稿到码

Open Design 的产物是单文件 HTML（真实可渲染，不是截图）。交给前端的方式：

把导出的 HTML 文件（或项目文件夹路径）直接发给前端——Claude Code 读它落成 swift-web Nuxt 代码，与 Claude Design 的 handoff 殊途同归（见设计师与前端协作）；
它也支持导出 PDF / PPTX 用于评审场合。

因为稿子本身就是用我们的语义 token 和组件形态生成的，落码时同样几乎一对一映射。

使用前如实交底

社区开源项目，迭代很快：界面与目录结构可能随版本变化，本页步骤以我们实测的版本为准，遇到出入以官方 README 为准。
无云端协作：设计系统靠资源包分发（framework 更新后我们会同步刷新资源包），成稿靠导出分享。需要多人实时评审的场景，Figma 仍是最佳选择。
需要本机有 coding agent CLI 且有模型额度：生成消耗你自己的 agent 订阅 / API 额度（一张完整页面稿约几万 token 量级）。
首轮对话弹出的「快速确认」问卷是正常流程，不是卡住——作答（或让它直接开工）即可。