（3763期）AIOZ UI V3 Skills – Figma 设计稿秒转 React 代码

Figma 设计稿秒转 React 代码 Figma 设计稿一键转 AIOZ UI V3 React 代码，内置完整组件映射、变体解析与图表支持，严格遵循设计系统规范。 使用说明 AIOZ UI V3 — Figma MCP 代码映射技能 核心用法 本技能建立 Figma MCP 输出 → React 生产代码 的完整映射体系，解决设计到开发的一致性断链问题。当 Figma MCP 返回节点数据时，按以下流程转换： 组件识别：通过 name 字段匹配 Component Map（Button/Fields/Badge/Table 等 20+ 组件） 变体解析：将逗号分隔的 Key=Value 字符串转为 React props（如 Type=Primary, Size=Medium → variant="primary" size="md"） Token 查找：颜色（Onsf/Error/Default）、排版（Button/01）、图标（icon/24px/outline/wallet-01）分别查表替换 代码生成：输出带正确 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 等文档使用，确保映射准确。 原始说明 Build UI components and pages using AIOZ UI V3 design system. Use this skill whenever the user wants to create, edit, or style React components using AIOZ UI...