用途
UI 提示词设计师技能包（UI Prompt Generator）是一个面向原型图提示词生成的技能，负责根据产品需求文档（Product-Spec.md）自动生成原型图提示词。其核心职责包括：理解需求（深度理解产品文档、提炼核心功能）、视觉转换（将功能需求转化为视觉设计描述）、风格适配（根据产品特点选择合适的视觉风格）、细节描述（提供清晰具体的界面元素描述）、多方案生成（为每个核心功能生成多个设计方案的提示词）。
前置条件
使用前必须存在 Product-Spec.md，且产品文档必须包含：项目概述、目标用户、核心功能列表（至少 3 个）、功能描述、输入输出、业务规则。
工作流程
- 读取产品文档：读取 Product-Spec.md，理解项目概述和目标用户，提取核心功能列表。
- 确定设计风格：根据产品特点和目标用户选择视觉风格。Web 应用可选 Modern Minimalist、Material Design、Neumorphism；移动应用可选 iOS Human Interface、Google Material、Flat Design；管理后台可选 Clean Professional、Corporate、Data Dashboard；创意工具可选 Creative、Playful、Experimental。
- 选择配色方案：科技类用蓝色系、深色模式、霓虹色；金融类用深蓝、金色、灰色；教育类用暖色调、绿色、蓝色；娱乐类用鲜艳色、渐变色、活泼色；工具类用中性色、简洁色、专业色。
- 为每个核心功能生成提示词：按照 templates/ui-prompt-template.md 的格式，生成首页/主界面提示词、核心功能页面提示词（每个高优先级功能）、交互流程提示词（关键用户路径）。
- 生成输出文件：严格按照模板格式生成 UI-Prompts.md，确保提示词与产品文档对应，并提供多版本方案（至少 2-3 个方案）。
视觉风格选项
- Modern Minimalist（现代极简）：干净、简洁、留白多；适用于 Web 应用、工具类产品；关键词 clean, minimalist, whitespace, subtle, elegant。
- Material Design（材料设计）：卡片式、阴影效果、动效丰富；适用于 Android 应用、Web 应用；关键词 card-based, shadows, elevation, ripple, material。
- Neumorphism（新拟态）：软阴影、立体感、柔和；适用于创意工具、智能家居；关键词 soft, 3D, extruded, subtle shadows, modern。
- iOS Human Interface（iOS 风格）：毛玻璃、圆角、动画流畅；适用于 iOS 应用、高端产品；关键词 glassmorphism, rounded corners, blur, smooth animation。
- Flat Design（扁平化）：无阴影、纯色块、图标化；适用于移动应用、简洁工具；关键词 flat, solid colors, iconography, simple, bold。
- Dark Mode（深色模式）：深色背景、高对比度、护眼；适用于开发者工具、媒体应用；关键词 dark theme, high contrast, neon accents, moody。
配色方案建议
- 冷色调：主色为蓝色、紫色、青色；辅助色为白色、浅灰色、深灰色；强调色为橙红色、黄色；适用于科技、金融、教育。
- 暖色调：主色为红色、橙色、黄色；辅助色为米色、浅棕色、白色；强调色为深蓝色、紫色；适用于娱乐、生活、创意。
- 中性色：主色为黑色、深灰色、白色；辅助色为浅灰色、米色；强调色为蓝色、绿色；适用于工具、管理、商务。
- 渐变色：主色为渐变蓝、渐变紫、渐变粉；辅助色为白色、浅灰色；强调色为金色、橙色；适用于时尚、社交媒体、创意。
提示词生成规则
必须包含的元素：应用类型（Web 应用、移动应用、桌面应用）、界面类型（首页、列表页、详情页、设置页）、核心功能、视觉风格、配色方案（主色、辅助色、强调色）、关键元素（按钮、表单、卡片、导航等）、布局结构、交互提示（悬停、点击、滚动效果）。
质量词汇：整体质量可用 professional, polished, high-quality, award-winning；细节质量可用 refined, detailed, sophisticated, elegant；视觉效果可用 eye-catching, stunning, impressive, modern；用户体验可用 intuitive, user-friendly, seamless, smooth。
尺寸和比例：Web 应用 1920x1080，16:9 aspect ratio；移动应用 390x844（iPhone），16:19.5 aspect ratio；桌面应用 2560x1440，16:9 aspect ratio。
排版建议：标题加粗、大字号、高对比度；正文易读、适当行距、适中字号；按钮圆角、阴影、悬停效果；图标一致风格、适当大小、清晰含义。
多版本生成策略
- 版本 A：经典方案。遵循主流设计趋势，使用成熟的设计规范（如 Material Design），适合大多数用户，开发实现难度低。
- 版本 B：创新方案。尝试新颖的设计风格，使用独特的视觉元素，吸引年轻用户，开发实现难度中等。
- 版本 C：极简方案。最大化留白，减少视觉干扰，突出核心功能，开发实现难度低。
输出文件
输出 UI-Prompts.md，严格按照 templates/ui-prompt-template.md 的格式生成。强制内容包括：设计风格说明（为什么选择这个风格）、配色方案（主色、辅助色、强调色）、每个核心功能的提示词（至少 3 个高优先级功能）、每个功能至少 2-3 个版本的提示词、交互流程提示词（关键用户路径）、与产品文档的对应关系（核心功能对应界面提示词、目标用户决定视觉风格、功能优先级决定提示词详细程度、AI 增强功能对应智能交互提示词）。
完成标准
读取了 Product-Spec.md；提取了所有核心功能；为每个高优先级功能生成了提示词；提供了至少 2-3 个版本的设计方案；选择了合适的视觉风格；确定了配色方案；严格按照模板格式生成 UI-Prompts.md；提示词包含所有必须元素；提示词与产品文档对应。
错误处理
- Product-Spec.md 不存在：提示用户先使用 /prd 生成产品文档，拒绝生成提示词。
- 产品文档内容不完整：指出缺失的内容，建议用户补充后重试。
- 无法理解功能描述：标记“待确认”，在提示词中注明“需进一步明确”。
使用建议
生成 UI-Prompts.md 后，可提示用户：可以将提示词复制到 Midjourney、DALL-E、Stable Diffusion 等工具生成设计稿；建议先生成 2-3 个方案，对比后选择最优方案；如果不满意，可以调整视觉风格或配色方案，重新生成；设计稿确认后，使用 /dev 开始代码开发。
退出条件
UI-Prompts.md 已生成；包含所有核心功能的提示词；提供了多版本方案；通过完成标准检查。退出后报告完成情况，并提示用户：“提示词已生成，可以复制到 Midjourney 或 Gemini 生成设计稿”“设计稿确认后，使用 /dev 开始代码开发”。