Back to Details

aesthetic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Aesthetic

美学界面设计

Create aesthetically beautiful interfaces by following proven design principles and systematic workflows. This skill combines design thinking, frontend implementation patterns, and comprehensive analysis techniques.
遵循经过验证的设计原则和系统化工作流，打造具有美学质感的精美界面。本技能融合了设计思维、前端实现模式与综合分析技巧。

When to Use This Skill

适用场景

Use when:
  • Building or designing user interfaces
  • Analyzing designs from inspiration websites (Dribbble, Mobbin, Behance)
  • Generating design images and evaluating aesthetic quality
  • Implementing visual hierarchy, typography, color theory
  • Adding micro-interactions and animations
  • Creating design documentation and style guides
  • Need guidance on accessibility and design systems
  • Building production-grade frontend interfaces with distinctive aesthetics
适用于以下场景：
  • 构建或设计用户界面
  • 分析灵感网站（Dribbble、Mobbin、Behance）上的设计作品
  • 生成设计图并评估美学质量
  • 实现视觉层级、排版设计与色彩理论
  • 添加微交互与动画效果
  • 创建设计文档与风格指南
  • 需要无障碍设计与设计系统相关指导
  • 构建具有独特美学风格的生产级前端界面

Core Philosophy

核心理念

Design Thinking First: Before coding, understand context and commit to a BOLD aesthetic direction. Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Evidence-Based Aesthetics: AI lacks aesthetic sense - standards must come from analyzing high-quality examples and aligning with market tastes. Study existing designs, identify patterns, extract principles.
Progressive Excellence: Start with BEAUTIFUL (aesthetics), ensure RIGHT (functionality/accessibility), add SATISFYING (micro-interactions), elevate with PEAK (storytelling).
设计思维优先：编码前，先理解上下文并确定明确的美学方向。选择清晰的概念方向并精准执行。大胆的极繁主义与精致的极简主义都可行——关键在于设计意图，而非风格强度。
基于实证的美学：AI缺乏审美感知——标准必须来自对高质量案例的分析并契合市场审美。研究现有设计，识别模式，提炼原则。
渐进式优化：从“美观”（美学）起步，确保“实用”（功能/无障碍），添加“愉悦”（微交互），最终升华为“极致”（叙事性）。

Quick Reference Framework

快速参考框架

1. BEAUTIFUL: Understanding Aesthetics

1. 美观：理解美学本质

Study existing designs, identify patterns, extract principles.
Reference: 
references/design-principles.md
- Load for visual hierarchy, typography, color theory, white space principles.
研究现有设计，识别模式，提炼原则。
参考文档：
references/design-principles.md
- 加载以获取视觉层级、排版、色彩理论、留白等设计原则。

2. RIGHT: Ensuring Functionality

2. 实用：保障功能可用

Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.
Reference: 
references/design-principles.md
- Load for design systems, component libraries, WCAG accessibility standards.
缺乏易用性的美观设计毫无价值。研究设计系统、组件架构与无障碍设计要求。
参考文档：
references/design-principles.md
- 加载以获取设计系统、组件库、WCAG无障碍标准。

3. SATISFYING: Micro-Interactions

3. 愉悦：打造微交互体验

Incorporate subtle animations with appropriate timing (150-300ms), easing curves (ease-out for entry, ease-in for exit), sequential delays.
Reference: 
references/micro-interactions.md
- Load for duration guidelines, easing curves, performance optimization.
融入具有合适时长（150-300毫秒）、缓动曲线（入场用ease-out，退场用ease-in）与顺序延迟的微妙动画。
参考文档：
references/micro-interactions.md
- 加载以获取时长指南、缓动曲线、性能优化建议。

4. PEAK: Storytelling Through Design

4. 极致：用设计讲述故事

Elevate with narrative elements - parallax effects, particle systems, thematic consistency. Use restraint: "too much of anything isn't good."
Reference: 
references/storytelling-design.md
- Load for narrative elements, scroll-based storytelling, interactive techniques.
通过叙事元素提升设计——视差效果、粒子系统、主题一致性。注意克制：“过犹不及”。
参考文档：
references/storytelling-design.md
- 加载以获取叙事元素、滚动式叙事、交互技巧。

Frontend Implementation Guidelines

前端实现指南

Typography

排版设计

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.
选择美观、独特且有特色的字体。避免使用Arial、Inter等通用字体。将独特的标题字体与精致的正文字体搭配使用。

Color & Theme

色彩与主题

Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
坚持连贯的美学风格。使用CSS变量确保一致性。主色调搭配鲜明的强调色，效果优于平淡、均匀分布的调色板。

Motion & Animation

动效与动画

Use animations for effects and micro-interactions. Prioritize CSS-only solutions. Use anime.js for complex animations.
Reference: 
references/animejs.md
- Load when implementing anime.js v4 animations.
将动画用于特效与微交互。优先选择纯CSS方案。复杂动画使用anime.js实现。
参考文档：
references/animejs.md
- 实现anime.js v4动画时加载。

Spatial Composition

空间布局

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
采用出人意料的布局、不对称设计、元素重叠、斜向流动、打破网格的元素。使用充足的留白或受控的密度。

Backgrounds & Visual Details

背景与视觉细节

Create atmosphere and depth. Add contextual effects and textures: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
Reference: 
references/implementation-guide.md
- Load for detailed frontend design execution patterns.
营造氛围与深度。添加上下文效果与纹理：渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加层。
参考文档：
references/implementation-guide.md
- 加载以获取详细的前端设计执行模式。

Workflows

工作流程

Workflow 1: Capture & Analyze Inspiration

工作流1：捕获与分析设计灵感

Extract design guidelines from inspiration websites:
  1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
  2. Use chrome-devtools skill to capture full-screen screenshots
  3. Use ai-multimodal skill to analyze and extract design patterns
  4. Document findings in project design guidelines
Reference: 
references/workflows.md
- Load for complete workflow steps and analysis checklist.
从灵感网站提取设计指南：
  1. 浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
  2. 使用chrome-devtools技能捕获全屏截图
  3. 使用ai-multimodal技能分析并提取设计模式
  4. 将发现记录到项目设计指南中
参考文档：
references/workflows.md
- 加载以获取完整的工作流步骤与分析清单。

Workflow 2: Generate & Iterate Design Images

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

Create aesthetically pleasing designs through iteration:
  1. Define design prompt with style, colors, typography, audience
  2. Use ai-multimodal skill to generate design images
  3. Evaluate aesthetic quality (must score >= 7/10)
  4. Iterate until professional standards met
  5. Document final design decisions
Reference: 
references/workflows.md
- Load for complete iteration process and quality standards.
通过迭代创建美观的设计：
  1. 定义包含风格、色彩、排版、受众的设计提示词
  2. 使用ai-multimodal技能生成设计图
  3. 评估美学质量（得分需≥7/10）
  4. 迭代直至达到专业标准
  5. 记录最终设计决策
参考文档：
references/workflows.md
- 加载以获取完整的迭代流程与质量标准。

Design Documentation

设计文档

Create Design Guidelines

创建设计指南

Use 
assets/design-guideline-template.md
to document:
  • Color patterns & psychology
  • Typography system & hierarchy
  • Layout principles & spacing
  • Component styling standards
  • Accessibility considerations
  • Design highlights & rationale
Save in project 
./docs/design-guideline.md
.
使用
assets/design-guideline-template.md
记录以下内容：
  • 色彩方案与心理学
  • 排版系统与层级
  • 布局原则与间距
  • 组件样式标准
  • 无障碍设计考量
  • 设计亮点与设计依据
保存至项目
./docs/design-guideline.md
。

Create Design Story

创建设计叙事

Use 
assets/design-story-template.md
to document:
  • Narrative elements & themes
  • Emotional journey
  • User journey & peak moments
  • Design decision rationale
Save in project 
./docs/design-story.md
.
使用
assets/design-story-template.md
记录以下内容：
  • 叙事元素与主题
  • 情感体验旅程
  • 用户旅程与峰值时刻
  • 设计决策依据
保存至项目
./docs/design-story.md
。

Anti-Patterns: Avoid Generic AI Aesthetics

反模式：规避通用AI美学风格

NEVER use:
  • Overused font families (Inter, Roboto, Arial, system fonts)
  • Cliched color schemes (particularly purple gradients on white backgrounds)
  • Predictable layouts and component patterns
  • Cookie-cutter design that lacks context-specific character
Variation Principle: No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
切勿使用：
  • 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
  • 陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）
  • 可预测的布局与组件模式
  • 缺乏特定上下文特色的千篇一律设计
变化原则：没有任何两个设计应该相同。在亮色与暗色主题、不同字体、不同美学风格之间切换。切勿在多个版本中使用相同的选择（例如Space Grotesk）。

Implementation Complexity Matching

实现复杂度匹配

Match implementation complexity to the aesthetic vision:
  • Maximalist designs: Need elaborate code with extensive animations and effects
  • Minimalist/refined designs: Need restraint, precision, careful attention to spacing, typography, and subtle details
  • Elegance: Comes from executing the vision well
使实现复杂度与美学愿景相匹配：
  • 极繁主义设计：需要包含大量动画与效果的复杂代码
  • 极简主义/精致设计：需要克制、精准，注重间距、排版与细节处理
  • 优雅感：来自对愿景的完美执行

Related Skills Integration

相关技能集成

  • ai-multimodal: Analyze documents, screenshots & videos, generate design images, evaluate aesthetic quality using Gemini API
  • chrome-devtools: Capture screenshots from inspiration websites, navigate pages, interact with elements
  • media-processing: Refine generated images (FFmpeg for video, ImageMagick for images)
  • ui-styling: Implement designs with shadcn/ui components + Tailwind CSS
  • web-frameworks: Build with Next.js, React, Vue
Reference: 
references/design-resources.md
- Load for inspiration platforms, design systems, AI tools, MCP integrations.
  • 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集成资源。

Key Principles

核心原则

  1. Aesthetic standards come from humans, not AI - study quality examples
  2. Choose a BOLD aesthetic direction and execute with precision
  3. Iterate based on analysis - never settle for first output (minimum 7/10 quality)
  4. Balance beauty with functionality and accessibility
  5. Document decisions for consistency across development
  6. Use progressive disclosure in design - reveal complexity gradually
  7. Match implementation complexity to aesthetic vision
  8. Avoid generic AI aesthetics - create context-specific character
  1. 美学标准来自人类而非AI——研究高质量案例
  2. 选择明确的美学方向并精准执行
  3. 基于分析进行迭代——绝不满足于首次输出（质量最低需达到7/10）
  4. 在美观性与功能、无障碍设计之间取得平衡
  5. 记录决策以确保开发过程中的一致性
  6. 在设计中使用渐进式披露——逐步展示复杂度
  7. 使实现复杂度与美学愿景相匹配
  8. 规避通用AI美学风格——打造具有特定上下文特色的设计

Code Quality Standards

代码质量标准

Implement working code that is:
  • Production-grade and functional
  • Visually striking and memorable
  • Cohesive with a clear aesthetic point-of-view
  • Meticulously refined in every detail
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
实现满足以下要求的可运行代码：
  • 生产级且功能完整
  • 视觉冲击力强且令人难忘
  • 风格统一，具有明确的美学视角
  • 每个细节都经过精心打磨
谨记：Claude能够完成非凡的创意工作。不要局限自己，大胆展示跳出常规、全力投入独特愿景所能创造的成果。