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 - 叙事元素、基于滚动的叙事和交互技巧。

工作流

工作流 1：采集并分析灵感

目的：从灵感网站中提炼设计指南。

步骤：

1. 浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
2. 使用 chrome-devtools 技能截取全屏截图（而非整页截图）
3. 使用 ai-multimodal 技能分析截图并提取以下信息：
   • 设计风格（极简主义、玻璃拟态、新粗野主义等）
   • 布局结构和网格系统
   • 排版系统和层级 重要： 尝试预测给定截图中字体的名称（Google Fonts）和字号，不要只使用 Inter 或 Poppins。
   • 带十六进制代码的配色方案
   • 视觉层级技巧
   • 组件模式和样式
   • 微交互
   • 无障碍设计考量
   • 整体美学品质评分（1-10）
4. 使用模板将发现记录到项目设计指南中

工作流 2：生成并迭代设计图像

目的：通过迭代创建赏心悦目的设计图像。

步骤：

1. 编写设计提示词，明确风格、颜色、排版、受众和动画规格
2. 使用 ai-multimodal 技能通过 Gemini API 生成设计图像
3. 使用 ai-multimodal 技能分析输出图像并评估其美学品质
4. 如果评分 < 7/10 或未达到专业标准：
   • 找出具体不足之处（颜色、排版、布局、间距、层级）
   • 改进提示词
   • 使用 ai-multimodal 重新生成，或使用 media-processing 技能修改输出内容（调整大小、裁剪、应用滤镜、调整构图）
5. 重复以上步骤，直至达到美学标准（评分 ≥ 7/10）
6. 使用模板记录最终设计决策

设计文档

创建设计指南

使用 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 集成和开发策略。

核心原则

1. 美学标准源于人类，而非 AI——研究高质量示例
2. 根据分析结果迭代——不要满足于第一次输出
3. 兼顾美感、功能性与无障碍性
4. 记录决策，确保开发过程中的一致性
5. 在设计中采用渐进式披露——逐步展现复杂内容
6. 始终客观评估美学质量（评分 ≥ 7/10）