构建或优化 UI/UX 时：用四阶段审美框架…

在开发界面、分析灵感站、生成或评估设计图、实现视觉层级/色彩/微交互、整理设计文档时，按系统流程提升审美质量。

适用场景

解决思路

1. 使用四阶段框架构建美观界面：BEAUTIFUL 理解审美、RIGHT 确保功能、SATISFYING 微交互、PEAK 通过设计讲故事。
2. BEAUTIFUL：研究现有设计，识别模式，提取原则；AI 缺乏审美感，标准必须来自分析高质量示例并对齐市场品味。
3. BEAUTIFUL 参考：读取 references/design-principles.md 获取视觉层级、排版、色彩理论、留白原则。
4. RIGHT：研究设计系统、组件架构、可访问性要求；美丽但缺乏可用性的设计没有价值。
5. RIGHT 参考：读取 references/design-principles.md 获取设计系统、组件库、WCAG 可访问性标准。
6. SATISFYING：加入细微动画，使用合适时长（150-300ms）、缓动曲线（进入用 ease-out、退出用 ease-in）、顺序延迟。
7. SATISFYING 参考：读取 references/micro-interactions.md 获取时长指南、缓动曲线、性能优化。
8. PEAK：用叙事元素提升设计，如 parallax effects、particle systems、thematic consistency；保持克制：过多任何东西都不好。
9. PEAK 参考：读取 references/storytelling-design.md 获取叙事元素、基于滚动的叙事、交互技术。
10. Workflow 1 第 1 步：浏览灵感网站 Dribbble、Mobbin、Behance、Awwwards。
11. Workflow 1 第 2 步：用 chrome-devtools 捕获全屏截图（不是完整页面）。
12. Workflow 1 第 3 步：用 ai-multimodal 分析截图并提取设计风格（Minimalism、Glassmorphism、Neo-brutalism 等）、布局结构与网格系统、排版系统与层级；重点尝试预测 Google Fonts 字体名和字号，不要只用 Inter 或 Poppins；调色板及 hex codes；视觉层级技术；组件模式与样式；微交互；可访问性考虑；整体审美质量评分（1-10）。
13. Workflow 1 第 4 步：用模板把发现记录到项目 design guidelines。
14. Workflow 2 第 1 步：定义 design prompt，包含 style、colors、typography、audience、animation specs。
15. Workflow 2 第 2 步：用 ai-multimodal 通过 Gemini API 生成设计图。
16. Workflow 2 第 3 步：用 ai-multimodal 分析输出图片并评估审美质量。
17. Workflow 2 第 4 步：如果 score < 7/10 或未达专业标准，识别具体弱点（color、typography、layout、spacing、hierarchy），改进 prompt 后重新生成；或用 media-processing 修改输出（resize、crop、filters、composition）。
18. Workflow 2 第 5 步：重复直到达到审美标准（score ≥ 7/10）。
19. Workflow 2 第 6 步：用模板记录最终设计决策。
20. 创建设计指南：用 assets/design-guideline-template.md 记录 color patterns & psychology、typography system & hierarchy、layout principles & spacing、component styling standards、accessibility considerations、design highlights & rationale。
21. 将设计指南保存到项目 ./docs/design-guideline.md。
22. 创建设计故事：用 assets/design-story-template.md 记录 narrative elements & themes、emotional journey、user journey & peak moments、design decision rationale。
23. 将设计故事保存到项目 ./docs/design-story.md。
24. 集成 ai-multimodal：分析文档、截图和视频，生成设计图，编辑生成图，用 Gemini API 评估审美质量。
25. 集成 chrome-devtools：从灵感网站捕获全屏截图，导航页面，与元素交互，读取 console logs 和 network requests。
26. 集成 media-processing：精炼生成图（视频用 FFmpeg，图片用 ImageMagick）。
27. 集成 ui-styling：用 shadcn/ui 组件 + Tailwind CSS utility-first styling 实现设计。
28. 集成 web-frameworks：用 Next.js（App Router、Server Components、SSR/SSG）构建。
29. 参考 references/design-resources.md 获取灵感平台、设计系统、AI 工具、MCP 集成、开发策略。
30. 原则：审美标准来自人类而非 AI，研究高质量示例。
31. 原则：基于分析迭代，不要满足于第一次输出。
32. 原则：平衡美观与功能、可访问性。
33. 原则：记录决策以保证开发一致性。
34. 原则：在设计中使用 progressive disclosure，逐步揭示复杂性。
35. 原则：始终客观评估审美质量（score ≥ 7/10）。

适用边界 · 注意事项

• 没有 chrome-devtools、ai-multimodal、Gemini API、media-processing、ui-styling、web-frameworks 等配套工具/API 时，无法完整执行截图分析、生图迭代和实现工作流。
• 任务不涉及 UI/UX 视觉设计、审美评估或设计文档时。
• 禁止使用外部 AI/生成式服务或不能调用 Gemini API 时。