开源设计工作台：用一份 DESIGN.md 统一设计规范和代码
广州/网页设计师/14天前/432浏览
版权
开源设计工作台：用一份 DESIGN.md 统一设计规范和代码
之前给大家分享了 68 套品牌 DESIGN 文档合集，你可以打开每个品牌文件夹看具体的品牌视觉。但说实话，每次都要找文件、改内容、确定风格，这样还是有点麻烦的。
那么有没有更好的解决方案呢？
有的，这是
RICOUI DESIGN
，一个我自用的 DESIGN.md 设计系统工作台，开源。之前那套品牌库，现在也是这个项目的一部分。
- 网站：design.ricoui.com
- 仓库：github.com/ricocc/ricoui-design-md
它能做什么？
你可以在网页里创建、编辑和预览设计规范，再把同一份文档转换成前端和 AI 能直接使用的 Design Tokens 与 CSS。
它适合需要整理设计规范的设计师、前端开发者，以及用 Cursor、Claude、Codex 等 AI 工具制作界面的人。
使用说明与教程
- 浏览内置品牌库，拆解成熟产品的设计语言当学习素材；
- 输入网站 url 生成 DESIGN.md, 并派生 tokens.json、CSS 和 ZIP 等；
- 把一套设计决策（颜色、字体、间距、组件、该做什么、不该做什么）收进一份 Markdown；
- 边写边看预览，用结构化控件精确改某个颜色或字号，不用手敲代码；
- 写完一键派生出 tokens.json、CSS 和 ZIP，直接交给前端。
示例流程：
1. 导入或 brands 页面寻找喜欢的品牌
2. 点击品牌查看详细信息，右上角可下载多个文件
3. 复制到工作台进行编辑
4. 保存到设计库存档
谁适合用，分别能拿到什么
不同身份进来，关心的东西不太一样，但用的是同一个工作台。
- 设计师 最在乎“不写代码也能精确控制视觉”
在结构化视图里，颜色有色盘，字号和间距有数值控件，改完立刻在预览里看到效果，不用碰 Markdown。品牌库里那一批知名品牌的规范可以当素材，看中哪个一键复制成草稿，改成自己项目的样子。
- 前端开发者 关心“规范怎么变成能用的代码”
一份 DESIGN.md 通过派生检查后，能导出 DTCG 格式的 tokens.json、variables.css、Tailwind v4 的 theme.css，以及一个打包好的 ZIP。这些文件都是从同一份文档生成的产物，不需要另作维护，改了文档重新导出就行。需要给团队发正式版本时，还能生成带签名链接的私有交付 ZIP。
- 用 AI 做界面的人 关心“怎么让 AI 读懂设计”
把 DESIGN.md 和对应的 tokens 文件放进项目上下文，喂给 Cursor、Claude 或 Codex，它读到的就是具体的颜色变量、字体层级和组件约束，而不是一个模糊的品牌名。懒得从零写时，粘一个公开网址让 AI 起草初稿，再逐条看 diff 决定要不要应用。
DESIGN.md 是什么
一句话：
DESIGN.md 是一份带固定结构的 Markdown 文档，人能读，AI 也能解析。
它用一个文件把一整套设计系统写下来，这份文件就是唯一真源，预览和所有交付格式都从它派生，而不是各自维护一份。
一个最小骨架长这样：
骨架定下来之后，每个章节各管一块。下面这张表是各章节的分工，写之前先看一眼，就知道哪段该放什么：
写
DESIGN.md
时有几点能让它更好用：
- Token 用 Markdown 表格存，Name / Value / Token / Role 四列，规范识别格式；
- 字体列直接写 fallback chain（Inter, ui-sans-serif, system-ui, sans-serif），省得另维护一份字体清单；
- 组件段落里用 {colors.primary} 这样的引用把 Token 串起来，改一处颜色，全局和组件跟着变；
- 把 Do 和 Don't 单独强调。规范里最应该写的不是"该做什么"，而是"不该做什么"。
不用一次写完所有章节。先建一个能解析的骨架，再逐项补全，从细微开始更容易定位问题。
怎么用
不用注册，不用配置环境变量，打开浏览器就能用，数据储存本地。登录则可以解锁云端存储。
页面入口指引
入口按"想做的事"分布在不同页面，下面这张表用来快速定位：
创建第一份 DESIGN md
1. 打开首页，选择"新建草稿"。
2. 在编辑器切换到"源码"视图。
3. 输入名称、描述、主题、颜色、字体、间距和组件说明。
4. 等待顶部状态显示"已保存到本机"。
5. 切到"阅读"检查排版，切到"结构化"改具体颜色和字号，最后打开"预览"看视觉结果。
可以直接套用这个最小骨架起步：
# Acme — Design SystemA clear design language for product interfaces.**Theme:** light## Tokens — Colors| Name | Value | Token | Role || ---------- | ------- | ------------------ | ------------------ || Brand | #2563EB | --color-brand | Primary actions || Background | #FFFFFF | --color-background | Application canvas || Text | #0F172A | --color-text | Primary text |## Tokens — Typography| Name | Value | Token | Role || ---- | ------------------------------------------- | ----------- | --------- || Sans | Inter, ui-sans-serif, system-ui, sans-serif | --font-sans | Interface |### Type Scale| Role | Size | Line Height | Letter Spacing | Token || ---- | ---- | ----------- | -------------- | ---------------- || Body | 16px | 1.5 | 0 | --font-size-body |## Tokens — Spacing & Shapes### Spacing Scale| Name | Value | Token || ---- | ----- | --------- || 1 | 4px | --space-1 || 2 | 8px | --space-2 |### Radius Scale| Name | Value | Token || ------ | ----- | ----------- || Medium | 8px | --radius-md |## Components### Button**Role:** Primary action control.Use the brand color for the primary state and keep one primary action persurface.## Do's and Don'ts### Do- Keep action labels short and specific.### Don't- Do not use multiple primary actions in one panel.
用 AI 从一个网站生成 DESIGN.md
这一步需要你自己的 AI Key。Key 只存在你自己的浏览器里，应用不提供统一的 Key。
1. 先在"设置 → AI 服务"里配置 Key 并"测试连接"。
2. 在首页搜索框或全局搜索输入品牌网站地址，选"从网址生成 DESIGN.md"。
3. 应用先查找公开的 DESIGN.md，同时提取页面元信息、可读内容和样式信号。
4. 确认 AI 配置后开始生成；关闭进度面板不会自动取消后台任务。
5. 检查品牌色、字体、Token、组件说明和来源链接。
6. 保存到设计库
安全边界要清楚：应用会拒绝 localhost、私有 IP、带用户名密码的 URL，以及 DNS 解析到私有网络的主机。网址生成是一个分析起点，不是逐像素复制网页，也不代表你拿到了原站的品牌资产授权。
复杂页面的提取准确率取决于模型对布局的理解，不能完全依赖 AI，重要数值还得自己确认。
云端服务
这点仓库文档写得很清楚。对只在线上用的用户，最重要的一行是：未配置云端时，应用不会自动上传草稿。 本地草稿存在你自己的浏览器（IndexedDB），刷新后可恢复。
如果开启了云端同步，有几条额度上限需要知道（额度以 Supabase 当前官方说明为准）：云端草稿 75 份、设计库条目 50 个、单项 Markdown 250 KiB、账户 Markdown 合计 1 MiB、单个交付 ZIP 2 MiB。 达到上限时，本地编辑、读取、导出、删除仍然可用，只是会增加云端用量的操作被阻止。
自己部署
在线版够大多数个人用户用。如果你想要跨设备同步、私有交付版本，或者给团队部署一个独立实例，可以把项目克隆到本地自己跑。
从本地启动到上线 Vercel 的完整步骤（装依赖、配 AI、接 Supabase、部署、验收），仓库也自带完整文档，在 /GUIDE 目录。
最快的本地启动只要下面几条命令，不用任何环境变量就能编辑、预览、导出：
git clone https://github.com/ricocc/ricoui-design-md.gitcd ricoui-design-mdpnpm installpnpm dev
我的设计思路
我一直在坚持以 DESIGN.md 为核心去构建产品和品牌的视觉文档。
我每个项目都会配一套 DESIGN.md，把设计规范整理清楚，给 AI 阅读，也用来约束设计。
为什么做这个?
我手上的项目和站点越来越多，设计规范平时散落在 Figma、协作文档、截图和口头约定里，并且项目太多了我也记不住。到了用 AI 写界面这一步，问题更明显，AI 手里没有一份它能读懂的约束，只能凭项目当前的视觉风格去猜，出来的东西往往会跑偏，没有统一的视觉。
DESIGN.md 的思路是把一整套设计系统写进一份 Markdown：最底层的颜色、字体、间距、圆角叫 Token；再往上写组件长什么样、什么时候用；最后留一块"该做什么、不该做什么"。
design.ricoui.com 这个工作台，就是让我"维护 DESIGN.md"这件事变得方便。
我把它的能力分成两个视角去看：一个是看，一个是做。
看，是指浏览和参考。
之前那套品牌库，我搬到了 design.ricoui.com/brands。在这里你能看到所有品牌的规范，每种格式（预览页、DESIGN.md、tokens.json、CSS）都在，方便一键复制、下载、收藏，或者直接“用作模板”复制成自己的草稿。这些成熟产品的设计语言本身就是很好的学习素材，可以拆开看别人怎么处理颜色、字体、间距和组件。
做，是指创建、编辑和交付
。
你可以从零写一份 DESIGN.md，也可以粘一个网址让 AI 先起草。编辑时不用手敲代码，颜色、字号、间距都有结构化控件，边改边看预览。写完之后，同一份文档能一键派生出 tokens.json、CSS 变量、Tailwind 变量和 ZIP，直接交给前端。如果你想要跨设备同步，或者给团队发私有交付版本，再按需开启云端。
最后
这个网站出发点是解决我自己关于 DESIGN.md 的所有需求，项目当前标记为 Beta 状态。云端功能需要部署者自己完成验收，不该被当成永久备份或正式 SLA 服务。
内置品牌参考是只读的，只作学习参考。品牌本身会更新设计，这边暂时没法及时跟进每一个更新。
- 网站：design.ricoui.com
- 仓库：github.com/ricocc/ricoui-design-md
建议的上手路径：
1. 先在 design.ricoui.com 用本地模式写一份自己的规范，跑通编辑、预览、导出。
2. 想要 AI 就在浏览器里加一个 Provider，尝试 AI 功能。
3. 想要跨设备同步或自建实例，可以自己部署二开。
这个网站还有挺多的设计和功能上文中没有聊到，可以自己探索一下~~
大家有兴趣的话，我之后会分享一下这个产品的设计和开发流程，还有技术栈选取的心得。
文章中的截图样机美化，是用了自己近期开发的另一个网站 shot.ricoui.com , 也是开源的，有需要的话可以体验一下
我是 Rico，感谢阅读！
0
举报
声明
收藏
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
推荐登录即可同步推荐记录哦
收藏登录即可加入我的收藏
评论登录即可评论想法
分享分享