一个设计系统自动化工具
RicoUI(@ricouii)发布了一个新 Skill:rico-design-md。核心能力很简单:输入任意网站 URL,自动提取完整的设计系统。
能做什么
网站转设计系统
- 输入任意网站 URL
- 自动提取设计令牌(design tokens)、颜色、排版、间距、阴影和组件样式
多种输出格式
DESIGN.md— 设计系统文档preview.html— 可视化预览页面tokens.json— DTCG(Design Tokens Community Group)标准格式variables.css— CSS 变量theme.css— Tailwind v4 主题格式
格式转换
- 在任意支持的格式之间互转
- DESIGN.md → tokens.json
- variables.css → DESIGN.md
- 等等
可视化预览
- 生成独立的
preview.html页面 - 展示完整的设计系统,方便品牌参考
适用场景
- 为现有网站生成设计系统文档
- 提取设计令牌用于开发实现
- 在不同设计令牌格式之间转换
- 需要品牌设计系统的可视化参考页面
规范和灵感来源
设计规范参考了 Refero Styles——设计系统文档化的标杆项目之一。