（3331期）AIOZ UI Skills – Figma设计稿秒转生产代码

Figma设计稿秒转生产代码 将Figma设计稿自动转换为AIOZ UI V3生产级React代码，严格遵循设计令牌与组件规范 使用说明 核心用法 AIOZ UI V3 Skill 是专为 Figma MCP → React 代码 翻译场景设计的开发辅助工具。核心工作流程包括： 解析Figma MCP输出：接收带有斜杠分隔符的令牌（如 Onsf/Error/Default、Button/01），通过查表映射为对应的设计系统资源 组件智能映射：根据Figma节点名称（如 Button/Primary、Fields/Default）自动匹配 @aioz-ui/core-v3/components 中的React组件 变体转Props：将Figma变体字符串（Type=Primary, Size=Medium）转换为React组件props（variant="primary" size="md"） 严格导入管控：区分三大导入路径——图表组件走 @aioz-ui/core/components，UI组件走 @aioz-ui/core-v3/components，图标统一使用 @aioz-ui/icon-react 显著优点 零猜测开发：所有令牌、类名、导入路径均通过查表确定，杜绝凭直觉编写 设计一致性保障：强制使用 text-content-sec、bg-sf-screen 等语义化令牌，禁止裸写 text-gray-500 Figma到代码无缝衔接：直接消费Figma MCP的原生输出格式，无需人工转换 完整的组件覆盖：涵盖Button、Input、Badge、Table、Dialog、DatePicker等20+核心组件 图表专项支持：内置LineChart、AreaChart、BarChart、DonutChart的专用导入路径和封装规范 潜在局限性与风险 版本锁定依赖：严格绑定AIOZ UI V3特定版本，若设计系统升级可能导致映射表失效 Figma MCP依赖：输出质量完全取决于Figma MCP工具的解析准确度，复杂嵌套结构可能识别偏差 Tailwind耦合：深度依赖Tailwind CSS框架，非Tailwind项目无法直接使用 令牌学习成本：开发者需熟悉 --sf-neu-block、--text-neu-bold 等专有命名体系 图表路径陷阱：图表与普通组件分属不同包，极易误导入导致运行时错误 适合人群 使用AIOZ UI V3设计系统的React前端开发团队 需要快速将Figma设计稿转化为可交付代码的工程师 追求设计-开发严格一致性的中后台产品团队 熟悉Tailwind CSS且愿意遵循令牌优先规范的开发者 常规风险提示 切勿混用导入路径：@aioz-ui/core/components 与 @aioz-ui/core-v3/components 不可混用，图表组件是唯一例外 图标命名规范：必须使用PascalCase + "Icon"后缀（如 Search01Icon），禁止直接使用SVG或emoji 状态委托CSS：State=Hover/Focused/Pressed 等变体不生成props，由CSS伪类处理，避免在React中手动管理 Typography原子性：text-body-02 等类已封装完整字体属性，禁止叠加额外font-size或font-weight工具类 原始说明 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...