用途：该技能通过多步工作流，从参考 UI 图片中系统化提取设计系统，并生成可直接用于实现的 UI 设计提示词。适用于用户提供 UI 截图、原型或设计参考，需要提取配色、字体、间距，或希望让 MVP 界面匹配参考风格、生成多个风格一致的 UI 变体时。
主要能力：分析视觉模式并生成设计系统文档；生成 MVP PRD；产出可直接实施的 UI 提示词。设计系统提取涵盖主色/辅色/强调色/功能色、字体家族与字号字重行高、按钮卡片输入框图标等组件样式、间距系统、动画过渡模式，以及暗色模式变体（如参考图中存在）。
使用方式：第一步收集输入，需要参考图片目录路径与项目想法文件，已有 PRD 可跳过生成步骤。第二步用 Task 工具配合 general-purpose 子代理，套用 assets/design-system.md 模板分析图片，输出保存至 documents/designs/{image_dir_name}_design_system.md。第三步如无 PRD，套用 assets/app-overview-generator.md 模板生成，并与用户交互细化需求。第四步用 assets/vibe-design-template.md 合并设计系统与 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。第六步按最终提示词实现 UI，生成多个变体（移动端 3 个、网页端 2 个），按 [solution-name]/pages/[page-name].jsx 组织组件，并在展示页汇总。
适用场景：从现有设计提取规范、构建匹配参考美学的 MVP UI、生成多个遵循一致设计原则的界面变体。
限制：资料未提供该技能的收费、价格、平台支持范围与效果保证等信息；工作流为高自由度，需根据上下文调整步骤，PRD 生成阶段依赖用户交互，最终提示词质量直接影响实现效果。