Article
之前给大家分享了 68 套品牌 DESIGN 文档合集，你可以打开每个品牌文件夹看具体的品牌视觉。但说实话，每次都要找文件、改内容、确定风格，这样还是有点麻烦的。
那么有没有更好的解决方案呢？
这是 RICOUI DESIGN，一个我自用的DESIGN.md设计系统工作台，开源。之前那套品牌库，现在也是这个项目的一部分。
它能做什么？
你可以在网页里创建、编辑和预览设计规范，再把同一份文档转换成前端和 AI 能直接使用的 Design Tokens 与 CSS。
它适合需要整理设计规范的设计师、前端开发者，以及用 Cursor、Claude、Codex 等 AI 工具制作界面的人。
使用说明与教程
design.ricoui.com 是一个围绕 DESIGN.md 的设计系统工作台。打开浏览器就能用，不用注册，AI 功能接入你自己的 API Key。
- 浏览内置品牌库，拆解成熟产品的设计语言当学习素材；
- 输入网站
url生成DESIGN.md, 并派生 tokens.json、CSS 和 ZIP 等； - 把一套设计决策（颜色、字体、间距、组件、该做什么、不该做什么）收进一份 Markdown；
- 边写边看预览，用结构化控件精确改某个颜色或字号，不用手敲代码；
- 写完一键派生出 tokens.json、CSS 和 ZIP，直接交给前端。
示例流程：
- 导入或
brands页面寻找喜欢的品牌
- 点击品牌查看详细信息，右上角可下载多个文件
- 复制到工作台进行编辑
- 保存到设计库存档
谁适合用，分别能拿到什么
不同身份进来，关心的东西不太一样，但用的是同一个工作台。
设计师 最在乎“不写代码也能精确控制视觉”。在结构化视图里，颜色有色盘，字号和间距有数值控件，改完立刻在预览里看到效果，不用碰 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 也能读懂设计。它用一个文件把一整套设计系统写下来，这份文件就是唯一真源，预览和所有交付格式都从它派生，而不是各自维护一份。
一个最小骨架长这样：
# Acme — Style Reference
> 一句话品牌调性
**Theme:** light
## Tokens — Colors
| Name | Value | Token | Role |
## Tokens — Typography
### Type Scale
## Tokens — Spacing & Shapes
### Spacing Scale
### Border Radius
## Components
## Do's and Don'ts
## Imagery
## Layout骨架定下来之后，每个章节各管一块。下面这张表是各章节的分工，写之前先看一眼，就知道哪段该放什么：
| 章节 | 写什么 |
|---|---|
| 顶部（标题 + 引用 + Theme） | 产品名、一句话品牌调性、明色／暗色主题 |
| Tokens — Colors | 颜色原子：名称、色值、CSS 变量名、用途 |
| Tokens — Typography | 字体族（含 fallback）+ 字号阶梯（大小、行高、字距） |
| Tokens — Spacing & Shapes | 间距阶梯 + 圆角阶梯 |
| Components | 每个组件一段：角色、用哪些 Token、用法约束 |
| Do’s and Don’ts | 质量护栏：鼓励做什么、禁止做什么 |
| Imagery / Layout（可选） | 图片风格、布局节奏 |
写 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，或输入网址让 AI 生成 | 首页”新建草稿”，或搜索框直接粘网址 |
| 编辑文档、看预览、跑 AI、导出文件 | 编辑器（打开任一草稿即进入） |
| 找回、筛选、批量整理已有草稿 | ”草稿”页 |
| 把成熟规范存起来，带描述、标签、项目链接 | 设计库 |
| 拆解成熟产品的设计语言当学习素材 | 品牌参考（只读，可复制到工作台编辑） |
| 跨草稿、设计库、品牌一次搜到位 | 全局搜索（Ctrl K / ⌘ K） |
| 管理登录后的私有交付版本 | ”交付版本”页（需登录并开通云端） |
创建第一份 DESIGN md
- 打开首页，选择”新建草稿”。
- 在编辑器切换到”源码”视图。
- 输入名称、描述、主题、颜色、字体、间距和组件说明。
- 等待顶部状态显示”已保存到本机”。
- 切到”阅读”检查排版，切到”结构化”改具体颜色和字号，最后打开”预览”看视觉结果。
可以直接套用这个最小骨架起步：
# Acme — Design System
> A 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 per
surface.
## 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。
- 先在”设置 → AI 服务”里配置 Key 并”测试连接”。
- 在首页搜索框或全局搜索输入品牌网站地址，选”从网址生成 DESIGN.md”。
- 应用先查找公开的
DESIGN.md，同时提取页面元信息、可读内容和样式信号。 - 确认 AI 配置后开始生成；关闭进度面板不会自动取消后台任务。
-
检查品牌色、字体、Token、组件说明和来源链接。
-
保存到设计库
安全边界要清楚：应用会拒绝 localhost、私有 IP、带用户名密码的 URL，以及 DNS 解析到私有网络的主机。网址生成是一个分析起点，不是逐像素复制网页，也不代表你拿到了原站的品牌资产授权。
复杂页面的提取准确率取决于模型对布局的理解，不能完全依赖 AI，重要数值还得自己确认。
检查、导出说明
导出是分层的，一份文档”能不能保存”和”能不能派生出其他格式”是两件事，彼此独立。下面这张表说明不同文档状态下分别能用什么能力：
| 文档状态 | 可用能力 |
|---|---|
| 非空普通 Markdown | 保存、查看、复制、下载原始 Markdown |
| 可识别 DESIGN.md | 加上结构化编辑和预览 |
| Token 与数值通过派生检查 | 加上 tokens.json、CSS、ZIP 和交付版本 |
通过派生检查之后，能导出的格式和用途如下：
| 导出格式 | 用途 |
|---|---|
DESIGN.md | 唯一可编辑原文 |
tokens.json | DTCG Token JSON |
variables.css | CSS custom properties |
theme.css | Tailwind CSS v4 变量 |
| 文档 ZIP | DESIGN.md + 标准/原始 Token JSON + CSS |
派生的前置条件是 Token 名称和值合法，var(--token) 引用最终能解析。
通不过派生检查，CSS 导出会被锁住，但原始 Markdown 仍然能保存。
这个设计是为了避免”导出一份对不上的 CSS，还以为它是准的”。要改就改 DESIGN.md 再重新派生，不要把生成的 JSON 或 CSS 当成另一份源去手改。
云端服务
这点仓库文档写得很清楚。对只在线上用的用户，最重要的一行是：未配置云端时，应用不会自动上传草稿。 本地草稿存在你自己的浏览器（IndexedDB），刷新后可恢复。
下面这张表说明不同位置分别存什么、不存什么：
| 位置 | 保存什么 | 不保存什么 |
|---|---|---|
| 浏览器 IndexedDB | 本地工作区数据 | 服务器端永久备份 |
| Supabase Postgres | 已登录用户的所有数据 | AI API Key、ZIP 文件内容 |
| Supabase Storage | 服务端生成的 ZIP | 普通本地导出、任意附件 |
如果开启了云端同步，有几条额度上限需要知道（额度以 Supabase 当前官方说明为准）：云端草稿 75 份、设计库条目 50 个、单项 Markdown 250 KiB、账户 Markdown 合计 1 MiB、单个交付 ZIP 2 MiB。 达到上限时，本地编辑、读取、导出、删除仍然可用，只是会增加云端用量的操作被阻止。
自己部署
在线版够大多数个人用户用。如果你想要跨设备同步、私有交付版本，或者给团队部署一个独立实例，可以把项目克隆到本地自己跑。它是 Apache-2.0 开源的。
从本地启动到上线 Vercel 的完整步骤（装依赖、配 AI、接 Supabase、部署、验收），仓库也自带完整文档，在 /GUIDE 目录。
最快的本地启动只要下面几条命令，不用任何环境变量就能编辑、预览、导出：
git clone https://github.com/ricocc/ricoui-design-md.git
cd ricoui-design-md
pnpm install
pnpm 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用本地模式写一份自己的规范，跑通编辑、预览、导出。 - 想要 AI 就在浏览器里加一个 Provider，尝试 AI 功能。
- 想要跨设备同步或自建实例，可以自己部署二开。
有兴趣的话，我之后会分享一下这个产品的设计和开发流程，还有技术栈选取的心得。
我是 Rico，可以关注公众号 “Rico的设计漫想” 获得及时更新。
