awesome-design-md 完整教程：如何把设计 Token 转成 CSS 变量，让 AI 代理直接产出品牌级 UI（附 73 份官方 DESIGN.md 用法）

awesome-design-md 完整教程如何把设计 Token 转成 CSS 变量让 AI 代理直接产出品牌级 UI附 73 份官方 DESIGN.md 用法【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--设计规范锁在 Figma 里、工程师靠截图和肉眼还原界面这个僵局怎么破开源项目 awesome-design-md 给出的答案是把品牌级设计规范中的设计 Token颜色、字体、间距、圆角写成纯 Markdown 文件 DESIGN.md让 AI 编码代理直接读取再借 CSS 变量完成设计规范 → UI 代码的完整链路。下面以仓库里真实的 Linear 设计文件为例把这套 DESIGN.md 用法从头到尾讲清楚。设计规范锁在 Figma 里如何直接给 AI 读先说痛点。很多团队的现状是设计师在 Figma 里维护着一套完整规范但开发者拿到手的往往是几张截图和一句照着做。等引入 AI 代理写界面时问题更明显——模型并不知道品牌色是什么、主按钮圆角是 8px 还是 12px生成的页面颜色跑偏、层级混乱只能人工返工。像这样风格统一的界面背后需要的是一套机器可读的规范。上图这类编辑器 UI 的每一个色值、圆角都可以沉淀为设计 Tokenawesome-design-md 的思路是绕开 Figma 导出和 JSON Schema用最朴素的方式规范就是一个 Markdown 文件丢进项目根目录任何 AI 代理都能立刻理解 UI 应该长什么样。项目里把文档分成两种分工——一类告诉编码代理项目怎么构建类似 AGENTS.md另一类告诉设计代理项目应该长什么样也就是 DESIGN.md。目前仓库收录了 73 份真实网站的 DESIGN.md覆盖 AI 平台、开发者工具、金融科技、汽车等行业。跟随一枚主按钮的旅程设计 Token 引用语法与 CSS 变量输出我们以 Linear 为例。先看最终效果Linear 的主按钮是薰衣草蓝底#5e6ad2、近白文字、8px 圆角、内边距 8px 14px。这枚按钮的基因其实来自设计文件里的一处 YAML 前置元数据button-primary: backgroundColor: {colors.primary} textColor: {colors.on-primary} rounded: {rounded.md} padding: 8px 14px注意看组件区没有写死任何色值而是用花括号引用前文定义的 Token。这些 Token 分成四类构成了整份文件的词表Token 类别真实示例作用colors 颜色primary: #5e6ad2、canvas: #010102品牌色、画布底色typography 字体display-xl80px/600 字重到caption12px完整字号层级spacing 间距4px 基准从xxs4px 到section96px 共 9 档布局留白rounded 圆角从xs4px 到pill9999px 共 8 档控件形状有了词表翻译成 CSS 变量就只是机械替换。颜色与尺寸先落到:root:root { --color-primary: #5e6ad2; --color-canvas: #010102; --radius-md: 8px; }组件样式随后只引用变量不再出现裸值.button-primary { background: var(--color-primary); border-radius: var(--radius-md); padding: 8px 14px; }到这里一枚主按钮从 YAML 引用到 CSS 变量的旅程就走完了。CSS 变量管线如何闭环Token 从哪来又如何防止风格失控很多人会问这些色值是谁定出来的答案藏在 Linear 官网的源码里——设计文件的四级表面层次正是从官网的--color-bg-level-3、--color-line-tint等 CSS 变量中直接提取的。这就是所谓CSS 变量管线的完整闭环提取从真实网站的 CSS 变量中读取原始色值与尺寸结构化整理为颜色、字体、间距、圆角四类设计 Token落文档写入 DESIGN.md 的 YAML 前置元数据与 Markdown 规则再生成AI 代理读取文档转回新的 CSS 代码上线。第 1 步和第 4 步首尾相接规范因此可以随官网迭代不断循环刷新而不是写完就过期。 再看引用而非硬编码这个设计决策的价值。写死色值时改一个品牌色要全局搜索替换漏一处就出现色差而 Token 引用下改一处colors.primary所有引用它的组件同步更新——这和 CSS 变量本身的哲学完全一致只是把同样的思想前移到了文档层。更关键的是文档里的该做与不该做护栏。以 Linear 为例它明确规定薰衣草蓝只可用于品牌标志、主 CTA、焦点环和链接强调禁止引入第二色彩点缀禁止给 CTA 用胶囊圆角。这类负面清单恰恰约束了 AI 最容易发散的部分——没有护栏时模型倾向于加点渐变、换个点缀色来显得有创意结果一眼假有了护栏生成结果才能稳定落在品牌允许的风格区间内。DESIGN.md 用法两步跑通顺便读懂 9 段式结构想在自己的项目里用上这套设计 Token 转 CSS 的能力只需两步克隆仓库git clone https://gitcode.com/GitHub_Trending/no/notepad--复制并下达指令从 design-md/ 目录挑一份目标品牌的 DESIGN.md 拷到项目根目录然后告诉 AI 代理按照 DESIGN.md 的风格构建这个页面即可。目录里 73 份文件按行业分类每份都附带一份 README 说明其适用场景与用法。所有 DESIGN.md 还遵循统一的 9 段式结构这是管线稳定的基础。按用途可以归成三组用途涵盖章节理解感觉视觉主题与氛围、调色板与角色、布局原则、深度与层级还原样子排版规则、组件样式按钮/卡片/输入框及状态、响应式行为断点与触控目标约束做法该做与不该做、代理提示指南含快速颜色参考与即用型 Prompt想进一步动手可以参考这几个入口仓库总览与品牌清单见 README.md如何修正错误色值与补齐缺失 Token 见 CONTRIBUTING.md完整文件集合在 design-md/ 目录授权条款见 LICENSE。 小结DESIGN.md 把设计规范从 Figma 的孤岛变成了 AI 代理可直接消费的文档设计 Token 与 CSS 变量首尾相衔形成一条可循环的管线。掌握它就是掌握了让 AI 稳定产出品牌级 UI 的核心方法。【免费下载链接】notepad--一个支持windows/linux/mac的文本编辑器目标是做中国人自己的编辑器来自中国。项目地址: https://gitcode.com/GitHub_Trending/no/notepad--创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考