用途：从参考UI图片中系统化提取设计系统，并生成可直接用于实施的设计提示词。适用于用户提供UI截图或原型、需要提取配色/字体/间距、生成设计系统文档、构建匹配参考风格的MVP界面、产出多个一致UI变体时。
主要能力：多步工作流：分析视觉模式→生成设计系统文档→生成PRD→产出可实施UI提示词。可提取主色/辅色/强调色/功能色、字体家族与字号字重行高、按钮卡片输入图标等组件样式、间距系统、动画与过渡、深色模式变体。模板资产包括design-system.md、app-overview-generator.md、vibe-design-template.md。
使用方式：需提供参考图片目录与项目想法文件（PRD可选）。流程为提取设计系统并保存至documents/designs/，生成或复用MVP PRD，合成最终提示词保存至documents/ux-design/，检查React环境后实施UI。检查环境命令：find . -name "package.json" -exec grep -l "react" {} ;；若需新建环境：npx create-react-app my-app；cd my-app；npm install -D tailwindcss postcss autoprefixer；npx tailwindcss init -p；npm install lucide-react。实施时产出移动端3个、网页端2个设计变体，按[solution-name]/pages/[page-name].jsx组织组件并在展示页汇总。
限制：属高自由度工作流，需按上下文调整；PRD生成依赖与用户交互澄清；最终提示词质量直接影响实施效果；其余收费、平台支持等信息暂未提供。