用途：把 UI 设计截图系统性分析后翻译为可用的 React 组件，使用 TypeScript 与 Tailwind CSS，追求结构清晰、可访问、可维护，并尽量贴合原设计。
主要能力：按固定工作流分析界面。先读取并描述截图，判断页面类型、目标设备与整体风格；再做布局分析，识别单列、侧边栏、头部加内容、网格、分屏、仪表盘、主从等模式；接着按清单识别导航、数据展示、输入、操作、反馈、浮层等组件；然后提取设计令牌，包括配色、字体、字号、字重、间距、圆角、阴影等，并映射到 Tailwind 尺度。之后逐个组件分析边界、数据、内部结构与交互状态，规划组件层级与复用方式，最后生成带 TypeScript 接口与 JSDoc 的 React 函数组件。
使用方式：当用户提供截图、界面稿或 Figma 导出，或要求“实现这个设计”“构建这个 UI”“分析这张截图”时启用。流程为读取截图、确认理解、分析布局、识别组件、提取令牌、编码、对照截图校验。若存在 react-component-generator 技能，可复用其模板与命名规范。资料中给出的示例命令或代码保持不变。
适用场景：登录表单、仪表盘、落地页等多区块页面、组件库截图等多类界面到代码的转换；也适合先理解界面结构再实现。
限制：资料未提供该技能的安装方式、收费与价格、运行平台、依赖版本、性能效果与准确率等信息。分析中的颜色与间距不确定时只能取最接近的 Tailwind 默认值，且需要用户确认理解后再大量生成代码，最终结果可能需按反馈迭代。