用途:为项目生成定制化的设计系统规则,把代码库中约定俗成的组件位置、命名、样式与设计令牌等“隐性知识”写成项目级规则,使 AI 编程代理在实现 Figma 设计时自动遵循团队规范。
主要能力:调用 Figma MCP 服务器的 create_design_system_rules 工具获取基础提示与模板;分析代码库的组件组织、样式方案、令牌位置、组件模式与架构决策;生成通用组件规则、样式规则、Figma MCP 集成规则、资源处理规则与项目专属约定;并按所用代理保存到对应规则文件。
支持的文件:Claude Code 为项目根目录 CLAUDE.md(也可用 .claude/rules/figma-design-system.md);Codex CLI 为 AGENTS.md(追加为新章节,合并大小上限 32 KiB);Cursor 为 .cursor/rules/figma-design-system.mdc(含 YAML frontmatter,如 description、globs、alwaysApply)。
必要用法:先运行 Figma MCP 的 create_design_system_rules 工具,参数 clientLanguages 为项目语言逗号列表(如 "typescript,javascript"),clientFrameworks 为框架(如 "react"、"vue"、"svelte"、"angular"、"unknown")。再分析代码库,最后按代理写入相应规则文件并验证迭代。Figma 实现流程要求先 get_design_context 获取节点结构,过大时改用 get_metadata 再按需重取,随后 get_screenshot 获取视觉参考,二者齐备后再下载资源并实现;输出通常为 React + Tailwind,需转译成项目约定。
适用场景:新项目引入 Figma 设计、让代理加入已有规范的项目、统一团队 Figma 转代码流程、更新既有设计系统约定。
限制:需先连接并可访问 Figma MCP 服务器,需能分析项目代码库;规则名称、路径、令牌位置等占位内容须按实际项目填写,资料未提供具体项目取值与收费信息;规则过多会增加上下文与延迟,需定期维护。