用途：把设计图（截图、原型、线框图）转成使用 Ignite UI for React 组件与生成主题令牌的 React 视图。仅限 React，每次 MCP 调用需传 platform: 'react' / framework: 'react'。
工作顺序：读图，识别每个区域、组件与布局结构；检查应用现有主题导入、设计系统、调色板覆盖与已装包；写代码前先用 get_doc、get_api_reference 查所选组件；主题先做全局层（仅当应用没有自定义主题），再做逐组件令牌；实现布局、模拟数据与视图；最后构建、运行、与图对比并迭代。第 3、4 步使用 MCP 服务器（可选）；没有时可读 node_modules/igniteui-webcomponents/components/<name>/ 下的 .d.ts 获取 props、@slot、@csspart、@cssproperty，并按 igniteui-react-customize-theme 的调色板色阶做主题。
读图：逐区域记录布局角色与比例、组件类型、颜色、字号层级、边框/圆角/阴影、数据形态与间距节奏；用 CSS Grid 行列还原比例，先做桌面比例再加堆叠规则。编码前简述每个区域选用的组件、回退为纯 HTML 的区域及原因、主题策略、所需包与假设。每个区域优先用 Ignite UI 组件，仅当 DOM 结构在 CSS 覆盖与 ::part() 后仍不兼容时才回退语义 HTML 并加注释。组件选择见 COMPONENTS.md，可用 list_components({ framework: 'react', filter: '<narrow term>' }) 发现，过滤词要窄。常见判断：顶栏用 IgrNavbar，侧栏用 IgrNavDrawer（open/mini 匹配固定、可折叠或纯图标），真正表格才用 IgrGridLite 或 IgrGrid，标签与状态用 IgrChip，OHLC 用 IgrFinancialChart，普通趋势用 IgrCategoryChart，需逐系列或逐轴控制才用 IgrDataChart。
检查应用：查看 main.tsx、index.tsx、App.tsx、app/layout.tsx 与共享 CSS 中的主题导入、网格主题导入及调色板或语义变量覆盖。已有自定义主题则不再生成全局主题或调色板，直接做逐组件覆盖；仅有原版主题导入则保留并加最小覆盖层；没有主题导入则先加一个。
包：核心组件在 igniteui-react；Grid Lite 另需 igniteui-grid-lite；高级网格、图表、地图、仪表为独立包，授权工作区可能带 @infragistics/ 作用域。按已装 Ignite UI 版本解析版本，只装所选组件需要的包，改依赖前先询问。图表、仪表、地图需 .register()，其余不需要。
主题：全局层仅在应用无自定义主题时做，先读 read_resource({ uri: 'theming://guidance/colors/rules' }) 再取色，按工作区、用户要求、最接近视觉匹配的顺序解析设计系统，用 create_theme({ primaryColor, secondaryColor, surfaceColor, variant, designSystem, fontFamily, platform: 'react' }) 生成，处理亮度警告；小配色系统用 create_palette，多表面深度或强调色族用 create_custom_palette。逐组件令牌始终执行：先 get_component_design_tokens({ component }) 读真实令牌名，再对照图中该区域取值，用 create_component_theme({ component, tokens, selector, platform: 'react' }) 只生成与全局主题不同的令牌，并用作用域包裹加 igc-* 选择器或 ::part() 应用。图表、地图、仪表、迷你图不是 igc-* 元素、无设计令牌，通过 props 样式化；自定义 HTML 区域同样跳过。有调色板后颜色解析为 var(--ig-primary-500) 等令牌或自定义语义变量，避免在 JSX 与 CSS 中留十六进制字面量。
实现：布局用 Ignite UI 组件加 CSS Grid/Flexbox 与覆盖；样式用 CSS Modules 或共享 CSS，不用内联样式；数据用与设计领域和密度匹配的类型化模拟数据，不用 Lorem ipsum。先保持间距、层级与数据密度，再加交互。写图表、地图、头像、网格或深色表面前先读 gotchas.md。
校验：构建→测试→运行→与图对比→修复，边写边修 TypeScript 与运行时错误。按面板比例、控件密度、图表形状、图例位置、按钮突出度、行高、区域间距从粗到细对比，用 set_size、set_spacing、set_roundness 收敛密度与圆角。能截图才自行做视觉检查，否则请用户对比反馈。常见不匹配原因：图表模块未注册、图表数据过稀、设计中无标记却显示标记、图表在弹性网格轨道中塌陷、导航抽屉模式错误、缺少主题导入或遗漏图中某区域。