用途：将视觉设计转换为生产级 React 组件，支持三种输入——自然语言描述、截图文件路径（如 /tmp/mockup.png）、以及页面 URL（如 https://example.com/pricing）。
主要流程：
- 提取：通过 Stitch MCP 的 generate_screen_from_text、get_screen 等工具获取屏幕细节与下载地址，提取配色、字体、间距、组件结构与布局；无 Stitch 时直接读图或 WebFetch 分析。
- 匹配：优先查项目 Storybook（list-all-documentation、get-documentation），其次查 21st.dev 公开注册表，最后在代码库中 grep 检索。
- 适配：套用项目设计令牌，按检测到的 shadcn/ui 风格（Luma、Nova、Lyra、Mira）使用对应类名，补充 TypeScript 类型、Zod 校验与测试。
- 渲染与验证：注册到 json-render 的 defineCatalog()，并用 Storybook MCP 的 run-story-tests、preview-stories 做可访问性自愈验证，最多重试 3 次。
输出结构：src/components/{ComponentName}/ 下含主组件、测试与 barrel 导出。要求不硬编码颜色与间距，全部通过项目设计令牌解析；所有 props 必须有类型。
限制：Stitch 的 generate_screen_from_text 为消耗配额的写操作，不可重试，超时可每 30 秒轮询 get_screen 最多 10 次；输入位图建议长边不超过 2576 px。缺少 json-render 或 storybook-mcp 时对应阶段会被跳过，技能仍能产出可用组件。收费、价格与具体平台支持范围资料中暂未提供。