rico-design-md：从任意网站提取设计系统规范

给你一个网站 URL，它能自动把颜色、排版、间距、圆角、阴影、组件状态拆解成结构化设计规范，同时输出 HTML 预览和多格式文件。这就是 rico-design-md 做的事。

rico-design-md 是 Rico 在 rico-skills 系列中开发的一个 Skill，定位是 DESIGN.md 生成器。项目目前在 GitHub 上已有 183 个 Star，地址是 github.com/ricocc/rico-skills。

它解决什么问题

当你看到一个设计不错的网站，想分析它的颜色体系、排版规则、间距系统、圆角阴影、组件状态和整体视觉语言时，常规做法是截图、吸色、主观模仿。rico-design-md 把这些信息拆解成结构化规范，同时输出 HTML 设计系统预览页和开发可用的多格式文件。

简单说：给它一个 URL，它返回一套设计系统文档。

基本用法

最常用的命令：

rico DESIGN.md [域名]

执行后默认生成两个文件：

• DESIGN.md — 完整样式参考，包含品牌声音、token、组件、Do's 和 Don'ts
• preview.html — 可视化预览页，有色板、字体刻度、间距、阴影、组件示例

Markdown 适合给开发看，HTML 适合给设计、产品、客户看。一个讲规则，一个给直觉。

按需提取

除默认输出外，支持按需生成单一格式：

rico tokens [url]          → tokens.json（DTCG 设计令牌格式）
rico variables [url]       → variables.css（可直接导入前端项目）
rico theme.css [url]       → Tailwind v4 @theme 格式
rico 全部输出 [url]        → 一次生成所有文件

结构化设计信息

重点不只是"生成文件"，而是把设计信息结构化：

• 颜色：整理成语义化 token（canvas、surface-1、ink、accent-blue），命名表达用途而非外观
• 排版：记录字体族、字号、字重、行高和字间距，避免只提取字号导致还原不完整
• 组件：记录可观察到的状态（hover、focus、active、selected）
• 阴影和圆角：保留可执行的 CSS 值，不用"轻微阴影"这类模糊描述

还有一个容易被低估的能力——格式转换。已有 DESIGN.md 可以转成 tokens.json，有 variables.css 也能反推成文档。它不只是在生成文档，也在帮不同工具之间搬运设计资产。

也可以按主题风格重构 preview 预览页的视觉和排版：

适合谁用

• 个人开发者：快速学习成熟网站的视觉语言
• 团队：减少设计还原的口头沟通成本
• AI 编程用户：先把参考网站变成明确规格，再让 Agent 按规则写页面——比"做得像 Linear 一点"靠谱太多

项目地址：github.com/ricocc/rico-skills