该技能面向将 Figma 应用界面翻译为 Ignite UI Web Components 应用的场景，按固定阶段顺序执行，不允许凭记忆生成组件代码。
用途与设计来源分级：技能把设计来源分为三级。Tier A 为 Infragistics Indigo.Design UI 套件（Material、Fluent、Bootstrap、Indigo 变体及明暗主题），可按套件图层名直接映射，保真度最高、工作量最小。Tier B 为其他组件库，包括 Material 3、Fluent 2、Bootstrap、shadcn/ui、Untitled UI、Ant 及内部设计系统，技能先把变体属性归一化为规范角色，再按角色映射，并将主题适配到最接近的基线设计系统。Tier C 为普通画框、分组和分离实例，技能从结构与视觉推断角色，置信度较低，需用户确认。同一文件可能混合多种来源，需逐个组件分类。
主要能力：包括项目检测或脚手架、Figma 页面与画板发现、参考截图采集、设计上下文与设计变量提取、组件来源判定、组件映射表生成、图片资源提取（零占位符策略）、组件文档与 API 查询、功能文档检索、主题与调色板生成、逐组件令牌映射、图表系列颜色校验、按章节实现视图与验证。
使用方式：需先确认 Figma、Ignite UI CLI、Ignite UI Theming、Playwright 四个 MCP 服务器连接可用；igniteui-cli 与 igniteui-theming 可通过 npx -y igniteui-cli ai-config 配置；Figma 服务器需用户在 Figma 桌面应用启用桌面服务器并通过 OAuth 登录远程服务器。随后按阶段读取对应参考文件并执行。组件标签、属性、插槽和导入路径必须来自 get_doc 或 get_api_reference 结果，文档名不等于标签名，不可猜测。
适用场景与限制：适用于把 Figma 设计落地为 Ignite UI Web Components 视图，尤其是含网格、图表等复杂组件的界面。需注意 Web Components 与 Angular 共享套件但实现不同，标签为 igc-*，需用 defineComponents(...) 注册；主题以 CSS 自定义属性为主，Sass 可选；所有组件渲染在 shadow DOM 中，影响样式与测量方式。Figma MCP 调用受席位配额限制，View/Collab 席位每月 6 次（Starter 为 20 次），可能不足以覆盖一个画板。figma_get_design_context 返回的 React + Tailwind 代码仅作参考，不得复制进项目。igniteui-webcomponents 为 MIT 许可，网格、图表和 dock manager 为试用或 @infragistics 许可包。对于结构差异（anatomy delta），需记录并由用户批准；已有结构差异的 Ignite UI 交互组件仍优于手写标记。