aesthetic

Aesthetic

遵循经过验证的设计原则和系统化工作流，打造美观出众的界面。此技能结合了设计思维、前端实现模式和全面的分析技巧。

何时使用此技能

适用于：

• 构建或设计用户界面
• 分析灵感网站上的设计（Dribbble、Mobbin、Behance）
• 生成设计图并评估美学质量
• 实现视觉层级、排版和色彩理论
• 添加微交互和动画
• 创建设计文档和风格指南
• 需要无障碍设计和设计系统方面的指导
• 构建具有鲜明美学风格的生产级前端界面

核心理念

先思考设计：编码前，先理解背景并确定一种大胆的美学方向。选择清晰的概念方向，并精准执行。大胆繁复与精致极简都行得通——关键在于有意为之，而非追求强烈效果。

以证据为基础的美学：AI 缺乏审美能力，因此标准必须来自对高质量示例的分析，并与市场审美取向保持一致。研究现有设计，识别模式，提炼原则。

循序渐进，追求卓越：先做到美观（美学），再确保正确（功能与无障碍），然后增加令人满意的体验（微交互），最后以巅峰表现提升效果（叙事）。

快速参考框架

1. 美观：理解美学

研究现有设计，识别模式，提炼原则。

参考：references/design-principles.md——了解视觉层级、排版、色彩理论和留白原则。

2. 正确：确保功能完善

缺乏易用性的美观设计毫无价值。研究设计系统、组件架构和无障碍要求。

参考：references/design-principles.md——了解设计系统、组件库和 WCAG 无障碍标准。

3. 令人满意：微交互

加入细腻的动画，并采用恰当的时长（150-300ms）、缓动曲线（进入时 ease-out，退出时 ease-in）和连续延迟。

参考：references/micro-interactions.md——了解时长指南、缓动曲线和性能优化。

4. 巅峰：通过设计讲述故事

通过叙事元素提升体验——视差效果、粒子系统和主题一致性。注意克制：“任何东西过量都不好。”

参考：references/storytelling-design.md——了解叙事元素、基于滚动的叙事和交互技巧。

前端实现指南

排版

选择美观、独特且有趣的字体。避免使用 Arial 和 Inter 这类常见字体。将鲜明的展示字体与精致的正文字体搭配使用。

色彩与主题

坚持统一的美学风格。使用 CSS 变量保持一致性。以主色为主、搭配醒目点缀色的配色方案，胜过平淡且均匀分布的调色板。

动效与动画

使用动画实现特效和微交互。优先采用纯 CSS 方案。复杂动画可使用 anime.js。

参考：references/animejs.md——实现 anime.js v4 动画时加载。

空间构图

采用出人意料的布局、不对称、重叠、对角线流动、打破网格的元素。留出充足的负空间，或采用可控的密集布局。

背景与视觉细节

营造氛围和纵深感。添加符合主题的效果和纹理：渐变网格、噪点纹理、几何图案、多层透明效果、戏剧化阴影、装饰边框、自定义光标、颗粒叠加效果。

参考：references/implementation-guide.md——了解详细的前端设计执行模式。

工作流

工作流 1：捕捉并分析灵感

从灵感网站中提取设计指南：

1. 浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
2. 使用 chrome-devtools 技能截取全屏截图
3. 使用 ai-multimodal 技能分析并提取设计模式
4. 将发现记录到项目设计指南中

参考：references/workflows.md — 加载以查看完整工作流步骤和分析清单。

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

通过迭代创作美观的设计：

1. 制定设计提示词，明确风格、颜色、字体和受众
2. 使用 ai-multimodal 技能生成设计图像
3. 评估美学质量（必须达到 7/10 或更高）
4. 持续迭代，直至符合专业标准
5. 记录最终设计决策

参考：references/workflows.md — 加载以查看完整的迭代流程和质量标准。

设计文档

创建设计指南

使用 assets/design-guideline-template.md 记录：

• 色彩模式与心理效应
• 字体系统与层级
• 布局原则与间距
• 组件样式标准
• 无障碍考量
• 设计亮点与理由

保存到项目的 ./docs/design-guideline.md。

创建设计故事

使用 assets/design-story-template.md 记录：

• 叙事元素与主题
• 情感历程
• 用户旅程与关键时刻
• 设计决策理由

保存到项目的 ./docs/design-story.md。

反模式：避免千篇一律的 AI 美学

绝不使用：

• 用得过多的字体系列（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预见的布局和组件模式
• 缺乏特定情境特色的模板化设计

多样性原则：每种设计都应有所不同。在浅色和深色主题、不同字体和不同美学风格之间变化。绝不要在多次生成中趋同于常见选择（例如 Space Grotesk）。

匹配实现复杂度

让实现复杂度与美学构想相匹配：

• 极繁主义设计：需要精细复杂的代码，并加入丰富的动画和效果
• 极简／精致设计：需要克制、精准，并仔细关注间距、字体和细微细节
• 优雅：源于对设计构想的出色呈现

相关技能集成

• ai-multimodal：分析文档、截图和视频；生成设计图像；使用 Gemini API 评估美学质量
• chrome-devtools：截取灵感网站的截图、浏览页面、与元素交互
• media-processing：优化生成的图像（视频使用 FFmpeg，图像使用 ImageMagick）
• ui-styling：使用 shadcn/ui 组件和 Tailwind CSS 实现设计
• web-frameworks：使用 Next.js、React、Vue 构建

参考：references/design-resources.md — 加载以查看灵感平台、设计系统、AI 工具和 MCP 集成。

核心原则

1. 美学标准来自人类，而非 AI——研究优质范例
2. 选择大胆的美学方向，并精准呈现
3. 根据分析结果迭代——绝不满足于首次输出（质量至少达到 7/10）
4. 平衡美感、功能性与无障碍性
5. 记录决策，确保开发过程中的一致性
6. 在设计中使用渐进式披露——逐步展现复杂性
7. 让实现复杂度与美学构想相匹配
8. 避免千篇一律的 AI 美学——打造贴合具体情境的特色

代码质量标准

实现可运行且符合以下要求的代码：

• 达到生产级质量且功能完善
• 视觉效果出众且令人难忘
• 风格统一，具有鲜明的美学立场
• 精心打磨每一处细节

请记住：Claude 能够完成非凡的创意工作。不要有所保留——跳出框架思考，并全力贯彻独特构想，展现真正能够创造出的成果。