用途:为项目生成定制化的设计系统规则,把代码库中“隐性的约定”(组件位置、命名、样式方式、设计令牌等)写成项目级指令,使 AI 编码代理在实现 Figma 设计时自动遵循团队规范,减少重复提示并保持输出一致。
主要能力:支持为不同代理写入对应规则文件——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 集成流程、项目专属约定等。
使用方式:前置条件为 Figma MCP 服务器已连接、可访问项目代码库并了解组件约定或不约定。按工作流执行:先调用 Figma MCP 服务器的 create_design_system_rules 工具,参数 clientLanguages(如 "typescript,javascript")与 clientFrameworks(如 "react"、"vue");再分析代码库的组件组织、样式方案、令牌位置与架构决策;然后按模板生成规则;最后保存到对应代理的规则文件并验证迭代。Figma 实现流程通常为:先 get_design_context 获取节点结构,若过大或截断则用 get_metadata 获取高层节点图后重新获取所需节点,再 get_screenshot 获取视觉参考,之后下载资源并开始实现,最后与 Figma 截图比对校验。
适用场景:新项目接入 Figma 设计;将 AI 代理接入已有既定模式的项目;统一团队 Figma 到代码的工作流;更新或细化既有设计系统约定。
限制:必须连接 Figma MCP 服务器;规则若过于笼统或未正确加载,代理可能不遵守,需重启代理或 IDE,并用 IMPORTANT: 前缀标注关键规则;规则冲突需人工排查与去重;规则过多会增加上下文与延迟,建议聚焦高频问题;项目演进后需定期复审更新。该资料未提供具体收费、价格与平台信息。