Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计技能

Overview

概述

This skill enables creation of distinctive, production-grade web interfaces that prioritize high design quality and avoid generic aesthetics. It applies to components, pages, dashboards, and full applications.
本技能可创建兼具高设计水准、摆脱通用美学风格的独特生产级Web界面，适用于组件、页面、仪表盘及完整应用。

When to Use

适用场景

  • Building custom UI components that need visual distinction
  • Creating landing pages or marketing sites
  • Designing dashboards and data visualization interfaces
  • Full web applications requiring cohesive design systems
  • Any interface that must avoid "generic AI" aesthetics
  • 构建需要视觉差异化的自定义UI组件
  • 创建着陆页或营销网站
  • 设计仪表盘与数据可视化界面
  • 需要内聚设计系统的完整Web应用
  • 任何必须避免「通用AI美学」的界面

Quick Start

快速上手

  1. Establish design direction before coding (purpose, tone, constraints)
  2. Select distinctive typography (avoid Inter, Roboto, Arial defaults)
  3. Create intentional color palette with clear primary/accent roles
  4. Add purposeful motion for micro-interactions
  5. Break visual monotony with asymmetry and grid variations
css
/* Quick distinctive setup */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --primary: #1a1a2e;
  --accent: #e94560;
  --text: #eaeaea;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--primary);
  color: var(--text);
}
  1. 在编码前确立设计方向（目标、风格调性、约束条件）
  2. 选用独特字体（避免Inter、Roboto、Arial等默认字体）
  3. 创建有明确主次的配色方案，区分主色调与强调色
  4. 为微交互添加有目的性的动效
  5. 通过不对称布局与网格变化打破视觉单调
css
/* 快速搭建独特风格的基础配置 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --primary: #1a1a2e;
  --accent: #e94560;
  --text: #eaeaea;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--primary);
  color: var(--text);
}

Before Coding: Design Direction

编码前：确立设计方向

Establish a bold aesthetic direction by considering:
  1. Purpose: What is this interface trying to accomplish?
  2. Tone: Professional? Playful? Minimalist? Bold?
  3. Constraints: Technical requirements, brand guidelines, accessibility?
  4. Differentiation: How will this stand out?
Key Principle: Choose a clear conceptual direction and execute it with precision.
通过以下维度确立鲜明的美学方向：
  1. 目标：该界面要达成什么效果？
  2. 调性：专业？活泼？极简？大胆？
  3. 约束：技术要求、品牌规范、无障碍标准？
  4. 差异化：如何从同类界面中脱颖而出？
核心原则：选定清晰的设计概念方向，并精准落地执行。

Visual Execution

视觉落地

Typography

字体设计

Prioritize characterful, unexpected font selections:
css
/* Good: Distinctive choices */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* Avoid: Overused defaults */
/* Inter, Roboto, Arial, system fonts */
Font Pairing Examples:
  • Headlines: Space Grotesk / Body: Source Serif Pro
  • Headlines: Playfair Display / Body: Work Sans
  • Headlines: Sora / Body: Spectral
优先选择有特色、非通用的字体：
css
/* 推荐：独特字体选择 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* 避免：过度使用的默认字体 */
/* Inter, Roboto, Arial, 系统默认字体 */
字体搭配示例：
  • 标题：Space Grotesk / 正文：Source Serif Pro
  • 标题：Playfair Display / 正文：Work Sans
  • 标题：Sora / 正文：Spectral

Color

配色方案

Commit to cohesive palettes:
css
:root {
  /* Bold, intentional palette */
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #e94560;
  --highlight: #0f3460;
  --text: #eaeaea;

  /* Not: Generic blue gradients on white */
}
Palette Strategies:
  • Monochromatic with sharp accent
  • Analogous with deliberate contrast
  • Split-complementary for energy
  • Dark mode as default, not afterthought
打造内聚的配色体系：
css
:root {
  /* 大胆且明确的配色方案 */
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #e94560;
  --highlight: #0f3460;
  --text: #eaeaea;

  /* 避免：白底紫渐变这类通用搭配 */
}
配色策略：
  • 单色调搭配鲜明强调色
  • 邻近色搭配刻意对比
  • 分裂互补色营造活力
  • 将深色模式设为默认，而非后期补充

Motion

动效设计

Employ CSS animations strategically:
css
/* Subtle entrance */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeSlideIn 0.6s ease-out;
}

/* Micro-interaction */
.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
Scroll-triggered effects:
javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});
策略性运用CSS动画：
css
/* 微妙的入场动画 */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeSlideIn 0.6s ease-out;
}

/* 微交互效果 */
.button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
滚动触发效果：
javascript
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

Spatial Design

空间设计

Embrace asymmetry and grid-breaking:
css
.hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: end; /* Intentional misalignment */
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Break the grid for emphasis */
.feature-grid .featured {
  grid-column: span 2;
  grid-row: span 2;
}
Overlap and layering:
css
.overlapping-section {
  position: relative;
  margin-top: -100px;
  z-index: 10;
}

.floating-element {
  position: absolute;
  transform: translate(-20%, -50%);
}
拥抱不对称布局与网格突破：
css
.hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: end; /* 刻意错位对齐 */
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* 突破网格以强化重点 */
.feature-grid .featured {
  grid-column: span 2;
  grid-row: span 2;
}
重叠与分层设计：
css
.overlapping-section {
  position: relative;
  margin-top: -100px;
  z-index: 10;
}

.floating-element {
  position: absolute;
  transform: translate(-20%, -50%);
}

Critical Warnings: What to Avoid

关键注意事项：需规避的问题

Generic AI Aesthetics

通用AI美学雷区

  • Overused font families (Inter, Roboto, Arial)
  • Purple gradients on white backgrounds
  • Uniform rounded corners everywhere
  • Centered everything
  • Cookie-cutter card layouts
  • 过度使用的字体（Inter、Roboto、Arial）
  • 白底紫渐变
  • 全局统一圆角
  • 所有元素居中对齐
  • 千篇一律的卡片布局

Predictable Patterns

可预测的刻板模式

  • Hero with centered text + button + stock photo
  • 3-column equal grids
  • Default shadows and border-radius
  • Lack of visual hierarchy
  • No personality or context-specific character
  • 居中文字+按钮+库存图片的Hero区
  • 三列等宽网格
  • 默认阴影与圆角
  • 缺乏视觉层级
  • 无个性或不符合场景的特征

Implementation Philosophy

落地理念

Match complexity to vision:
Maximalist Design:
css
/* Elaborate, intentional complexity */
.hero {
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8)),
    url('texture.png'),
    radial-gradient(ellipse at 20% 50%, #e94560 0%, transparent 50%);
  backdrop-filter: blur(10px);
}
Minimalist Design:
css
/* Restraint and precision */
.hero {
  background: #fafafa;
  padding: 8rem 2rem;
}

.hero h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
复杂度与设计愿景匹配：
极繁主义设计：
css
/* 精心设计的复杂效果 */
.hero {
  background:
    linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8)),
    url('texture.png'),
    radial-gradient(ellipse at 20% 50%, #e94560 0%, transparent 50%);
  backdrop-filter: blur(10px);
}
极简主义设计：
css
/* 克制且精准的设计 */
.hero {
  background: #fafafa;
  padding: 8rem 2rem;
}

.hero h1 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

Component Patterns

组件模式

Cards with Character

有特色的卡片组件

html
<div class="card">
  <div class="card-accent"></div>
  <div class="card-content">
    <span class="card-tag">Featured</span>
    <h3>Card Title</h3>
    <p>Description text with purpose.</p>
  </div>
</div>

<style>
.card {
  position: relative;
  background: #1a1a2e;
  border-radius: 0; /* Intentional sharp corners */
  overflow: hidden;
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e94560, #0f3460);
}

.card-content {
  padding: 2rem;
}

.card-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e94560;
}
</style>
html
<div class="card">
  <div class="card-accent"></div>
  <div class="card-content">
    <span class="card-tag">Featured</span>
    <h3>Card Title</h3>
    <p>Description text with purpose.</p>
  </div>
</div>

<style>
.card {
  position: relative;
  background: #1a1a2e;
  border-radius: 0; /* 刻意使用直角 */
  overflow: hidden;
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #e94560, #0f3460);
}

.card-content {
  padding: 2rem;
}

.card-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e94560;
}
</style>

Navigation with Presence

有存在感的导航组件

html
<nav class="nav">
  <a href="/" class="nav-logo">Brand</a>
  <div class="nav-links">
    <a href="#" class="nav-link active">Home</a>
    <a href="#" class="nav-link">Work</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-cta">Contact</a>
  </div>
</nav>

<style>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4rem;
  background: transparent;
  position: fixed;
  width: 100%;
  z-index: 100;
  mix-blend-mode: difference;
}

.nav-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
}

.nav-link {
  color: white;
  text-decoration: none;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e94560;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
</style>
html
<nav class="nav">
  <a href="/" class="nav-logo">Brand</a>
  <div class="nav-links">
    <a href="#" class="nav-link active">Home</a>
    <a href="#" class="nav-link">Work</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-cta">Contact</a>
  </div>
</nav>

<style>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4rem;
  background: transparent;
  position: fixed;
  width: 100%;
  z-index: 100;
  mix-blend-mode: difference;
}

.nav-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
}

.nav-link {
  color: white;
  text-decoration: none;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e94560;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
</style>

Framework Integration

框架集成

Tailwind CSS (Custom Config)

Tailwind CSS（自定义配置）

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Space Grotesk', 'sans-serif'],
        'body': ['Spectral', 'serif'],
      },
      colors: {
        'midnight': '#1a1a2e',
        'navy': '#16213e',
        'coral': '#e94560',
        'ocean': '#0f3460',
      },
      animation: {
        'fade-in': 'fadeIn 0.6s ease-out',
        'slide-up': 'slideUp 0.6s ease-out',
      },
    },
  },
}
javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Space Grotesk', 'sans-serif'],
        'body': ['Spectral', 'serif'],
      },
      colors: {
        'midnight': '#1a1a2e',
        'navy': '#16213e',
        'coral': '#e94560',
        'ocean': '#0f3460',
      },
      animation: {
        'fade-in': 'fadeIn 0.6s ease-out',
        'slide-up': 'slideUp 0.6s ease-out',
      },
    },
  },
}

React Components

React组件

jsx
const Button = ({ children, variant = 'primary', ...props }) => {
  const baseStyles = `
    px-6 py-3 font-display font-semibold
    transition-all duration-300
    focus:outline-none focus:ring-2 focus:ring-offset-2
  `;

  const variants = {
    primary: 'bg-coral text-white hover:bg-opacity-90 focus:ring-coral',
    secondary: 'bg-transparent border-2 border-coral text-coral hover:bg-coral hover:text-white',
    ghost: 'bg-transparent text-coral hover:underline',
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};
jsx
const Button = ({ children, variant = 'primary', ...props }) => {
  const baseStyles = `
    px-6 py-3 font-display font-semibold
    transition-all duration-300
    focus:outline-none focus:ring-2 focus:ring-offset-2
  `;

  const variants = {
    primary: 'bg-coral text-white hover:bg-opacity-90 focus:ring-coral',
    secondary: 'bg-transparent border-2 border-coral text-coral hover:bg-coral hover:text-white',
    ghost: 'bg-transparent text-coral hover:underline',
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} {...props}>
      {children}
    </button>
  );
};

Execution Checklist

落地检查清单

  • Established clear design direction before coding
  • Selected distinctive typography (not defaults)
  • Created intentional color palette
  • Added purposeful motion and interaction
  • Broke visual monotony with asymmetry/variation
  • Avoided generic AI aesthetic patterns
  • Matched complexity to design vision
  • Tested across viewport sizes
  • Verified accessibility (contrast, focus states)
  • 编码前已确立清晰的设计方向
  • 选用了独特字体（非默认字体）
  • 创建了明确的配色方案
  • 添加了有目的性的动效与交互
  • 通过不对称/变化设计打破视觉单调
  • 规避了通用AI美学模式
  • 复杂度与设计愿景匹配
  • 已在不同视口尺寸下测试
  • 已验证无障碍标准（对比度、焦点状态）

Error Handling

问题排查

Common Issues

常见问题

Issue: Design looks generic
  • Cause: Using default fonts and colors
  • Solution: Audit for Inter/Roboto/system fonts, replace with distinctive choices
Issue: Animations feel janky
  • Cause: Using wrong easing or duration
  • Solution: Use 
    ease-out
    for entrances, keep durations 200-600ms
Issue: Layout breaks on mobile
  • Cause: Fixed widths or no responsive breakpoints
  • Solution: Use relative units, add media queries, test at 320px
Issue: Colors clash in dark mode
  • Cause: Using light-mode palette directly
  • Solution: Design dark mode first, derive light mode from it
问题：设计风格过于通用
  • 原因：使用默认字体与配色
  • 解决方案：检查是否使用Inter/Roboto/系统字体，替换为独特选项
问题：动画效果卡顿
  • 原因：缓动函数或时长选择不当
  • 解决方案：入场动画使用
    ease-out
    ，时长控制在200-600ms
问题：移动端布局崩溃
  • 原因：使用固定宽度或未设置响应式断点
  • 解决方案：使用相对单位，添加媒体查询，在320px尺寸下测试
问题：深色模式配色冲突
  • 原因：直接复用浅色模式配色
  • 解决方案：优先设计深色模式，再衍生浅色模式

Metrics

指标要求

MetricTargetHow to Measure
First Contentful Paint<1.5sLighthouse
Cumulative Layout Shift<0.1Lighthouse
Accessibility Score>90Lighthouse
Color ContrastWCAG AAContrast checker
Animation FPS60fpsDevTools Performance
指标目标值测量方式
首次内容绘制<1.5sLighthouse
累积布局偏移<0.1Lighthouse
无障碍评分>90Lighthouse
颜色对比度符合WCAG AA标准对比度检查工具
动画帧率60fps开发者工具性能面板

Philosophy

设计理念

Claude is capable of extraordinary creative work. Don't hold back.
Design complexity should match the aesthetic vision--maximalist designs warrant elaborate animations; minimalist approaches require restraint and precision. The right amount of design is whatever serves the purpose with distinction.
Claude具备卓越的创意能力，无需自我设限。
设计复杂度需与视觉愿景匹配：极繁主义设计可搭配精细动画；极简主义设计则需克制与精准。最适合的设计复杂度，是能精准服务于目标的复杂度。

Related Skills

相关技能

  • theme-factory - Pre-built color/font themes
  • web-artifacts-builder - Self-contained HTML apps
  • canvas-design - Visual art generation
  • theme-factory - 预构建配色/字体主题
  • web-artifacts-builder - 独立HTML应用构建
  • canvas-design - 视觉艺术生成

Version History

版本历史

  • 2.0.0 (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
  • 1.0.0 (2024-10-15): Initial release with typography, color, motion, spatial design patterns, component examples, Tailwind/React integration
  • 2.0.0 (2026-01-02)：升级至v2模板 - 新增快速上手、适用场景、落地检查清单、问题排查、指标要求章节
  • 1.0.0 (2024-10-15)：初始版本，包含字体、配色、动效、空间设计模式、组件示例、Tailwind/React集成