Back to Details

aesthetic-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Aesthetic System

美学系统

Phase 0: Research & Delegation (MANDATORY)

阶段0：研究与任务分配（强制要求）

Step 1: Gemini Research

步骤1：Gemini调研

Before ANY frontend work, get design direction from Gemini:
bash
gemini -p "I'm building [describe component/page]. Research:
1. Distinctive design approaches (avoid AI-slop aesthetics)
2. Real-world examples of excellent [component type]
3. Current typography/color/layout trends for this context
4. Unexpected alternatives to obvious solutions"
Why mandatory: Web grounding surfaces current trends, prevents convergence.
开展任何前端工作前，务必先从Gemini获取设计方向：
bash
gemini -p "I'm building [describe component/page]. Research:
1. Distinctive design approaches (avoid AI-slop aesthetics)
2. Real-world examples of excellent [component type]
3. Current typography/color/layout trends for this context
4. Unexpected alternatives to obvious solutions"
为何强制要求： 基于网络的调研能呈现当前趋势，避免设计趋同。

Step 2: Kimi Implementation (MANDATORY)

步骤2：Kimi实现（强制要求）

All frontend implementation MUST be delegated to Kimi K2.5 via MCP.
Kimi excels at frontend development and visual coding:
javascript
// Single component/page implementation
mcp__kimi__spawn_agent({
  prompt: `Implement [component] following these aesthetics:
- Typography: ${typography}
- Colors: ${palette}
- Layout: ${layoutDirection}
- Motion: ${motionGuidelines}
Constraints: Apply ui-skills rules. No Inter/Roboto. No purple gradients.
Output: React/Tailwind component in ${targetPath}`,
  thinking: true  // For complex implementations
})

// Parallel implementation (multiple components)
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Implement Hero section...", thinking: true },
    { prompt: "Implement Card component...", thinking: true },
    { prompt: "Implement Navigation...", thinking: true },
  ]
})
Workflow:
  1. Research direction → Gemini (web grounding, trends)
  2. Implement visuals → Kimi (Agent Swarm, parallel execution)
  3. Review quality → Claude (expert panel, quality gates)
Anti-pattern: Implementing frontend yourself instead of delegating to Kimi. Pattern: Research (Gemini) → Build (Kimi) → Review (Claude)
所有前端实现工作必须通过MCP委托给Kimi K2.5完成。
Kimi擅长前端开发与可视化编码：
javascript
// Single component/page implementation
mcp__kimi__spawn_agent({
  prompt: `Implement [component] following these aesthetics:
- Typography: ${typography}
- Colors: ${palette}
- Layout: ${layoutDirection}
- Motion: ${motionGuidelines}
Constraints: Apply ui-skills rules. No Inter/Roboto. No purple gradients.
Output: React/Tailwind component in ${targetPath}`,
  thinking: true  // For complex implementations
})

// Parallel implementation (multiple components)
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Implement Hero section...", thinking: true },
    { prompt: "Implement Card component...", thinking: true },
    { prompt: "Implement Navigation...", thinking: true },
  ]
})
工作流程：
  1. 调研方向 → Gemini（基于网络，获取趋势）
  2. 视觉实现 → Kimi（Agent集群，并行执行）
  3. 质量评审 → Claude（专家评审，质量把关）
反模式： 自行实现前端功能而非委托给Kimi。 正确模式： 调研（Gemini）→ 开发（Kimi）→ 评审（Claude）

Design Thinking

设计思路

Before coding, commit to a BOLD aesthetic direction:
  1. Purpose: What problem? Who uses it?
  2. Tone: Pick extreme (brutalist, luxury, playful, editorial, organic...)
  3. Differentiation: What's the ONE thing someone will remember?
CRITICAL: Bold maximalism and refined minimalism both work—the key is intentionality.
编码前，确定明确的大胆审美方向：
  1. 目标： 解决什么问题？用户是谁？
  2. 风格基调： 选择极端风格（粗野主义、奢华风、趣味风、编辑风、自然风等）
  3. 差异化： 什么是用户会记住的核心亮点？
重要提示： 大胆的极繁主义与精致的极简主义都可行——关键是设计意图明确。

Core Principles

核心原则

  • Typography: Distinctive fonts, not Inter/Roboto/Space Grotesk
  • Color: Dominant + accent, brand-tinted neutrals, no pure grays
  • Motion: One orchestrated moment > scattered micro-interactions
  • Layout: Asymmetry, overlap, diagonal flow, grid-breaking
  • Backgrounds: Gradients, noise, patterns—not solid colors
See: 
references/aesthetics-guidelines.md
  • 排版： 使用独特字体，禁止使用Inter/Roboto/Space Grotesk
  • 色彩： 主色+强调色，带品牌色调的中性色，禁止纯灰色
  • 动效： 统一协调的动效优于零散的微交互
  • 布局： 不对称、重叠、斜向流动、打破网格
  • 背景： 使用渐变、噪点、图案——而非纯色
另见：
references/aesthetics-guidelines.md

Quality Bar: Stripe-Level Excellence

质量标准：达到Stripe级别的卓越水准

Reference these as quality exemplars:
  • Stripe: Obsessive typography, micro-interactions, developer delight
  • Linear: Keyboard-first, performance as design, smooth motion
  • Vercel: Minimalist clarity, dramatic contrast, confident hierarchy
The Gasp Test: Would users gasp at how stunning this is? If no, keep iterating.
Quality Checkpoints:
  • Typography that makes people stop and notice
  • Layout that surprises with intentionality
  • Motion that feels physically satisfying
  • Details that show obsessive care
  • Mobile experience that doesn't "suck"
以下作为质量参考范例：
  • Stripe： 极致的排版、微交互、开发者友好体验
  • Linear： 键盘优先、性能即设计、流畅动效
  • Vercel： 极简清晰、强烈对比、明确的层级结构
惊叹测试： 用户看到时会惊叹其惊艳程度吗？如果不会，继续迭代。
质量检查点：
  • 排版足够引人注目
  • 布局设计有意料之外的巧思
  • 动效符合物理直觉，体验舒适
  • 细节处体现极致用心
  • 移动端体验不“拉胯”

Mobile Excellence (Separate Optimization)

移动端卓越体验（单独优化）

Mobile is NOT just responsive—it requires separate design thinking.
移动端并非只是响应式设计——需要独立的设计思路。

Touch Libraries to Consider

可考虑的触摸交互库

  • @use-gesture/react: Touch, mouse, drag, pinch gestures unified
  • react-spring: Gesture-aware animations with physical springs
  • swiper: Touch slider with native feel
  • framer-motion: Gesture recognition + animation
  • @capacitor/haptics: Haptics for Capacitor/mobile apps
  • @use-gesture/react： 统一处理触摸、鼠标、拖拽、捏合手势
  • react-spring： 基于物理弹簧模型的手势感知动画
  • swiper： 原生质感的触摸滑块
  • framer-motion： 手势识别+动画
  • @capacitor/haptics： 为Capacitor/移动应用提供触觉反馈

Mobile-Specific Quality Checks

移动端专属质量检查

  • Touch targets: 44x44px minimum (Apple HIG)
  • Swipe gestures: Natural, discoverable, satisfying
  • Haptic feedback: Confirm actions with tactile response
  • Pull-to-refresh: Physical bounce, not instant
  • Bottom navigation: Thumb-reachable actions
  • Momentum scrolling: Physics-based scroll
See: 
references/mobile-excellence.md
  • 触摸目标：最小44x44px（符合Apple HIG规范）
  • 滑动手势：自然、易发现、体验舒适
  • 触觉反馈：用触感确认操作完成
  • 下拉刷新：带物理回弹效果，而非瞬间完成
  • 底部导航：拇指可触及的操作区域
  • 动量滚动：基于物理规律的滚动效果
另见：
references/mobile-excellence.md

Anti-Convergence

避免趋同

YOU TEND TOWARD GENERIC OUTPUTS. Before implementing, ask:
  • "Have I used this font/color/layout recently?"
  • "What's a distinctive alternative?"
  • "Does this feel unique to THIS project?"
Vary every project: light/dark, font pairings, aesthetics, color approach.
See: 
references/anti-patterns.md
你容易陷入通用化输出的误区。 实现前请自问：
  • “我最近是否使用过这种字体/颜色/布局？”
  • “有什么独特的替代方案？”
  • “这个设计是否为本项目独有？”
每个项目都要做出变化： 明暗模式、字体搭配、审美风格、色彩方案。
另见：
references/anti-patterns.md

Advanced Techniques

进阶技术

When basic CSS isn't enough:
  • WebGL/Three.js: Living backgrounds, gradient meshes
  • GSAP/Framer Motion: Complex animation sequences
  • CSS Art: Pure CSS illustrations, clip-path magic
  • ASCII: Terminal/brutalist aesthetics
  • Iconify: 200k+ icons when Lucide isn't enough
See: 
references/advanced-techniques.md
当基础CSS无法满足需求时：
  • WebGL/Three.js： 动态背景、渐变网格
  • GSAP/Framer Motion： 复杂动画序列
  • CSS艺术： 纯CSS插画、clip-path特效
  • ASCII： 终端/粗野主义风格
  • Iconify： 当Lucide图标不足时，提供20万+图标选择
另见：
references/advanced-techniques.md

Iterative Polish Pattern

迭代润色模式

For incremental refinement after initial build:
Quick passes (run 
/polish pass
repeatedly):
  • Each pass makes ONE high-impact change
  • Compound improvements over 10+ passes
  • Separate desktop/mobile analysis each time
  • Stream Deck / macro friendly
Full polish (run 
/polish
):
  • Multi-agent Design Council critique
  • 5 automated iterations with quality threshold
  • Use for foundation establishment or comprehensive audit
Overhaul mode (say "it sucks" or "overhaul"):
  • Aggressive transformation, no preservation instinct
  • Forces greenfield treatment regardless of maturity
  • 8 iterations max, dramatic improvements
初始开发完成后，进行增量式优化：
快速迭代（重复运行
/polish pass
）：
  • 每次迭代只做一项高影响力的修改
  • 经过10+次迭代后积累显著改进
  • 每次分别分析桌面端与移动端
  • 适配Stream Deck/宏命令，提升效率
全面润色（运行
/polish
）：
  • 多Agent设计委员会评审
  • 基于质量阈值的5次自动化迭代
  • 用于基础架构搭建或全面审计
彻底重构模式（输入“it sucks”或“overhaul”）：
  • 激进的转型，摒弃保留现有内容的思维
  • 无论项目成熟度如何，都按全新项目处理
  • 最多8次迭代，实现大幅改进

References

参考文档

  • references/implementation-constraints.md
    - MUST/NEVER rules for implementation (stack, components, animation, performance)
  • references/aesthetics-guidelines.md
    - Typography, color, motion, spatial composition
  • references/advanced-techniques.md
    - WebGL, animations, CSS art, icons, asset generation
  • references/anti-patterns.md
    - AI slop to avoid, convergence traps, variation mandate
  • references/dna-codes.md
    - DNA variation system for structural variety
  • references/banned-patterns.md
    - Explicit banned elements (hero badges, generic fonts, etc.)
  • references/browser-helpers.md
    - Browser automation for Coolors, Google Fonts, inspiration
  • references/implementation-constraints.md
    - 实现规则（必须/禁止）（技术栈、组件、动画、性能）
  • references/aesthetics-guidelines.md
    - 排版、色彩、动效、空间构图
  • references/advanced-techniques.md
    - WebGL、动画、CSS艺术、图标、资源生成
  • references/anti-patterns.md
    - 需避免的AI模板化设计、趋同陷阱、多样化要求
  • references/dna-codes.md
    - 用于结构多样化的DNA变体系统
  • references/banned-patterns.md
    - 明确禁止的元素（Hero徽章、通用字体等）
  • references/browser-helpers.md
    - 浏览器自动化工具，用于Coolors、Google Fonts、灵感收集