用途：该技能借助 Figma 的 MCP（Model Context Protocol）服务器直接读取 Figma 文件中的结构化设计数据，实现设计稿到代码的转换。相比截图方式，它能获取每个元素的语义信息，包括精确间距、颜色、字体、组件层级和设计系统令牌，从而生成更准确的代码。
触发场景：用户提供 Figma 链接（文件链接或带 node-id 的帧选择链接）、要求把设计实现为代码、要求提取设计令牌/变量/设计系统值，或希望让现有代码与 Figma 设计保持一致时使用。
主要能力：可用的 MCP 工具包括 get_figma_data（获取文件或指定帧的完整设计数据）、get_figma_variables（提取颜色、间距、字体等设计令牌）、get_figma_components（获取组件定义与实例）、get_figma_styles（获取文本、颜色、效果样式）。工作流为：识别链接类型并确认 MCP 服务器可用，用 get_figma_data 拉取指定帧或节点的数据，分析组件层级、布局方式（auto-layout 对应 Flexbox、约束对应响应式行为）与设计系统值，再生成语义化 HTML 与组件化代码，最后校验间距、颜色、布局是否与设计一致。
使用方式：需先配置 Figma MCP 服务器，技能内提供 references/setup-guide.md 说明官方与社区方案的配置方法，references/best-practices.md 提供扩展最佳实践与示例。常见模式包括落地页实现、带变体的组件实现、设计系统令牌提取。
限制与注意：需确保 Figma 文件有访问权限且 URL 中的 node-id 正确；官方服务器可能需要 Figma 的 Dev Mode 权限；若子节点数据有限可尝试获取父帧。资料未提供具体收费、价格与平台支持范围，暂未提供。