extract-design-system
从任意网站提取设计系统并生成本地设计令牌文件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：extract-design-system。 它的用途是：从任意网站提取设计系统并生成本地设计令牌文件 完整的 Skill 内容见：https://321skill.com/skills/extract-design-system/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请从 https://stripe.com 提取设计系统，并为当前项目生成设计令牌文件。” AI 会调用该技能，自动分析 Stripe 官网的视觉样式，提取出颜色、字体等设计令牌，并在你的项目目录中生成可直接使用的 tokens.json 和 tokens.css 文件。
介绍
extract-design-system 是一个专为 AI 智能体（如 Claude、Cursor）打造的技能，它解决了设计师和前端开发者在构建或重构项目时，需要快速获取并复用现有网站设计规范的痛点。该技能能够自动分析任何公开网站的视觉元素，提取出颜色、字体、间距、圆角、阴影等核心设计令牌。
使用方式非常简单：在支持该技能的 AI 智能体中，只需给出类似“提取 https://stripe.com 的设计系统并为本项目生成令牌文件”的指令，技能便会自动执行。它会访问目标网站，分析其 CSS 样式，并将提取到的原始数据整理成结构化的设计令牌。
这个技能非常适合前端开发者、UI/UX 设计师以及任何需要快速搭建或借鉴成熟设计系统的项目团队。它尤其适用于项目初期风格探索、竞品设计分析，或是在需要将现有网站设计迁移到新项目中的场景。
与同类手动提取工具或浏览器插件相比，extract-design-system 的核心优势在于其与 AI 工作流的深度集成。它不是一个需要人工操作界面的独立工具，而是一个可被 AI 智能体直接调用、自动执行的“技能”，将繁琐的视觉样式提取和整理工作完全自动化，并直接输出为项目可用的标准格式文件。
核心特点
这是一个专为 AI 智能体（Agent）设计的“技能”，而非独立的 CLI 工具或浏览器插件。其核心区别在于：它被设计为可由 Claude、Cursor 等 AI 直接调用和执行，将“分析网站-提取样式-生成令牌”的完整工作流封装成一个自动化动作，无缝融入 AI 驱动的开发流程中。
注意事项
该技能仅能分析公开可访问的网站，无法处理需要登录或位于私有网络内的页面样式。
常见问题
extract-design-system 能提取哪些设计元素？
可以提取颜色、字体（家族、大小、粗细、行高）、间距、圆角半径和阴影效果。
它生成什么格式的文件？
会生成 W3C 兼容的 tokens.json 和包含 CSS 自定义属性的 tokens.css 文件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/extract-design-system/raw/index.md 读取 extract-design-system 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/extract-design-system/raw/index.md（查看排版版本）