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.
遵循经过验证的设计原则和系统化工作流，创建具有美学美感的界面。

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
适用于以下场景：
  • 构建或设计用户界面
  • 分析灵感网站（Dribbble、Mobbin、Behance）的设计
  • 生成设计图并评估美学质量
  • 实现视觉层次、排版、色彩理论
  • 添加微交互和动画
  • 创建设计文档和样式指南
  • 需要可访问性和设计系统相关指导

Core Framework: Four-Stage Approach

核心框架：四阶段方法

1. BEAUTIFUL: Understanding Aesthetics

1. BEAUTIFUL：理解美学

Study existing designs, identify patterns, extract principles. AI lacks aesthetic sense—standards must come from analyzing high-quality examples and aligning with market tastes.
Reference: 
references/design-principles.md
 - Visual hierarchy, typography, color theory, white space principles.
研究现有设计，识别模式，提炼原则。AI缺乏审美能力——标准必须来自对高质量案例的分析，并与市场品味保持一致。
参考文档：
references/design-principles.md
 - 视觉层次、排版、色彩理论、留白原则。

2. RIGHT: Ensuring Functionality

2. RIGHT：确保功能性

Beautiful designs lacking usability are worthless. Study design systems, component architecture, accessibility requirements.
Reference: 
references/design-principles.md
 - Design systems, component libraries, WCAG accessibility standards.
缺乏可用性的美观设计毫无价值。研究设计系统、组件架构、可访问性要求。
参考文档：
references/design-principles.md
 - 设计系统、组件库、WCAG可访问性标准。

3. SATISFYING: Micro-Interactions

3. SATISFYING：微交互

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
 - Duration guidelines, easing curves, performance optimization.
融入具有合适时长（150-300毫秒）、缓动曲线（进入时使用ease-out，退出时使用ease-in）、顺序延迟的微妙动画。
参考文档：
references/micro-interactions.md
 - 时长指南、缓动曲线、性能优化。

4. PEAK: Storytelling Through Design

4. PEAK：通过设计讲述故事

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

Workflows

工作流

Workflow 1: Capture & Analyze Inspiration

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

Purpose: Extract design guidelines from inspiration websites.
Steps:
  1. Browse inspiration sites (Dribbble, Mobbin, Behance, Awwwards)
  2. Use chrome-devtools skill to capture full-screen screenshots (not full page)
  3. Use ai-multimodal skill to analyze screenshots and extract:
    • Design style (Minimalism, Glassmorphism, Neo-brutalism, etc.)
    • Layout structure & grid systems
    • Typography system & hierarchy IMPORTANT: Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
    • Color palette with hex codes
    • Visual hierarchy techniques
    • Component patterns & styling
    • Micro-interactions
    • Accessibility considerations
    • Overall aesthetic quality rating (1-10)
  4. Document findings in project design guidelines using templates
目的：从灵感网站提取设计指南。
步骤：
  1. 浏览灵感网站（Dribbble、Mobbin、Behance、Awwwards）
  2. 使用chrome-devtools技能捕获全屏截图（非整页截图）
  3. 使用ai-multimodal技能分析截图并提取以下信息：
    • 设计风格（极简主义、毛玻璃效果、新粗野主义等）
    • 布局结构与网格系统
    • 排版系统与层次结构 重要提示：尝试预测截图中的字体名称（Google Fonts）和字体大小，不要仅使用Inter或Poppins。
    • 带十六进制代码的调色板
    • 视觉层次技巧
    • 组件模式与样式
    • 微交互
    • 可访问性考量
    • 整体美学质量评分（1-10分）
  4. 使用模板将研究结果记录到项目设计指南中

Workflow 2: Generate & Iterate Design Images

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

Purpose: Create aesthetically pleasing design images through iteration.
Steps:
  1. Define design prompt with: style, colors, typography, audience, animation specs
  2. Use ai-multimodal skill to generate design images with Gemini API
  3. Use ai-multimodal skill to analyze output images and evaluate aesthetic quality
  4. If score < 7/10 or fails professional standards:
    • Identify specific weaknesses (color, typography, layout, spacing, hierarchy)
    • Refine prompt with improvements
    • Regenerate with ai-multimodal or use media-processing skill to modify outputs (resize, crop, filters, composition)
  5. Repeat until aesthetic standards met (score ≥ 7/10)
  6. Document final design decisions using templates
目的：通过迭代创建具有美学吸引力的设计图。
步骤：
  1. 定义包含以下内容的设计提示词：风格、色彩、排版、受众、动画规格
  2. 使用ai-multimodal技能通过Gemini API生成设计图
  3. 使用ai-multimodal技能分析输出的设计图并评估美学质量
  4. 如果评分<7/10或未达到专业标准：
    • 识别具体缺陷（色彩、排版、布局、间距、层次结构）
    • 优化提示词以改进设计
    • 使用ai-multimodal重新生成，或使用media-processing技能修改输出结果（调整大小、裁剪、滤镜、构图）
  5. 重复以上步骤直至达到美学标准（评分≥7/10）
  6. 使用模板记录最终设计决策

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
中。

Resources & Integration

资源与集成

Related Skills

相关技能

  • ai-multimodal: Analyze documents, screenshots & videos, generate design images, edit generated images, evaluate aesthetic quality using Gemini API
  • chrome-devtools: Capture full-screen screenshots from inspiration websites, navigate between pages, interact with elements, read console logs & network requests
  • media-processing: Refine generated images (FFmpeg for video, ImageMagick for images)
  • ui-styling: Implement designs with shadcn/ui components + Tailwind CSS utility-first styling
  • web-frameworks: Build with Next.js (App Router, Server Components, SSR/SSG)
  • 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）进行构建

Reference Documentation

参考文档

References: 
references/design-resources.md
 - Inspiration platforms, design systems, AI tools, MCP integrations, development strategies.
参考资源：
references/design-resources.md
 - 灵感平台、设计系统、AI工具、MCP集成、开发策略。

Key Principles

核心原则

  1. Aesthetic standards come from humans, not AI—study quality examples
  2. Iterate based on analysis—never settle for first output
  3. Balance beauty with functionality and accessibility
  4. Document decisions for consistency across development
  5. Use progressive disclosure in design—reveal complexity gradually
  6. Always evaluate aesthetic quality objectively (score ≥ 7/10)
  1. 美学标准来自人类而非AI——研究高质量案例
  2. 基于分析进行迭代——绝不满足于首次输出
  3. 平衡美感与功能性、可访问性
  4. 记录决策以确保开发过程中的一致性
  5. 在设计中使用渐进式披露——逐步展示复杂内容
  6. 始终客观评估美学质量（评分≥7/10）