美学设计（Aesthetic）
通过遵循经过验证的设计原则和系统化工作流，创建具有美感的界面。
适用场景
- 构建或设计用户界面
- 分析灵感网站的设计（Dribbble、Mobbin、Behance）
- 生成设计图像并评估美学质量
- 实现视觉层次、排版、色彩理论
- 添加微交互和动画
- 创建设计文档和样式指南
- 需要无障碍和设计系统方面的指导
核心框架：四阶段方法
1. BEAUTIFUL：理解美学
研究现有设计，识别模式，提取原则。AI 缺乏美学感知 —— 标准必须来自分析高质量示例并与市场品味对齐。
参考：references/design-principles.md - 视觉层次、排版、色彩理论、留白原则。
2. RIGHT：确保功能性
缺乏可用性的美丽设计毫无价值。研究设计系统、组件架构、无障碍要求。
参考：references/design-principles.md - 设计系统、组件库、WCAG 无障碍标准。
3. SATISFYING：微交互
融入细微动画，使用适当的时序（150-300ms）、缓动曲线（入场用 ease-out，退场用 ease-in）、顺序延迟。
参考：references/micro-interactions.md - 持续时间指南、缓动曲线、性能优化。
4. PEAK：通过设计讲故事
用叙事元素提升 —— 视差效果、粒子系统、主题一致性。保持克制："任何东西太多都不好。"
参考：references/storytelling-design.md - 叙事元素、基于滚动的故事叙述、交互技巧。
工作流
工作流一：捕捉与分析灵感
目的：从灵感网站提取设计指南。
步骤：
- 浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
- 使用 chrome-devtools 技能捕捉全屏截图（非整页）
- 使用 ai-multimodal 技能分析截图并提取：
- 设计风格（极简主义、玻璃拟态、新粗野主义等）
- 布局结构与网格系统
- 排版系统与层次 重要： 尝试预测截图中的字体名称（Google Fonts）和字号，不要只使用 Inter 或 Poppins。
- 带十六进制代码的配色方案
- 视觉层次技巧
- 组件模式与样式
- 微交互
- 无障碍考量
- 整体美学质量评分（1-10）
- 使用模板将发现记录在项目设计指南中
工作流二：生成与迭代设计图像
目的：通过迭代创建美观的设计图像。
步骤：
- 定义设计提示词，包含：风格、颜色、排版、受众、动画规格
- 使用 ai-multimodal 技能通过 Gemini API 生成设计图像
- 使用 ai-multimodal 技能分析输出图像并评估美学质量
- 如果评分 < 7/10 或未达到专业标准：
- 识别具体弱点（颜色、排版、布局、间距、层次）
- 优化提示词进行改进
- 使用 ai-multimodal 重新生成或使用 media-processing 技能修改输出（调整大小、裁剪、滤镜、合成）
- 重复直到达到美学标准（评分 >= 7/10）
- 使用模板记录最终设计决策
设计文档
创建设计指南
使用 assets/design-guideline-template.md 记录：
- 配色模式与心理学
- 排版系统与层次
- 布局原则与间距
- 组件样式标准
- 无障碍考量
- 设计亮点与理由
保存到项目 ./docs/design-guideline.md。
创建设计故事
使用 assets/design-story-template.md 记录：
- 叙事元素与主题
- 情感旅程
- 用户旅程与高光时刻
- 设计决策理由
保存到项目 ./docs/design-story.md。
资源与集成
相关技能
- ai-multimodal：分析文档、截图和视频，生成设计图像，编辑生成的图像，使用 Gemini API 评估美学质量
- chrome-devtools：从灵感网站捕捉全屏截图，页面间导航，与元素交互，读取控制台日志和网络请求
- media-processing：优化生成的图像（FFmpeg 处理视频，ImageMagick 处理图像）
- ui-styling：使用 shadcn/ui 组件 + Tailwind CSS 工具优先样式实现设计
- web-frameworks：使用 Next.js 构建（App Router、Server Components、SSR/SSG）
参考文档
参考：references/design-resources.md - 灵感平台、设计系统、AI 工具、MCP 集成、开发策略。
关键原则
- 美学标准来自人类，而非 AI —— 研究高质量示例
- 基于分析进行迭代 —— 永远不要满足于第一次输出
- 平衡美观与功能性和无障碍性
- 记录决策以确保开发一致性
- 在设计中使用渐进式披露 —— 逐步展示复杂性
- 始终客观评估美学质量（评分 >= 7/10）