figma_validation

# 使用 MCP 进行 Figma 设计验证 使用 Figma MCP 根据 Figma 设计验证 UI 实现的指南。 --- ## 前提条件 **必需：** - 已配置 Figma MCP 服务器 - 拥有 Figma 设计文件的访问权限 - 组件/页面的 Figma URL **设置：** bash # 安装 Figma MCP（遵循官方文档） # 配置 API 令牌 # 验证对设计文件的访问权限 --- ## 验证工作流 ### 第 1 步：获取设计规范 **使用 Figma MCP：** "Get the specifications for the primary button from Figma file at [URL]" 响应包括： - 尺寸（宽、高） - 颜色（背景、文本、边框） - 排版（字体、大小、字重） - 间距（内边距、外边距） - 边框圆角 - 状态（默认、悬停、激活、禁用） ### 第 2 步：检查实现 **浏览器开发者工具：** 1. 检查元素 2. 查看计算样式 3. 验证尺寸 4. 比较颜色（使用取色器） 5. 检查排版 6. 测试交互状态 ### 第 3 步：记录差异 **创建测试用例或 Bug：** TC-UI-001: 主按钮视觉验证 设计 (Figma): - 尺寸: 120x40px - 背景: #0066FF - 边框圆角: 8px - 字体: 16px Medium #FFFFFF 实现: - 尺寸: 120x40px ✓ - 背景: #0052CC ✗ (色调错误) - 边框圆角: 8px ✓ - 字体: 16px Regular #FFFFFF ✗ (字重错误) 状态: 失败 Bug: BUG-234, BUG-235 --- ## 验证内容 ### 布局与间距 - [ ] 组件尺寸 - [ ] 内边距（所有侧面） - [ ] 外边距 - [ ] 网格对齐 - [ ] 响应式断点 - [ ] 容器最大宽度 **示例查询：** "Extract spacing values for the card component from Figma" ### 排版 - [ ] 字体族 - [ ] 字号 - [ ] 字重 - [ ] 行高 - [ ] 字间距 - [ ] 文本颜色 - [ ] 文本对齐 **示例查询：** "Get typography specifications for all heading levels from Figma design system" ### 颜色 - [ ] 背景色 - [ ] 文本颜色 - [ ] 边框颜色 - [ ] 阴影颜色 - [ ] 渐变值 - [ ] 透明度值 **示例查询：** "List all color tokens used in the navigation component" ### 组件 - [ ] 图标大小和颜色 - [ ] 按钮状态 - [ ] 输入框样式 - [ ] 复选框/单选框外观 - [ ] 下拉菜单样式 - [ ] 卡片组件 **示例查询：** "Compare the implemented dropdown menu with Figma design at [URL]" ### 交互状态 - [ ] 默认状态 - [ ] 悬停状态 - [ ] 激活/按下状态 - [ ] 聚焦状态 - [ ] 禁用状态