AIOZ UI V3 — Figma MCP 代码映射技能
核心用法
本技能建立 Figma MCP 输出 → React 生产代码 的完整映射体系，解决设计到开发的一致性断链问题。当 Figma MCP 返回节点数据时，按以下流程转换：
1. 组件识别：通过 name 字段匹配 Component Map（Button/Fields/Badge/Table 等 20+ 组件）
2. 变体解析：将逗号分隔的 Key=Value 字符串转为 React props（如 Type=Primary, Size=Medium → variant="primary" size="md"）
3. Token 查找：颜色（Onsf/Error/Default）、排版（Button/01）、图标（icon/24px/outline/wallet-01）分别查表替换
4. 代码生成：输出带正确 import 路径的 TypeScript/React 代码
显著优点
- 零猜测：所有 token、class、组件名均有可查映射表，杜绝硬编码
- 双轨导入：清晰区分
@aioz-ui/core/components（图表）与@aioz-ui/core-v3/components（UI 组件） - 图标规范：强制
@aioz-ui/icon-react+ PascalCase + "Icon" 后缀，统一 16/20/24px 规格 - 原子排版：
text-title-01等类名已封装 size/weight/line-height/font-family，禁止叠加工具类 - On-surface 规则：
bg-sf-*背景必须搭配对应text-onsf-text-*前景色，确保可访问性
潜在局限
- 依赖 Figma MCP 输出质量：若设计稿图层命名不规范或变量未绑定，映射会失效
- 图表分离：LineChart/AreaChart/BarChart/DonutChart 需单独 import，不能与 UI 组件混用
- 状态隐式处理：Hover/Focus/Pressed 状态由 CSS 驱动，Figma 中的 State 变体在代码层无显式 props
- 扩展成本：新增组件需同步更新 Component Map 与 references/*.md 文档
适合人群
- 使用 AIOZ UI V3 设计系统的前端开发者
- 需将 Figma 设计稿快速转为可交付 React 代码的工程师
- 维护 Design Token 一致性的设计与开发协作团队
常规风险
| 风险点 | 说明 |
|--------|------|
| Token 漂移 | 设计稿变量更新后未及时同步 references/*.md，导致代码与设计不符 |
| 路径混淆 | 误将图表组件从 `-v3` 导入，或 UI 组件从 `core` 导入，引发运行时错误 |
| 样式覆盖 | 在原子排版类上叠加 `font-medium` 等工具类，破坏设计系统约束 |
| 图标来源 | 使用 SVG 字面量或第三方图标库，偏离品牌视觉规范 |
| 图表数据 | 未提供 `categories` 与 `overwriteCategories`，导致图表渲染异常 |
建议配合 references/colors.md、references/typography.md、references/icons.md 等文档使用，确保映射准确。