情绪板创建器

创建和优化视觉情绪板，将设计灵感综合成一个一致的方向。

目的

在开始编码之前，创建一个情绪板，以：

将灵感整合成清晰的方向
提取颜色、排版和模式
允许通过用户反馈进行迭代优化
在实施前建立设计语言

工作流程

步骤 1: 收集来源

从以下渠道收集灵感：

趋势研究截图
分析的网站
用户提供的 URL 或图像
Dribbble/Behance 作品

对于每个来源，记录：

URL 或来源
要提取的关键视觉元素
为何相关

步骤 2: 提取元素

从收集的来源中提取：

颜色

主色（1-2 种）
次要/强调色（1-2 种）
背景颜色
文本颜色
记录十六进制代码

排版

标题字体样式（如果可识别则记名称）
正文字体样式
权重和大小观察
间距/字距笔记

UI 模式

导航样式
卡片处理
按钮设计
部分布局
装饰元素

情绪/氛围

描述感觉的关键词
情感反应
品牌个性特征

步骤 3: 创建情绪板文档

生成结构化的情绪板：

## 情绪板 v1 - [项目名称]

### 灵感来源
| 来源 | 关键要点 |
|--------|--------------|
| [URL/名称 1] | [我们从中学到什么] |
| [URL/名称 2] | [我们从中学到什么] |
| [URL/名称 3] | [我们从中学到什么] |

### 颜色方向

主色： #[hex] - [颜色名称] 次要色： #[hex] - [颜色名称] 强调色： #[hex] - [颜色名称] 背景色： #[hex] - [颜色名称] 文本色： #[hex] - [颜色名称]


### 排版方向
- **标题**： [字体/样式] - [权重, 大小笔记]
- **正文**： [字体/样式] - [可读性笔记]
- **强调**： [任何特殊字体处理]

### 要融入的 UI 模式
1. **[模式名称]**： [描述如何使用它]
2. **[模式名称]**： [描述如何使用它]
3. **[模式名称]**： [描述如何使用它]

### 布局方法
- 网格系统： [例如, 12列, bento, 不对称]
- 间距哲学： [紧凑, 通风, 混合]
- 部分结构： [全宽, 包含, 交替]

### 情绪关键词
[关键词 1] | [关键词 2] | [关键词 3] | [关键词 4]

### 视觉参考
[关键截图/参考的描述]

### 要避免的内容
- [不符合的灵感反模式]
- [会冲突的风格]

步骤 4: 用户审查

向用户展示情绪板并询问：

这个方向感觉对吗？
任何颜色需要调整？
排版偏好？
要添加或移除的模式？
不合适的关键词？

步骤 5: 迭代

基于反馈：

更新情绪板版本号
根据反馈调整元素
如有需要，添加新灵感
移除被拒绝的元素
呈现更新版本

继续直到用户批准。

步骤 6: 最终确定

当批准时，创建最终情绪板总结：

## 最终情绪板 - [项目名称]

### 批准的方向
[设计方向总结]

### 颜色调色板（最终）
| 角色 | 十六进制 | 使用方式 |
|------|-----|-------|
| 主色 | #xxx | 按钮, 链接, 强调 |
| 次要色 | #xxx | 悬停状态, 图标 |
| 背景色 | #xxx | 页面背景 |
| 表面色 | #xxx | 卡片, 模态框 |
| 文本主色 | #xxx | 标题, 正文 |
| 文本次要色 | #xxx | 说明, 弱化 |

### 排版（最终）
- 标题： [字体名称] - [权重]
- 正文： [字体名称] - [权重]
- 等宽字体： [字体名称]（如果需要）

### 关键模式
1. [带有实现笔记的模式]
2. [带有实现笔记的模式]

### 准备实施
[复选框] 颜色定义
[复选框] 字体选择
[复选框] 布局方法设置
[复选框] 用户批准

迭代最佳实践

记录每个版本
进行有针对性的更改（不要彻底改变一切）
清晰地解释更改
展示重大变化的前后对比
最多 3-4 次迭代（然后综合反馈）

备用模式

如果无视觉来源可用：

请用户描述期望的情绪/感觉
参考设计向导中的美学类别
建议颜色策展中的备用调色板
使用排版选择器中的备用字体配对
根据描述创建基于文本的情绪板

输出

最终情绪板应直接指导：

Tailwind 配置颜色
Google Fonts 选择
组件样式决策
布局结构