name: 美学 description: 创建美观的界面，遵循经过验证的设计原则。用于构建UI/UX、分析灵感网站的设计、使用ai-multimodal生成设计图像、实施视觉层次和色彩理论、添加微交互或创建设计文档。包括工作流：使用chrome-devtools和ai-multimodal捕获和分析灵感截图，迭代生成设计图像直到满足美学标准，以及全面的设计系统指导，覆盖BEAUTIFUL（美学原则）、RIGHT（功能性/可访问性）、SATISFYING（微交互）和PEAK（故事讲述）阶段。集成chrome-devtools、ai-multimodal、media-processing、ui-styling和web-frameworks技能。

美学

通过遵循经过验证的设计原则和系统工作流创建美观的界面。

使用时机

用于：

构建或设计用户界面
分析灵感网站（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 - 叙事元素、基于滚动的故事讲述、交互技术。

工作流

工作流1: 捕获与分析灵感

目的: 从灵感网站提取设计指南。

步骤:

浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
使用chrome-devtools技能捕获全屏截图（不是整页）
使用ai-multimodal技能分析截图并提取：
- 设计风格（极简主义、玻璃拟态、新粗野主义等）
- 布局结构 & 网格系统
- 字体排版系统 & 层次 重要： 尝试预测字体名称（Google Fonts）和字体大小，不要只使用Inter或Poppins。
- 颜色调色板（带十六进制代码）
- 视觉层次技术
- 组件模式 & 样式
- 微交互
- 可访问性考虑
- 整体美学质量评分（1-10）
使用模板在项目设计指南中记录发现

工作流2: 生成与迭代设计图像

目的: 通过迭代创建美观的设计图像。

步骤:

定义设计提示：包括风格、颜色、字体排版、受众、动画规格
使用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。

资源与集成

参考文档

参考: references/design-resources.md - 灵感平台、设计系统、AI工具、MCP集成、开发策略。

关键原则

美学标准来自人类，而非AI——研究高质量示例
基于分析迭代——绝不满足于首次输出
平衡美丽与功能和可访问性
记录决策以确保开发一致性
在设计中逐步揭露——逐渐揭示复杂性
始终客观评估美学质量（评分 ≥ 7/10）

界面美学设计Skill aesthetic

美学