用途:为项目生成定制化的设计系统规则,使 Claude 在把 Figma 设计实现为代码时自动遵循团队约定、组件模式与架构决策,减少重复提示并保证输出一致。
主要能力:基于项目分析生成组件组织、样式方法、设计令牌、命名规范、导入约定、资源处理、无障碍与测试等规则;规则结构遵循 create_design_system_rules 工具返回的模板;可内嵌 Figma MCP 集成流程(get_design_context、get_metadata、get_screenshot)与资源处理规则。
必要用法:前置条件是 Figma MCP 服务器已连接可访问、能访问项目代码库。工作流为:第一步调用 create_design_system_rules 工具,参数 clientLanguages(逗号分隔语言,如 typescript,javascript)与 clientFrameworks(如 react、vue、unknown);第二步分析代码库中的组件位置、样式框架、设计令牌、命名与架构模式;第三步生成项目专属规则;第四步将规则保存到项目根目录 CLAUDE.md 的 MCP Servers 段落;第五步用简单 Figma 组件验证并迭代,随项目演进更新规则。
适用场景:新项目将使用 Figma 设计时;让 Claude 熟悉已有约定模式;统一团队 Figma 到代码的工作流;更新既有设计系统约定。
限制:必须已连接 Figma MCP 服务器;依赖用户提供并确认项目实际约定,资料未说明其他依赖、平台或价格信息;规则需自行验证、定期复审,避免冲突或过时。