aesthetic

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：捕获并分析灵感

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

步骤：浏览灵感网站（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）。

技能介绍