Moodboard Creator

创建并持续优化视觉情绪板（Moodboard），将设计灵感整合为统一、明确的设计方向。

目的

在着手编写代码前，先构建一份情绪板，用于：

• 将零散灵感整合为清晰、可执行的设计方向
• 提取关键色彩、字体排印与界面模式
• 支持基于用户反馈的迭代式精炼
• 在开发实现前确立统一的设计语言

工作流

步骤 1：收集素材来源

从以下渠道收集设计灵感：

• 趋势研究报告截图
• 已分析过的网站页面
• 用户提供的 URL 或图片文件
• Dribbble / Behance 上的作品截图

对每个来源，请记录：

• 来源 URL 或名称
• 需重点提取的视觉元素
• 该来源的相关性说明（为何选用）

步骤 2：提取设计元素

从所收集的素材中，系统提取以下四类要素：

色彩

• 主色（1–2 种）
• 辅色 / 强调色（1–2 种）
• 背景色
• 文字色
• 标注对应十六进制色值（hex code）

字体排印（Typography）

• 标题字体样式（如可识别，请注明字体名称）
• 正文用字体样式
• 字重与字号观察结果
• 字间距（tracking）与行距（spacing）备注

UI 模式（UI Patterns）

• 导航样式
• 卡片（Card）呈现方式
• 按钮设计风格
• 区块（Section）布局结构
• 装饰性视觉元素

情绪 / 氛围（Mood/Atmosphere）

• 描述整体感受的关键词
• 预期唤起的情感反应
• 拟传达的品牌人格特质

步骤 3：生成情绪板文档

生成结构化的情绪板 Markdown 文档：

## Moodboard v1 - [Project Name]

### Inspiration Sources
| Source | Key Takeaway |
|--------|--------------|
| [URL/Name 1] | [What we're taking from it] |
| [URL/Name 2] | [What we're taking from it] |
| [URL/Name 3] | [What we're taking from it] |

### Color Direction

Primary: #[hex] - [color name]
Secondary: #[hex] - [color name]
Accent: #[hex] - [color name]
Background: #[hex] - [color name]
Text: #[hex] - [color name]

### Typography Direction
- **Headlines**: [Font/style] - [weight, size notes]
- **Body**: [Font/style] - [readability notes]
- **Accents**: [Any special type treatments]

### UI Patterns to Incorporate
1. **[Pattern Name]**: [Description of how to use it]
2. **[Pattern Name]**: [Description of how to use it]
3. **[Pattern Name]**: [Description of how to use it]

### Layout Approach
- Grid system: [e.g., 12-column, bento, asymmetric]
- Spacing philosophy: [tight, airy, mixed]
- Section structure: [full-width, contained, alternating]

### Mood Keywords
[Keyword 1] | [Keyword 2] | [Keyword 3] | [Keyword 4]

### Visual References
[Descriptions of key screenshots/references]

### What to Avoid
- [Anti-pattern from inspiration that doesn't fit]
- [Style that would clash]

步骤 4：用户评审

向用户展示情绪板，并提出以下问题：

• 该方向是否符合预期感受？
• 是否有需要调整的色彩？
• 是否存在特定字体偏好？
• 是否有需增补或移除的 UI 模式？
• 列出的情绪关键词中，是否存在不贴切的项？

步骤 5：迭代优化

根据用户反馈执行以下操作：

1. 更新情绪板版本号（如 v1 → v2）
2. 按反馈逐项调整设计元素
3. 必要时补充新的灵感来源
4. 移除已被否定的设计元素
5. 提交更新后的情绪板版本

持续迭代，直至用户正式确认通过。

步骤 6：最终定稿

获得用户批准后，生成最终版情绪板摘要：

## FINAL Moodboard - [Project Name]

### Approved Direction
[Summary of the design direction]

### Color Palette (Final)
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #xxx | Buttons, links, accents |
| Secondary | #xxx | Hover states, icons |
| Background | #xxx | Page background |
| Surface | #xxx | Cards, modals |
| Text Primary | #xxx | Headings, body |
| Text Secondary | #xxx | Captions, muted |

### Typography (Final)
- Headlines: [Font Name] - [weight]
- Body: [Font Name] - [weight]
- Monospace: [Font Name] (if needed)

### Key Patterns
1. [Pattern with implementation notes]
2. [Pattern with implementation notes]

### Ready for Implementation
[Checkbox] Colors defined
[Checkbox] Fonts selected
[Checkbox] Layout approach set
[Checkbox] User approved

迭代最佳实践

• 确保每次迭代均有完整文档记录
• 聚焦局部调整（避免全盘重构）
• 清晰说明每处修改的依据与目标
• 针对重大变更，提供修改前/后的对比说明
• 建议最多进行 3–4 轮迭代；若仍未收敛，则主动汇总反馈、推动决策

备用模式（Fallback Mode）

当缺乏可用视觉素材时，启用以下流程：

1. 请用户用文字描述期望达成的情绪/氛围
2. 参考 design-wizard 中预设的美学分类（aesthetic categories）
3. 从 color-curator 的备用方案中推荐配色组合
4. 从 typography-selector 的备用方案中推荐字体搭配
5. 基于文字描述生成纯文本形式的情绪板

输出用途

最终版情绪板应直接指导以下开发决策：

• Tailwind 配置中的 colors 定义
• Google Fonts 字体选型
• 组件（Component）的样式实现策略
• 整体布局（Layout）结构设计