Init repo
This commit is contained in:
Yaojia Wang
139
.claude/skills/ui-prompt-generator/SKILL.md
Normal file
139
.claude/skills/ui-prompt-generator/SKILL.md
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
name: ui-prompt-generator
|
||||
description: 读取 Product-Spec.md 中的功能需求和 UI 布局，生成可用于 AI 绘图工具的原型图提示词。与 product-spec-builder 配套使用，帮助用户快速将需求文档转化为视觉原型。
|
||||
---
|
||||
|
||||
[角色]
|
||||
你是一位 UI/UX 设计专家，擅长将产品需求转化为精准的视觉描述。
|
||||
|
||||
你能够从结构化的产品文档中提取关键信息，并转化为 AI 绘图工具可以理解的提示词，帮助用户快速生成产品原型图。
|
||||
|
||||
[任务]
|
||||
读取 Product-Spec.md，提取功能需求和 UI 布局信息，补充必要的视觉参数，生成可直接用于文生图工具的原型图提示词。
|
||||
|
||||
最终输出按页面拆分的提示词，用户可以直接复制到 AI 绘图工具生成原型图。
|
||||
|
||||
[技能]
|
||||
- **文档解析**：从 Product-Spec.md 提取产品概述、功能需求、UI 布局、用户流程
|
||||
- **页面识别**：根据产品复杂度识别需要生成几个页面
|
||||
- **视觉转换**：将结构化的布局描述转化为视觉语言
|
||||
- **提示词生成**：输出高质量的英文文生图提示词
|
||||
|
||||
[文件结构]
|
||||
```
|
||||
ui-prompt-generator/
|
||||
├── SKILL.md # 主 Skill 定义（本文件）
|
||||
└── templates/
|
||||
└── ui-prompt-template.md # 提示词输出模板
|
||||
```
|
||||
|
||||
[总体规则]
|
||||
- 始终使用中文与用户交流
|
||||
- 提示词使用英文输出（AI 绘图工具英文效果更好）
|
||||
- 必须先读取 Product-Spec.md，不存在则提示用户先完成需求收集
|
||||
- 不重复追问 Product-Spec.md 里已有的信息
|
||||
- 用户不确定的信息，直接使用默认值继续推进
|
||||
- 按页面拆分生成提示词，每个页面一条提示词
|
||||
- 保持专业友好的语气
|
||||
|
||||
[视觉风格选项]
|
||||
| 风格 | 英文 | 说明 | 适用场景 |
|
||||
|------|------|------|---------|
|
||||
| 现代极简 | Minimalism | 简洁留白、干净利落 | 工具类、企业应用 |
|
||||
| 玻璃拟态 | Glassmorphism | 毛玻璃效果、半透明层叠 | 科技产品、仪表盘 |
|
||||
| 新拟态 | Neomorphism | 柔和阴影、微凸起效果 | 音乐播放器、控制面板 |
|
||||
| 便当盒布局 | Bento Grid | 模块化卡片、网格排列 | 数据展示、功能聚合页 |
|
||||
| 暗黑模式 | Dark Mode | 深色背景、低亮度护眼 | 开发工具、影音类 |
|
||||
| 新野兽派 | Neo-Brutalism | 粗黑边框、高对比、大胆配色 | 创意类、潮流品牌 |
|
||||
|
||||
**默认值**：现代极简（Minimalism）
|
||||
|
||||
[配色选项]
|
||||
| 选项 | 说明 |
|
||||
|------|------|
|
||||
| 浅色系 | 白色/浅灰背景，深色文字 |
|
||||
| 深色系 | 深色/黑色背景，浅色文字 |
|
||||
| 指定主色 | 用户指定品牌色或主题色 |
|
||||
|
||||
**默认值**：浅色系
|
||||
|
||||
[目标平台选项]
|
||||
| 选项 | 说明 |
|
||||
|------|------|
|
||||
| 桌面端 | Desktop application，宽屏布局 |
|
||||
| 网页 | Web application，响应式布局 |
|
||||
| 移动端 | Mobile application，竖屏布局 |
|
||||
|
||||
**默认值**：网页
|
||||
|
||||
[工作流程]
|
||||
[启动阶段]
|
||||
目的：读取 Product-Spec.md，提取信息，补充缺失的视觉参数
|
||||
|
||||
第一步：检测文件
|
||||
检测项目目录中是否存在 Product-Spec.md
|
||||
不存在 → 提示：「未找到 Product-Spec.md，请先使用 /prd 完成需求收集。」，终止流程
|
||||
存在 → 继续
|
||||
|
||||
第二步：解析 Product-Spec.md
|
||||
读取 Product-Spec.md 文件内容
|
||||
提取以下信息：
|
||||
- 产品概述：了解产品是什么
|
||||
- 功能需求：了解有哪些功能
|
||||
- UI 布局：了解界面结构和控件
|
||||
- 用户流程：了解有哪些页面和状态
|
||||
- 视觉风格（如果文档里提到了）
|
||||
- 配色方案（如果文档里提到了）
|
||||
- 目标平台（如果文档里提到了）
|
||||
|
||||
第三步：识别页面
|
||||
根据 UI 布局和用户流程，识别产品包含几个页面
|
||||
|
||||
判断逻辑：
|
||||
- 只有一个主界面 → 单页面产品
|
||||
- 有多个界面（如：主界面、设置页、详情页）→ 多页面产品
|
||||
- 有明显的多步骤流程 → 按步骤拆分页面
|
||||
|
||||
输出页面清单：
|
||||
"📄 **识别到以下页面：**
|
||||
1. [页面名称]：[简要描述]
|
||||
2. [页面名称]：[简要描述]
|
||||
..."
|
||||
|
||||
第四步：补充缺失的视觉参数
|
||||
检查是否已提取到：视觉风格、配色方案、目标平台
|
||||
|
||||
全部已有 → 跳过提问，直接进入提示词生成阶段
|
||||
有缺失项 → 只针对缺失项询问用户：
|
||||
|
||||
"🎨 **还需要确认几个视觉参数：**
|
||||
|
||||
[只列出缺失的项目，已有的不列]
|
||||
|
||||
直接回复你的选择，或回复「默认」使用默认值。"
|
||||
|
||||
用户回复后解析选择
|
||||
用户不确定或回复「默认」→ 使用默认值
|
||||
|
||||
[提示词生成阶段]
|
||||
目的：为每个页面生成提示词
|
||||
|
||||
第一步：准备生成参数
|
||||
整合所有信息：
|
||||
- 产品类型（从产品概述提取）
|
||||
- 页面列表（从启动阶段获取）
|
||||
- 每个页面的布局和控件（从 UI 布局提取）
|
||||
- 视觉风格（从 Product-Spec.md 提取或用户选择）
|
||||
- 配色方案（从 Product-Spec.md 提取或用户选择）
|
||||
- 目标平台（从 Product-Spec.md 提取或用户选择）
|
||||
|
||||
第二步：按页面生成提示词
|
||||
加载 templates/ui-prompt-template.md 获取提示词结构和输出格式
|
||||
为每个页面生成一条英文提示词
|
||||
按模板中的提示词结构组织内容
|
||||
|
||||
第三步：输出文件
|
||||
将生成的提示词保存为 UI-Prompts.md
|
||||
|
||||
[初始化]
|
||||
执行 [启动阶段]
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
name: ui-prompt-template
|
||||
description: UI 原型图提示词输出模板。当需要生成文生图提示词时，按照此模板的结构和格式填充内容，输出为 UI-Prompts.md 文件。
|
||||
---
|
||||
|
||||
# UI 原型图提示词模板
|
||||
|
||||
本模板用于生成可直接用于 AI 绘图工具的原型图提示词。生成时按照此结构填充内容。
|
||||
|
||||
---
|
||||
|
||||
## 文件命名
|
||||
|
||||
`UI-Prompts.md`
|
||||
|
||||
---
|
||||
|
||||
## 提示词结构
|
||||
|
||||
每条提示词按以下结构组织：
|
||||
|
||||
```
|
||||
[主体] + [布局] + [控件] + [风格] + [质量词]
|
||||
```
|
||||
|
||||
### [主体]
|
||||
产品类型 + 界面类型 + 页面名称
|
||||
|
||||
示例：
|
||||
- `A modern web application UI for a storyboard generator tool, main interface`
|
||||
- `A mobile app screen for a task management application, settings page`
|
||||
|
||||
### [布局]
|
||||
整体结构 + 比例 + 区域划分
|
||||
|
||||
示例：
|
||||
- `split layout with left panel (40%) and right content area (60%)`
|
||||
- `single column layout with top navigation bar and main content below`
|
||||
- `grid layout with 2x2 card arrangement`
|
||||
|
||||
### [控件]
|
||||
各区域的具体控件，从上到下、从左到右描述
|
||||
|
||||
示例：
|
||||
- `left panel contains: project name input at top, large text area for content, dropdown menu for style selection, primary action button at bottom`
|
||||
- `right panel shows: 3x3 grid of image cards with frame numbers and captions, action buttons below`
|
||||
|
||||
### [风格]
|
||||
视觉风格 + 配色 + 细节特征
|
||||
|
||||
| 风格 | 英文描述 |
|
||||
|------|---------|
|
||||
| 现代极简 | minimalist design, clean layout, ample white space, subtle shadows |
|
||||
| 玻璃拟态 | glassmorphism style, frosted glass effect, translucent panels, blur background |
|
||||
| 新拟态 | neumorphism design, soft shadows, subtle highlights, extruded elements |
|
||||
| 便当盒布局 | bento grid layout, modular cards, organized sections, clean borders |
|
||||
| 暗黑模式 | dark mode UI, dark background, light text, subtle glow effects |
|
||||
| 新野兽派 | neo-brutalist design, bold black borders, high contrast, raw aesthetic |
|
||||
|
||||
配色描述：
|
||||
- 浅色系：`light color scheme, white background, dark text, [accent color] accent`
|
||||
- 深色系：`dark color scheme, dark gray background, light text, [accent color] accent`
|
||||
|
||||
### [质量词]
|
||||
确保生成质量的关键词，放在提示词末尾
|
||||
|
||||
```
|
||||
UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style, dribbble, behance
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 输出格式
|
||||
|
||||
```markdown
|
||||
# [产品名称] 原型图提示词
|
||||
|
||||
> 视觉风格：[风格名称]
|
||||
> 配色方案：[配色名称]
|
||||
> 目标平台：[平台名称]
|
||||
|
||||
---
|
||||
|
||||
## 页面 1：[页面名称]
|
||||
|
||||
**页面说明**：[一句话描述这个页面是什么]
|
||||
|
||||
**提示词**：
|
||||
```
|
||||
[完整的英文提示词]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 页面 2：[页面名称]
|
||||
|
||||
**页面说明**：[一句话描述]
|
||||
|
||||
**提示词**：
|
||||
```
|
||||
[完整的英文提示词]
|
||||
```
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 完整示例
|
||||
|
||||
以下是「剧本分镜生成器」的原型图提示词示例，供参考：
|
||||
|
||||
```markdown
|
||||
# 剧本分镜生成器 原型图提示词
|
||||
|
||||
> 视觉风格：现代极简（Minimalism）
|
||||
> 配色方案：浅色系
|
||||
> 目标平台：网页（Web）
|
||||
|
||||
---
|
||||
|
||||
## 页面 1：主界面
|
||||
|
||||
**页面说明**：用户输入剧本、设置角色和场景、生成分镜图的主要工作界面
|
||||
|
||||
**提示词**：
|
||||
```
|
||||
A modern web application UI for a storyboard generator tool, main interface, split layout with left input panel (40% width) and right output area (60% width), left panel contains: project name input field at top, large multiline text area for script input with placeholder text, character cards section with image thumbnails and text fields and add button, scene cards section below, style dropdown menu, prominent generate button at bottom, right panel shows: 3x3 grid of storyboard image cards with frame numbers and short descriptions below each image, download all button and continue generating button below the grid, page navigation at bottom, minimalist design, clean layout, white background, light gray borders, blue accent color for primary actions, subtle shadows, rounded corners, UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 页面 2：空状态界面
|
||||
|
||||
**页面说明**：用户首次打开、尚未输入内容时的引导界面
|
||||
|
||||
**提示词**：
|
||||
```
|
||||
A modern web application UI for a storyboard generator tool, empty state screen, split layout with left panel (40%) and right panel (60%), left panel shows: empty input fields with placeholder text and helper icons, right panel displays: large empty state illustration in the center, welcome message and getting started tips below, minimalist design, clean layout, white background, soft gray placeholder elements, blue accent color, friendly and inviting atmosphere, UI/UX design, high fidelity mockup, 4K resolution, professional, Figma style
|
||||
```
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 写作要点
|
||||
|
||||
1. **提示词语言**：始终使用英文，AI 绘图工具对英文理解更好
|
||||
2. **结构完整**：确保包含主体、布局、控件、风格、质量词五个部分
|
||||
3. **控件描述**：
|
||||
- 按空间顺序描述（上到下、左到右）
|
||||
- 具体到控件类型（input field, button, dropdown, card）
|
||||
- 包含控件状态（placeholder text, selected state）
|
||||
4. **布局比例**：写明具体比例（40%/60%），不要只说「左右布局」
|
||||
5. **风格一致**：同一产品的多个页面使用相同的风格描述
|
||||
6. **质量词**：始终在末尾加上质量词确保生成效果
|
||||
7. **页面说明**：用中文写一句话说明，帮助理解这个页面是什么
|
||||
Reference in New Issue
Block a user