design-system-skill
从任意设计素材一键生成完整设计系统文档
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-system-skill。 它的用途是：从任意设计素材一键生成完整设计系统文档 完整的 Skill 内容见：https://321skill.com/skills/design-system-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请分析这个网站链接 https://example.com 和附件的品牌指南PDF，为我生成一套设计系统文档。’ 它会自动抓取网站样式，解析PDF中的品牌信息，然后在你指定的文件夹中生成包含设计令牌、组件规范和设计指南的三个Markdown文件，为你后续的开发和设计协作提供清晰的规范基础。
介绍
设计系统生成器（Design System Generator）解决了设计师、前端工程师和产品经理在构建和维护统一设计语言时，面临文档分散、标准不一、手动整理耗时耗力的核心痛点。它能够分析用户提供的任何形式的设计参考——无论是图片、PDF、链接、文本描述还是现有代码（如CSS、Tailwind配置），并自动生成一套结构化的三文件设计系统文档。
使用方式非常直观：用户只需将设计素材（如UI截图、品牌指南PDF、设计系统网站链接或代码文件）提供给AI，它便会调用相关工具（如WebFetch）获取内容，并在用户指定的工作目录中生成三个Markdown文件。整个过程无需复杂的配置，输入即输出。
这个Skill非常适合需要快速从零搭建设计系统、统一团队设计规范、或为现有项目（尤其是遗留项目）梳理和文档化设计资产的中小型团队、独立开发者和设计系统初学者。它降低了设计系统创建的门槛，将繁琐的整理工作自动化。
与同类设计工具或代码生成器相比，它的核心优势在于输入源的极度灵活性。它不依赖于特定设计工具（如Figma）的插件或API，而是能“消化”任何你能提供的、与设计相关的数字材料，并将其转化为标准化的设计令牌、组件规范和指南文档，实现了从“混乱素材”到“有序系统”的智能转换。
核心特点
核心区别在于其输入源的“万物皆可分析”能力：不仅能解析Figma等专业工具的输出，更能直接处理截图、PDF、网站链接甚至代码片段，无需依赖特定平台的API或插件，适应性极强。
注意事项
不适合需要高度定制化、复杂交互逻辑或动态主题（如实时主题切换）的成熟、大型设计系统的深度生成与维护。
常见问题
它能从Figma文件生成设计系统吗？
可以，但需要你将Figma文件导出为图片或PDF，或提供其公开分享链接作为输入。
生成的文档可以直接用于开发吗？
生成的Markdown文档提供了完整的设计令牌（颜色、字体、间距等）和组件规范，是开发的重要参考，但通常需要手动或通过脚本将其转换为实际的代码变量或主题配置。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-system-skill/raw/index.md 读取 design-system-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-system-skill/raw/index.md（查看排版版本）