返回 FEED
AGENT2026-05-14

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

一个设计系统自动化工具

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/