用途:为项目生成量身定制的设计系统规则,把代码库中的隐性约定(组件位置、命名、样式与令牌用法、架构模式)固化为项目级指令,使 Claude 在实现 Figma 设计时自动保持一致输出,减少重复提示。需先连接并访问 Figma MCP 服务器,并具备项目代码库访问权限。
主要能力:运行 Figma MCP 服务器的 create_design_system_rules 工具获取模板与指导;分析代码库的组件组织、样式方式、设计令牌、组件模式与架构决策;生成通用组件规则、样式规则、Figma MCP 集成规则、资源处理规则与项目特定约定;并可扩展至可访问性、性能、测试等可选规则。
使用方式:按顺序执行——先调用 create_design_system_rules(参数 clientLanguages 如 "typescript,javascript"、clientFrameworks 如 "react"),再分析代码库,随后生成规则并保存到项目根目录的 CLAUDE.md 中(Figma MCP 服务器规则段落),最后用简单组件验证并迭代。实现 Figma 设计时流程为:先运行 get_design_context 获取节点结构化表示,过大时用 get_metadata 获取节点映射后再重新获取所需节点,再运行 get_screenshot 获取视觉参考,下载所需资源后开始实现,并转换为项目约定与框架,完成后与 Figma 做 1:1 校验。
适用场景:新项目启用 Figma 设计;将 Claude 接入已有约定项目;统一团队 Figma 转代码工作流;更新或细化既有设计系统约定。
限制:依赖 Figma MCP 服务器连接与代码库访问;规则需保存到正确配置文件并重载;规则应具体、可执行,关键规则用 IMPORTANT 前缀;规则过多会增大上下文并拖慢处理;规则需随项目演进定期评审与更新。具体收费、价格与平台信息暂未提供。