在网页设计、前端开发的日常工作中，相信很多从业者都有过这样的困扰：遇到设计风格出色的网站，想要借鉴其配色、字体、布局与组件样式，只能手动查看网页源码，逐一提取色值、记录排版规则、整理间距和阴影参数。整个过程不仅步骤繁琐、耗费大量时间，还容易出现参数遗漏、数值录入错误等问题，极大降低了工作效率。今天就为大家分享一款实用的 AI Agent 技能 ——rico-design-md，它可以轻松破解这一难题，实现网站样式全自动解析与设计系统文档生成。
rico-design-md 是一款专为设计与前端场景打造的 AI Skill，核心能力是将任意在线网站自动转换为标准化的设计系统文档，同时支持各类主流设计文件格式互相转换，完美适配设计师、前端工程师的日常工作流。该技能的开源项目托管于 GitHub 平台（https://github.com/ricocc/rico-skills），目前该境外网页暂时无法访问，但并不会影响技能的正常安装与使用。
一、核心功能
这款技能功能定位清晰，围绕网站样式解析、设计文档产出打造了多项实用能力，全方位覆盖设计系统搭建的各类需求：
网站转标准设计系统
仅需输入目标网站的 URL，技能便会自动对页面进行深度解析，完整提取网站内的全套设计令牌，包含色彩搭配、字体样式、文字排版规则、元素间距、阴影效果以及各类界面组件样式，一站式还原整套设计体系，彻底替代人工扒取源码的操作。
多类型文件输出
解析完成后，可根据工作需求灵活生成多种格式文件，分别是规范的DESIGN.md设计文档、可独立打开浏览的preview.html可视化预览页、遵循 DTCG 规范的tokens.json设计令牌文件、通用样式变量文件variables.css，以及适配 Tailwind v4 框架的theme.css主题文件，兼顾文档归档、样式复用、框架开发等多元场景。
跨格式自由转换
除了正向解析网站生成文件外，rico-design-md 还支持各类设计文件之间互相转换。无论是将DESIGN.md文档转为tokens.json，还是在variables.css、theme.css等样式文件之间切换格式，都能快速完成转换，轻松适配不同技术栈、不同团队的文件使用规范。
可视化预览展示
配套生成的preview.html页面无需复杂运行环境，双击即可打开，能够直观呈现整套设计系统的视觉效果。在团队协作、方案沟通时，可直接分享该页面，让所有成员统一参考标准，提升协作效率。
二、简易安装方法
rico-design-md 的安装过程十分简单，无需复杂的环境配置、代码部署，依托 AI Agent 即可一键完成，也是官方最推荐的安装方式。
你只需向所使用的 AI Agent 发送指定指令：安装 rico-design-md skill。 github 地址：https://github.com/ricocc/rico-skills/tree/main。发送指令后等待片刻，Agent 会自动完成技能部署，安装结束后就能直接启用全部功能。
三、详细使用教程
该技能兼顾专业用户与新手用户，提供显式命令和自然语言两种使用模式，同时支持存量文件的格式转换，操作灵活多变。
（一）显式命令调用（适合专业开发者）
熟悉指令的从业者可以直接输入精准命令，按需产出对应文件，操作高效且指向性明确：
生成完整设计文档与预览页面
指令：rico DESIGN.md https://linear.app
作用：全面解析目标网站，同步输出DESIGN.md设计文档和preview.html预览页，适合需要完整归档整套设计体系的场景。
单独提取设计令牌
指令：rico tokens https://stripe.com
作用：仅抓取网站核心设计令牌并生成tokens.json文件，满足仅需配色、基础样式参数的轻量化使用需求。
生成通用 CSS 变量文件
指令：rico variables https://vercel.com
作用：将网站样式转化为通用 CSS 变量文件，前端开发者可直接将文件引入项目，快速复用目标网站的样式。
生成 Tailwind v4 主题文件
指令：rico theme.css https://linear.app
作用：专门适配 Tailwind v4 开发框架，一键生成配套主题文件，大幅提升基于该框架的二次开发效率。
全格式批量输出
指令：rico 全部输出 https://linear.app
作用：一次性生成技能支持的所有格式文件，一份解析结果满足多种使用需求。
（二）自然语言调用（零基础用户首选）
即便不熟悉专业指令，也可以使用日常口语下达任务，AI Agent 会自动识别需求并执行操作，上手门槛极低。
示例指令参考：
为 linear.app 创建 DESIGN.md 文档
提取 stripe.com 的设计令牌
分析 GitHub 官网的设计系统
（三）文件格式转换用法
针对已有的设计文件，可通过指令完成格式互转，适配后续工作场景。
示例指令：rico 把 DESIGN.md 转为 tokens，执行后系统会快速将设计文档转换为设计令牌文件，轻松解决格式不兼容问题。
四、主流适用场景
结合功能特性，rico-design-md 可深度融入网页设计与前端开发的多个工作环节，实用性拉满：
存量网站设计归档：针对已上线的正式网站，快速梳理并制作标准化设计系统文档，完善项目资料库，方便网站后续迭代、维护与交接。
优秀样式借鉴复用：参考行业内标杆网站的设计风格，提取其设计令牌与样式参数，运用到新项目的 UI 设计和前端开发中。
跨团队格式流转：在不同技术团队、不同开发框架之间传递设计文件时，快速完成格式转换，消除文件兼容障碍。
制作可视化参考资料：利用preview.html预览页面，制作统一的设计参考范本，用于内部培训、项目评审、对外方案沟通等场景。
五、补充说明
rico-design-md 能够完美融入 “参考网站风格 — 拆解设计元素 — 落地前端开发” 的完整工作流，有效减少重复机械劳动。需要注意的是，该工具定位为效率辅助工具，核心作用是自动化整理基础设计参数与文件，无法替代设计师的创意构思、审美判断以及细节优化工作。大家在使用解析结果时，还需要结合项目定位、业务需求进行人工调整与打磨。
总结
对于 UI 设计师、前端开发人员而言，rico-design-md 是一款不可多得的提效 AI 技能。它彻底摆脱了手动扒取网站样式的低效模式，凭借自动解析、多格式输出、灵活转译、可视化预览等能力，简化了设计系统的搭建流程。同时它安装简单、操作灵活，无论是专业技术人员还是零基础从业者都能快速上手。即便对应的 GitHub 开源仓库暂时无法访问，也不会影响技能的正常使用。如果你的日常工作经常需要解析网站样式、制作设计文档，不妨尝试这款技能，让繁琐工作一键搞定。
