SOTA Sync
全部文章
AI 编程2026-05-14

rico-design-md:一键把任意网站转成设计系统文档

RicoUI 发布新 Skill:输入任意网站 URL,自动提取设计令牌、颜色、排版、间距、阴影和组件样式,输出 DESIGN.md、tokens.json、variables.css、theme.css 等多种格式。

#一个设计系统自动化工具

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 ——设计系统文档化的标杆项目之一。

Skill 地址:https://github.com/ricocc/rico-skills/