Design System Analyzer
集成MCP服务，自动化生成和管理设计系统令牌的工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Design System Analyzer。 它的用途是：集成MCP服务，自动化生成和管理设计系统令牌的工具 完整的 Skill 内容见：https://321skill.com/skills/design-system-analyzer/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请分析当前Figma设计稿中的颜色和字体样式，并为我生成一套用于React项目的CSS设计令牌变量。”，它会连接MCP服务，读取你的设计文件，提取关键设计变量，并输出一份结构清晰的CSS变量文件，你可以直接复制到项目中。或者，你可以说：“检查一下我们项目代码中实际使用的令牌和设计规范中的令牌有哪些不一致？”，它会生成一份差异分析报告。
介绍
Design System Analyzer 是一款专注于设计系统（Design System）的MCP（Model Context Protocol）服务集成工具。它主要解决设计师与前端开发者在协作中，设计令牌（Design Tokens）手动创建、同步和维护效率低下的问题。通过将设计系统规范与代码实现连接起来，该工具能够自动化地生成、管理和应用设计令牌，减少人工错误，提升团队协作效率。
使用方式是通过配置MCP服务器，将工具集成到你的开发或设计工作流中。它能够读取设计文件（如Figma）或设计系统文档，自动提取颜色、字体、间距等设计变量，并将其转换为可供代码直接引用的令牌（如CSS变量、Sass变量、JS常量等）。整个过程可以在CI/CD流程中自动化运行。
该工具非常适合需要建立或维护统一设计系统的产品团队，特别是UI设计师、前端开发者和全栈开发者。对于正在从零搭建设计系统，或希望将现有分散的设计规范进行标准化和代码化的团队尤为有用。
使用建议是，在集成前确保你的设计源文件（如Figma）已具备良好的图层结构和命名规范，这将极大提升令牌生成的准确性和可用性。同时，建议将生成的令牌文件纳入版本控制系统，并与团队的设计评审和代码审查流程结合，以确保变更的可控性。
核心特点
与单纯的设计令牌导出工具不同，它深度集成了MCP协议，能够作为服务持续运行并与多种AI助手或开发工具对话，实现动态的令牌分析和生成；同时，它不仅生成令牌，还支持对现有设计系统的令牌使用情况进行分析和审计，帮助发现不一致或未使用的令牌。
注意事项
不适合仅需要一次性导出静态设计令牌，或设计源文件结构混乱、命名不规范的项目。
常见问题
这个工具支持从哪些设计工具导入数据？
主要通过Figma API，也支持导入符合特定格式（如JSON）的设计系统文档。
生成的令牌可以直接用在哪些技术栈中？
支持生成CSS自定义属性、Sass变量、Less变量、JavaScript/TypeScript常量等，适配主流前端框架。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-system-analyzer/raw/index.md 读取 Design System Analyzer 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-system-analyzer/raw/index.md（查看排版版本）