设计师的 AI 代码桥：tokenbridge.dev 开发手记

01问题定义：AI 缺少的不是能力，是上下文

2025 年，我和许多设计师一样开始深度使用 Cursor 这类 AI 编程工具。它们确实强大——一个侧边栏、一个仪表盘，几句话就能跑起来。但只要交给它的页面带一点品牌要求，结果就总是同一副样子：技术上可行，设计上全错。主色是它猜的蓝，圆角是它惯用的 8px，间距忽大忽小，组件模式和我定的规则毫无关系。每一个 AI 生成的组件，最终都变成一次手动修正任务。

起初我以为这是提示词写得不够细。于是我在 prompt 里贴上十六进制色值、字号阶梯、间距规则——有效，但每次都重复粘贴几十行约束，既脆弱又无法沉淀。后来我才意识到，这不是表达问题，而是结构问题：AI 编程工具缺少的不是生成能力，而是设计系统的上下文。没有上下文，它只能给出「统计意义上最像界面」的界面；有了上下文，它才可能给出「我的」界面。

每一个 AI 生成的组件，都会变成一次手动修正任务——除非你先教会它你的设计系统。

这正是 Vibe Coding 范式的核心矛盾：开发者追求的是「意图的瞬间注入」，通过 Prompt 表达意图，由 AI 快速实现。但意图若只是自然语言，就是一团模糊的信号；只有被结构化为精确的约束，AI 才能稳定执行。设计领域恰好早就有了这种结构化的载体——Design Token。问题因此被定义清楚：如何让设计师的设计系统，变成 AI 编程工具能读懂、能遵守的上下文？

02定位与命名：把 Vibe 编码成 Token

2.1不跟传统工具竞争

设计令牌工具并不新鲜，Tokens Studio、UXPin 早已成熟。但细看会发现，它们的受众是设计师，输出物是代码片段与 JSON，交互逻辑是静态文档查询，工作流是设计驱动代码。而在 AI 编程的新链路里，真正饥渴的是另一群人：对品牌一致性有极高要求的 Vibe Coder 和独立开发者。他们需要的不是一份令牌清单，而是一份 AI 的行为准则——能被动态注入、被工具原生遵守的规则文件。新品类由此成立：设计意图编码工具。

2.2名字即产品说明

tokenbridge.dev 这个名字是一个双关。Token 既是 W3C Design Tokens 标准里的官方术语——设计意图的编码，也是 AI 运行逻辑里的最小单位；Bridge 则是 AI 代码生成之前的意图理解通道。两个含义叠在一起，恰好就是这个产品做的事：把抽象的设计变成 AI 能理解的 Token 流。域名即说明书，用户看到名字就知道它是干什么的，这是独立开发者最便宜的用户获取方式。

作为「母品牌」的工具叫 tokenbridge，它的产出物——那个 ZIP 技能包——被命名为 design-rules。「Design」定义范畴，「Rules」定义态度：它在告诉 AI，这不仅是样式，这是逻辑边界。用户的心智很简单：我要给 AI 立规矩了。Slogan 也随之落定：Token your Design Vibe, Bridge to AI Code——编码设计意图，桥接 AI 代码生成。

Token 是设计意图的编码，Bridge 是意图理解的通道——名字即产品说明。

03颜色系统：从 14 色到 24 色的双模式架构

颜色是设计系统里最深的水。初版配置器只有 14 个颜色令牌，界面只暴露 7 个，没有派生逻辑，也没有语义状态色——用户每配一个主题，都要手工调整大量近似色，既枯燥又容易出错。0.5 版本我做了一次彻底重构：把令牌架构升级为 24 色双模式系统。

核心思路是一条派生链。基础模式下，用户只需配置 6 个核心色，其余 18 个全部由派生引擎自动生成：所有前景色按 WCAG AA 对比度自动计算，保证文字可读；Card、Popover、Muted 等容器色从背景派生；Border 与 Input 在背景基础上调暗 10%，Ring 直接等于 Primary；Success、Warning、Info 三个语义状态色使用跨主题一致的预设值。暗色模式不是简单反色，而是智能的亮度反转——在翻转明暗的同时保住品牌色的色相与识别度。高级模式则展开全部 24 色供微调；一旦用户手动改动了某个派生色，锁定机制会记住这次修改，之后核心色再变也不覆盖它。

这套设计背后是一个方法论判断：默认值即设计决策。配置器不应该把 24 道「选色题」抛给用户，而应该把它们压缩成 6 道「填空题」，剩下的用经过验证的派生规则兜底。设计师的专业价值，恰恰体现在这些用户看不见的默认规则里。

04风格与主题：双维度预设系统

0.5 之前的预设是单维度的——一个预设里既包颜色又包圆角阴影，换一个颜色就换掉了所有风格。这次升级把它拆成两个独立维度：风格预设控制圆角、阴影强度、紧凑度、按钮大小与输入框样式；颜色主题只管色彩。两者独立选择、组合生效，6 × 6 得到 36 种开箱即用的设计起点。

预设的质量怎么保证？我的答案是：参考是最好的质量控制。6 种风格各有明确的设计语言对标——Default 对应 shadcn/ui 的中性，Soft 取自 Apple HIG 的圆润，Sharp 来自 IBM Carbon 的硬朗，Linear 复刻 Linear.app 的现代感，Brutalist 是瑞士国际主义的高对比，Playful 则是 Duolingo 式的大圆角。6 个颜色主题同样如此：Graphite 对标 Vercel，Ocean 对标 Stripe，Emerald 对标 Robinhood，Violet 对标 Framer，Coral 对标 Airbnb，Amber 对标 Duolingo。每个主题都满足三条原则：前景背景组合符合 WCAG AA 标准；暗色模式独立调优而非简单反转；语义状态色在所有主题中保持一致语义。

好的预设不是替用户做决定，而是把成熟产品的设计语言，变成用户一键可达的起点。

05编译与导出：把设计系统变成 AI 技能包

配置只是上半场，导出才是这个产品的胜负手。整个应用是纯前端架构——没有后端 API，所有生成都在浏览器里完成。令牌经由 Handlebars 模板引擎编译，再由 JSZip 打包，共输出 6 种格式：Design-Rules Skill（ZIP）、Cursor Rules（.mdc）、Antigravity Rules（.md）、CSS Variables（.css）、JSON Tokens（.json）与 Tailwind Config（.ts）。

其中最推荐的是 Design-Rules Skill。它不是一个样式文件，而是一个结构化的技能包：主文档 SKILL.md 教 AI 理解整套设计系统，references 目录下的设计令牌参考、组件规范、色板与排版文档供 AI 按需查阅，assets 里的 HTML 预览模板则让 AI 在生成前先「看到」目标效果。这与传统工具的差别是本质性的：输出物从代码片段变成了 AI 行为准则，交互逻辑从静态文档查询变成了动态 Prompt 注入，工作流从「设计驱动代码」变成了「AI 驱动实现，Token 约束边界」。

06独立开发与发布：用 AI 建造桥

6.1一次自证式的构建

这个项目有一点天然的自证意味：它完全用它所支持的工具建成——Cursor 与 Claude Code 负责大量代码生成，Vercel 负责部署，我负责定义问题、设计系统、产品决策与最终的质量把关。技术栈是 Next.js 15 + React 19 + TypeScript，状态管理用 Zustand 并持久化到本地（带版本迁移，用户配置不会在升级时丢失），界面用 Tailwind 与 Radix 组件，国际化用 next-intl 支撑中英双语路由。

人机协作里的工程细节同样值得记录：颜色配置用 16ms 防抖对齐 60fps 的拖拽手感；预览区把 24 色与风格令牌以 CSS 变量实时注入，且与应用自身样式完全隔离，亮暗模式可独立预览；仪表盘、组件、表单、反馈四种预览视图，让用户在导出前就能看到令牌在真实界面上的表现。

6.2版本节奏与发布

版本日志忠实记录了产品的收窄过程：0.3 统一技能包名称为 design-rules，启用 tokenbridge.dev 域名与 logo，并建立版本日志本身；0.4 增加首页案例模块、Favicon 与 OG 图，做 SEO 优化并把学习中心拆为独立路由；0.5 则是配置器的大更新——24 色双模式系统、6 种风格预设、6 个颜色主题与更完整的效果系统。除此之外，产品还内置了一个 7 节课程的学习中心，帮助没有设计系统经验的开发者建立基础认知。

产品已公开发布于 tokenbridge.dev，配有完整文档与中英双语界面。2026 年 1 月，针对 Product Hunt 的全套发布物料——标语、产品描述、截图与演示素材——已全部备齐。从写下第一行代码到备齐发布物料，整个过程没有第二名成员。

用 AI 建造桥，再用桥让 AI 建得更好。

07结语：从一次实践到一套方法

回头看，这个项目验证了几条可以复用的方法：问题定义先于解决方案——「设计上下文缺失」这个判断，比任何功能设计都更早决定了产品的天花板；默认值即设计决策——派生规则、预设对标，都是把专业能力沉淀进用户看不见的地方；上下文工程是设计师的新杠杆——当 AI 接管了实现，设计师能交付的最有价值的东西，从界面本身变成了约束界面的规则。

在上一篇关于实体产品与数字产品的文章里，我把 Design Token 称为设计系统与工程体系的接缝。tokenbridge.dev 是对这句话的一次延长线：当工程体系的执行者从人变成 AI，这条接缝也需要从「给人看的规范」升级为「给 AI 立的规矩」。设计系统的下一站，是让机器成为它的第一读者。至于更远的路——Figma 插件、令牌导入、团队协作——版本日志里见。