用途：把 UI 设计截图转换为结构清晰、可访问、易维护的 React 组件，使用 TypeScript 与 Tailwind CSS。适合用户提供设计稿、Figma 导出图，或提出“实现这个设计”“构建这个界面”“分析这张截图”“把这个设计转成代码”等请求时。
主要能力：提供系统化分析流程。先读取并描述截图，判断页面类型与目标设备；再做布局分析，识别单栏、侧边栏、页头加内容、网格、分屏、仪表盘、主从等模式；随后按清单识别导航、数据展示、输入、操作、反馈、浮层等组件；接着提取设计令牌，包括颜色、字体、字号、字重、间距、圆角、阴影和图标尺寸，并尽量映射到 Tailwind 默认值；最后生成带 TypeScript 接口、JSDoc 注释、语义化 HTML 与 ARIA 属性的 React 函数组件，覆盖响应式、加载与错误状态。
使用方式：按步骤先读截图，确认理解后再分析布局与组件，提取设计令牌，规划组件层级与复用，生成代码，最后对照截图校验响应式与可访问性并说明假设。若同时存在 react-component-generator 技能，可引用其模板，再套用本技能提取的设计令牌。
适用场景：登录页、仪表盘、落地页、组件库等设计稿的代码还原，以及界面结构理解。
限制：资料未提供安装命令、包依赖、收费与价格信息；具体可用的参考文件与模板依赖运行环境，实际效果需结合项目验证，暂未提供更明确的集成方式。