用途：该技能用于从参考 UI 图片中系统化提取设计系统，并产出可实现的设计提示词。适用于用户提供 UI 截图、原型图或设计参考，需要提取配色、字体、间距，或希望按参考风格构建 MVP 界面的情况。
主要能力：提供多步工作流。先用 assets/design-system.md 模板分析色彩体系、字体（字族、字号、字重、行高）、组件样式（按钮、卡片、输入框、图标）、间距系统、动画过渡，并记录暗色模式变体，输出设计系统 markdown。若未提供 PRD，可用 assets/app-overview-generator.md 模板协作生成 MVP PRD，涵盖电梯陈述、问题与目标用户、独特卖点、平台目标、功能清单与体验考量。最后用 assets/vibe-design-template.md 合并设计系统与 PRD，产出完整实现提示词，包含美学原则、配色与字体指南、应用概述、功能需求与实现任务。
使用方式：准备参考图片目录与项目想法文件；用 Task 工具调用通用子代理执行设计系统提取，结果保存到 documents/designs/{image_dir_name}_design_system.md；生成 PRD 后保存到变量或 documents/prd/；最终提示词保存到 documents/ux-design/{idea_file_name}design_prompt{timestamp}.md。随后检查 React 环境：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 个、Web 端 2 个），按 [solution-name]/pages/[page-name].jsx 组织组件，并在展示页聚合。
限制：资料未提供收费、价格、平台兼容性与效果保证等信息；该技能明示为高自由度工作流，需依据上下文调整步骤；PRD 生成依赖与用户交互澄清需求，最终提示词质量直接决定实现效果；实现需本地 React 环境。