Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Skill

Frontend Design 技能

Create distinctive, production-grade UI that stands out from generic AI-generated interfaces.
Official Plugin Available: Install 
frontend-design@claude-code-plugins
from the Anthropic marketplace for auto-invocation on frontend tasks. This skill provides extended guidance beyond the official version.
打造独特的生产级UI界面，摆脱通用AI生成界面的同质化困境。
官方插件已上线：可从Anthropic应用市场安装
frontend-design@claude-code-plugins
，用于前端任务的自动调用。本技能提供了超出官方版本的扩展指导内容。

Core Philosophy

核心理念

Most AI-generated UIs suffer from "AI slop" - they're technically correct but visually bland. This skill helps you break that pattern by making bold aesthetic choices that give your interface a distinctive personality.
多数AI生成的UI界面都存在“AI流水线产物”问题——技术层面无错误，但视觉效果乏味。本技能通过做出大胆的美学选择，帮助你打破这一模式，为界面赋予独特的个性。

The Five Pillars

五大核心支柱

1. Typography with Character

1. 富有个性的排版设计

Avoid: Inter, Arial, Roboto, system-ui (the default AI choices)
Instead: Commit to distinctive font stacks that vary by project tone:
  • Display: Clash Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Archivo
  • Body: Outfit, Plus Jakarta Sans, Switzer, Geist
  • Mono: JetBrains Mono, Geist Mono, IBM Plex Mono
Key principle: NEVER use the same fonts across different projects. Each design should feel genuinely different.
规避：Inter、Arial、Roboto、system-ui（AI默认选择的字体）
推荐：根据项目风格选用独特的字体组合：
  • 标题字体：Clash Display, Cabinet Grotesk, Satoshi, General Sans, Syne, Archivo
  • 正文字体：Outfit, Plus Jakarta Sans, Switzer, Geist
  • 等宽字体：JetBrains Mono, Geist Mono, IBM Plex Mono
核心原则：绝不在不同项目中使用相同的字体。每个设计都应具备独特的视觉感受。

2. Intentional Color Palettes

2. 精心调配的色彩方案

Avoid: Default Tailwind colors, basic blue buttons, gray backgrounds
Create signature palettes with:
  • Semantic tokens (primary, accent, neutral, surface)
  • HSL for easier manipulation
  • Subtle hue shifts in neutrals (warm stone, cool slate)
  • Gradients as primary colors
规避：默认Tailwind色彩、基础蓝色按钮、灰色背景
打造专属色彩方案的方法：
  • 使用语义化令牌（primary, accent, neutral, surface）
  • 采用HSL色彩模型以便于调整
  • 中性色的细微色调变化（暖石色、冷石板色）
  • 将渐变作为主色调

3. Bold Spatial Composition

3. 大胆的空间布局

Avoid: Everything centered, symmetric, grid-locked
Break the grid intentionally:
  • Use negative space as a design element
  • Overlap elements to create depth
  • Break alignment rules purposefully
  • Use 
    clamp()
    for fluid typography
规避：所有元素居中、对称、严格受网格束缚
刻意打破网格限制：
  • 将留白作为设计元素
  • 元素叠加营造层次感
  • 有意打破对齐规则
  • 使用
    clamp()
    实现流式排版

4. Motion as Personality

4. 赋予动画以个性

Avoid: No animations or generic fade-in
Add purposeful motion:
  • Spring physics (not linear easing)
  • Staggered entrances
  • Subtle blur transitions
  • Responsive hover states
  • Respect 
    prefers-reduced-motion
规避：无动画效果或通用淡入动画
添加有意义的动画：
  • 弹簧物理效果（而非线性缓动）
  • 错落有致的入场动画
  • 微妙的模糊过渡
  • 响应式悬停状态
  • 遵循
    prefers-reduced-motion
    （减少动画偏好设置）

5. Production-Grade Implementation

5. 生产级落地实现

Requirements:
  • TypeScript with proper types
  • Accessibility (focus states, ARIA, keyboard nav)
  • Loading states
  • Error boundaries
  • Responsive design
  • Performance optimization
要求：
  • 带完整类型定义的TypeScript
  • 无障碍适配（焦点状态、ARIA属性、键盘导航）
  • 加载状态处理
  • 错误边界实现
  • 响应式设计
  • 性能优化

Match Complexity to Vision

复杂度与设计愿景相匹配

  • Maximalist designs: Elaborate code with extensive animations, layered effects
  • Minimalist designs: Restraint, precision, careful attention to spacing
  • 极繁主义设计：采用复杂代码实现丰富动画与分层效果
  • 极简主义设计：克制、精准，注重间距细节

Workflow

工作流程

  1. Establish Design Direction - Define emotion, target user, color palette, typography
  2. Create Component Architecture - Atomic design system with composition
  3. Add Visual Personality - Distinctive choices, intentional relationships, purposeful asymmetry
  4. Implement Motion - Entrance animations, interactions, transitions
  5. Production Harden - Type everything, handle edge cases, optimize
  1. 确立设计方向 - 明确情感基调、目标用户、色彩方案与排版风格
  2. 搭建组件架构 - 基于原子设计系统进行组件组合
  3. 赋予视觉个性 - 做出独特设计选择、构建元素间的有意关联、采用有目的的不对称布局
  4. 实现动画效果 - 入场动画、交互反馈与过渡效果
  5. 生产级加固 - 完善类型定义、处理边缘案例、优化性能

Anti-Patterns to Avoid

需规避的反模式

  • Using Inter/Roboto as default font
  • Same fonts across projects
  • Gray-on-white with blue buttons
  • Everything centered and symmetric
  • No animations or generic fades
  • Ignoring dark mode
  • Forgetting loading/error states
  • Skipping accessibility
  • 将Inter/Roboto设为默认字体
  • 不同项目使用相同字体
  • 白底灰字搭配蓝色按钮的通用组合
  • 所有元素居中且对称
  • 无动画或使用通用淡入效果
  • 忽略深色模式适配
  • 遗漏加载/错误状态处理
  • 跳过无障碍适配

Additional Resources

额外资源

For detailed implementation guidance, see the references directory:
  • references/typography-examples.md
     - Font stacks by tone, variable fonts, responsive scales
  • references/color-animation-patterns.md
     - Advanced palettes, gradients, dark mode, animation patterns
  • references/production-patterns.md
     - Complete component examples, error boundaries, performance optimization, tooling recommendations
如需详细的落地指导，请查看参考文档目录：
  • references/typography-examples.md
     - 按风格分类的字体组合、可变字体、响应式字号体系
  • references/color-animation-patterns.md
     - 进阶色彩方案、渐变效果、深色模式、动画模式
  • references/production-patterns.md
     - 完整组件示例、错误边界、性能优化、工具推荐

Quick Reference

快速参考

bash
undefined
bash
undefined

Distinctive font stacks (vary these per project!)

Distinctive font stacks (vary these per project!)

font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans' font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist' font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans' font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist' font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'

Tailwind config pattern

Tailwind config pattern

theme: { extend: { colors: { /* HSL tokens / }, fontFamily: { / Variable fonts / }, animation: { / Spring-based */ }, } }
undefined
theme: { extend: { colors: { /* HSL tokens / }, fontFamily: { / Variable fonts / }, animation: { / Spring-based */ }, } }
undefined

Integration with Design Specialist Agent

与设计专家Agent的集成

Use this skill for:
  • Distinctive visual identity
  • Creative typography and color choices
  • Bold spatial compositions
  • Production-ready animated components
Use the design-specialist agent for:
  • Comprehensive UI/UX reviews
  • Accessibility audits
  • Design system architecture
  • Component library setup
本技能适用于：
  • 打造独特视觉辨识度
  • 创意排版与色彩方案设计
  • 大胆的空间布局设计
  • 生产级动画组件开发
设计专家Agent适用于：
  • 全面的UI/UX评审
  • 无障碍适配审计
  • 设计系统架构搭建
  • 组件库构建