用途
figma-designer 用于把 Figma 设计稿分析成可直接用于实现的设计证据、设计令牌、组件规格与交互状态，供后续规划或开发交接使用。它定位为视觉事实的提供者：产品需求与技术 PRD 方法论由 prd-planner 负责，本技能只提供视觉事实和尚未解决的设计缺口。
主要能力
- 读取 Figma 文件或页面元数据、选中节点或节点详情，以及可用的组件与样式信息。
- 提取设计令牌，包括颜色（主色、辅助色、中性色、语义色）、排版（字体族、字号、字重、行高、字距）、间距（尺度与具体值）、边框（圆角、宽度）、阴影等。
- 分析组件层级：帧/页面、组件实例、文本图层；对每个组件提取属性（尺寸、变体、状态）、布局（方向、对齐、间距、内边距）、样式（填充、描边、效果）、内容（文本、图标、图片）与约束（响应式行为）。
- 生成视觉规格：按屏幕输出布局结构、颜色表、排版表、间距表、组件规格（含 TypeScript 接口示例）、约束与响应式行为表、交互状态表。
- 输出格式：默认生成视觉规格文档（如 docs/{feature}-design-spec.md）；也可生成 PRD 证据包，包含屏幕意图、设计令牌、组件状态、响应式规则、无障碍观察与待确认的产品问题。
- 提供设计审查清单，检查屏幕是否齐全、令牌是否提取、组件变体是否记录、响应式行为是否明确、交互状态是否定义、无障碍（WCAG）是否考虑（对比度 ≥ 4.5:1、触控目标 ≥ 44x44px、焦点指示可见）。
- 提供帧分析模板与开发交接模板，便于整理设计文件、令牌文件、组件库与资源。
使用方式
该技能在以下情况激活：提供 Figma 链接（https://www.figma.com/file/...）、上传设计截图并提到“Figma”、说“分析这个设计”或“提取设计规格”、要求“从 Figma 创建 PRD”。
使用前需确保宿主暴露 Figma MCP 服务器或插件。工具名称因宿主和插件版本而异，应在当前会话中检查可用的 Figma 工具，而不是假定固定名称。所需能力包括：读取文件或页面元数据、读取选中节点或节点详情、在可用时读取组件与样式信息。
工作流分为四个阶段：
- 获取设计数据：从 Figma URL 或文件 Key 提取文件 Key，调用可用的 Figma 元数据工具与节点/详情工具，解析帧、组件与文本节点。
- 提取设计令牌：建立完整的设计令牌清单。
- 分析组件层级：按文件 → 帧（页面/屏幕）→ 组件实例/文本图层逐层分析。
- 生成视觉规格：按模板输出每个屏幕的布局结构、设计规格、组件规格、约束与响应式行为、交互状态。
适用场景
- 设计到开发的交接：把 Figma 设计整理成实现就绪的规格。
- 为 PRD 提供视觉证据：向 prd-planner 提供屏幕意图、令牌、组件状态、响应式规则、无障碍观察与待确认问题。
- 典型工作流：Figma URL → figma-designer → 视觉规格 → prd-planner → PRD → 实现 → 代码 → code-reviewer → 质量检查。
限制
- 依赖宿主提供 Figma MCP 服务器或插件；工具名称不固定，需在当前会话中确认。
- 只提供视觉事实与未解决的设计缺口，不负责产品需求，也不应从视觉设计臆造业务需求。
- 资料未提供具体收费、价格、平台支持范围或效果保证等信息。
- 最佳实践要求：提取关键尺寸的精确像素值；记录组件变体与状态；包含响应式断点；注明平台差异（iOS 与 Android）；包含无障碍考虑；将设计令牌导出为常量。避免：四舍五入间距值（使用精确的 4px/8px/12px）；忽略悬停/焦点状态；跳过约束行为；忘记空状态；遗漏加载状态；未经核实假定平台默认值。