用途：把 Figma 应用界面翻译为使用 Ignite UI for Angular 构建的生产级 Angular 应用。设计来源分三类：A 级为 Infragistics Indigo.Design UI 套件（Material、Fluent、Bootstrap、Indigo 变体，明暗主题），按套件图层名直接映射；B 级为其他组件库（Material 3、Fluent 2、Bootstrap、shadcn/ui、Untitled UI、Ant 及内部设计系统），先归一化变体属性再映射；C 级为普通 frame、group 与分离实例，依据结构与视觉推断角色，置信度较低需用户确认。同一文件常混合多类，组件逐个分类。
主要能力：编排四个 MCP 服务——Figma（设计数据）、Ignite UI CLI（组件文档）、Ignite UI Theming（样式）、Playwright（视觉验证）。工作流分阶段：阶段 0 校验四个 MCP 服务并检测或脚手架 Angular 项目；阶段 1 探索 Figma 设计，发现页面与画板、截图、提取设计上下文与变量、分类组件来源、构建组件与布局表、导出图片资源；阶段 2 通过 list_components 与 get_doc 查询精确选择器、输入输出与用法，无文档时读取参考文件并用 search_api；阶段 3 生成 Sass 主题，Path A 依据 Indigo.Design 套件变量，Path B 依据颜色普查与测量值选择最接近的基线；阶段 4 按布局、导航、主内容、次要内容、数据顺序实现，使用独立组件、CSS Grid、SCSS 主题类与类型化模拟数据；阶段 5 用 Playwright 按画板尺寸调整视口并做测量驱动的视觉比对。
使用方式：需先配置四个 MCP 服务，可用 npx -y igniteui-cli ai-config 配置 CLI 与主题服务，Figma 服务需用户在桌面应用启用或通过 OAuth 登录，Playwright 条目需自行添加，配置后需重载编辑器。项目检测依据 package.json 中的 igniteui-angular 或 @infragistics/igniteui-angular 及 src/app/ 目录，无项目时可用 npx -y igniteui-cli new 脚手架。
限制：不得凭记忆生成组件代码，选择器、输入名与导入路径必须来自文档或参考文件；Figma 调用受席位配额限制，View/Collab 席位每月约 6 次调用，可能不足以覆盖一个画板；figma_get_design_context 返回 React + Tailwind 代码，仅供阅读，不得复制到 Angular 文件，也不得使用其 localhost 图片 URL 作为最终资源；B、C 级组件的结构差异需记录并请用户确认；新增包需先获批准；仅实现画板中出现的控件。