Back to Details

frontend-design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design System

前端设计系统

프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.
这是一项用于制作生产级别UI设计的技能。通过清晰的设计令牌、布局规则、动效指南和可访问性检查，支持一致且可扩展的前端开发。

When to use this skill

何时使用此技能

  • 프로덕션 품질 UI 필요: 프롬프트에서 고품질 UI 생성
  • 일관된 디자인 언어: 화면 간 일관된 시각적 언어
  • 타이포그래피/레이아웃/모션 가이드: 체계적인 디자인 시스템
  • 需要生产级质量UI：通过提示生成高品质UI
  • 一致的设计语言：各页面间保持统一的视觉语言
  • 排版/布局/动效指南：系统化的设计系统

Instructions

操作说明

Step 1: Define Design Tokens

步骤1：定义设计令牌

typescript
// design-tokens.ts
export const tokens = {
  // Colors
  colors: {
    primary: {
      50: '#EFF6FF',
      100: '#DBEAFE',
      500: '#3B82F6',
      600: '#2563EB',
      700: '#1D4ED8',
    },
    secondary: {
      500: '#6366F1',
      600: '#4F46E5',
    },
    accent: '#F59E0B',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    background: {
      primary: '#FFFFFF',
      secondary: '#F9FAFB',
      tertiary: '#F3F4F6',
    },
    text: {
      primary: '#1F2937',
      secondary: '#6B7280',
      tertiary: '#9CA3AF',
      inverse: '#FFFFFF',
    },
  },

  // Typography
  typography: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    fontSize: {
      xs: '0.75rem',     // 12px
      sm: '0.875rem',    // 14px
      base: '1rem',      // 16px
      lg: '1.125rem',    // 18px
      xl: '1.25rem',     // 20px
      '2xl': '1.5rem',   // 24px
      '3xl': '1.875rem', // 30px
      '4xl': '2.25rem',  // 36px
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.25,
      normal: 1.5,
      relaxed: 1.75,
    },
  },

  // Spacing (8px base unit)
  spacing: {
    0: '0',
    1: '0.25rem',  // 4px
    2: '0.5rem',   // 8px
    3: '0.75rem',  // 12px
    4: '1rem',     // 16px
    5: '1.25rem',  // 20px
    6: '1.5rem',   // 24px
    8: '2rem',     // 32px
    10: '2.5rem',  // 40px
    12: '3rem',    // 48px
    16: '4rem',    // 64px
  },

  // Border Radius
  borderRadius: {
    none: '0',
    sm: '0.25rem',  // 4px
    md: '0.375rem', // 6px
    lg: '0.5rem',   // 8px
    xl: '0.75rem',  // 12px
    '2xl': '1rem',  // 16px
    full: '9999px',
  },

  // Shadows
  shadows: {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
  },

  // Breakpoints
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
};
typescript
// design-tokens.ts
export const tokens = {
  // Colors
  colors: {
    primary: {
      50: '#EFF6FF',
      100: '#DBEAFE',
      500: '#3B82F6',
      600: '#2563EB',
      700: '#1D4ED8',
    },
    secondary: {
      500: '#6366F1',
      600: '#4F46E5',
    },
    accent: '#F59E0B',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    background: {
      primary: '#FFFFFF',
      secondary: '#F9FAFB',
      tertiary: '#F3F4F6',
    },
    text: {
      primary: '#1F2937',
      secondary: '#6B7280',
      tertiary: '#9CA3AF',
      inverse: '#FFFFFF',
    },
  },

  // Typography
  typography: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    fontSize: {
      xs: '0.75rem',     // 12px
      sm: '0.875rem',    // 14px
      base: '1rem',      // 16px
      lg: '1.125rem',    // 18px
      xl: '1.25rem',     // 20px
      '2xl': '1.5rem',   // 24px
      '3xl': '1.875rem', // 30px
      '4xl': '2.25rem',  // 36px
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.25,
      normal: 1.5,
      relaxed: 1.75,
    },
  },

  // Spacing (8px base unit)
  spacing: {
    0: '0',
    1: '0.25rem',  // 4px
    2: '0.5rem',   // 8px
    3: '0.75rem',  // 12px
    4: '1rem',     // 16px
    5: '1.25rem',  // 20px
    6: '1.5rem',   // 24px
    8: '2rem',     // 32px
    10: '2.5rem',  // 40px
    12: '3rem',    // 48px
    16: '4rem',    // 64px
  },

  // Border Radius
  borderRadius: {
    none: '0',
    sm: '0.25rem',  // 4px
    md: '0.375rem', // 6px
    lg: '0.5rem',   // 8px
    xl: '0.75rem',  // 12px
    '2xl': '1rem',  // 16px
    full: '9999px',
  },

  // Shadows
  shadows: {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',
  },

  // Breakpoints
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
};

Step 2: Define Layout + UX Goals

步骤2：定义布局+UX目标

yaml
page_spec:
  type: "landing" | "dashboard" | "form" | "blog" | "e-commerce"

  hierarchy:
    primary_action: [주요 CTA]
    secondary_actions: [부가 액션들]
    information_architecture:
      - section: hero
        priority: 1
      - section: features
        priority: 2
      - section: social_proof
        priority: 3
      - section: cta
        priority: 4

  responsive:
    mobile_first: true
    breakpoints:
      - mobile: "< 640px"
      - tablet: "640px - 1024px"
      - desktop: "> 1024px"
    stack_behavior: "vertical on mobile, horizontal on desktop"
yaml
page_spec:
  type: "landing" | "dashboard" | "form" | "blog" | "e-commerce"

  hierarchy:
    primary_action: [主要CTA]
    secondary_actions: [附加操作]
    information_architecture:
      - section: hero
        priority: 1
      - section: features
        priority: 2
      - section: social_proof
        priority: 3
      - section: cta
        priority: 4

  responsive:
    mobile_first: true
    breakpoints:
      - mobile: "< 640px"
      - tablet: "640px - 1024px"
      - desktop: "> 1024px"
    stack_behavior: "移动端垂直堆叠，桌面端水平排列"

Step 3: Generate UI Output

步骤3：生成UI输出

섹션별 컴포넌트 구조:
tsx
// Hero Section
<section className="hero">
  <div className="container">
    <div className="hero-content">
      <Badge>New Release</Badge>
      <Heading level={1}>
        Main Headline Here
      </Heading>
      <Paragraph size="lg">
        Supporting copy that explains the value proposition
        in 1-2 sentences.
      </Paragraph>
      <div className="cta-group">
        <Button variant="primary" size="lg">
          Primary CTA
        </Button>
        <Button variant="secondary" size="lg">
          Secondary CTA
        </Button>
      </div>
    </div>
    <div className="hero-visual">
      <Image src="hero-image.png" alt="Product screenshot" />
    </div>
  </div>
</section>
모션/인터랙션 노트:
css
/* Motion Guidelines */
:root {
  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Hover States */
.button {
  transition: all var(--duration-fast) var(--ease-in-out);
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Page Transitions */
.page-enter {
  opacity: 0;
  transform: translateY(10px);
}
.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--duration-normal) var(--ease-out);
}
按部分划分的组件结构:
tsx
// Hero Section
<section className="hero">
  <div className="container">
    <div className="hero-content">
      <Badge>New Release</Badge>
      <Heading level={1}>
        Main Headline Here
      </Heading>
      <Paragraph size="lg">
        Supporting copy that explains the value proposition
        in 1-2 sentences.
      </Paragraph>
      <div className="cta-group">
        <Button variant="primary" size="lg">
          Primary CTA
        </Button>
        <Button variant="secondary" size="lg">
          Secondary CTA
        </Button>
      </div>
    </div>
    <div className="hero-visual">
      <Image src="hero-image.png" alt="Product screenshot" />
    </div>
  </div>
</section>
动效/交互说明:
css
/* Motion Guidelines */
:root {
  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Hover States */
.button {
  transition: all var(--duration-fast) var(--ease-in-out);
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Page Transitions */
.page-enter {
  opacity: 0;
  transform: translateY(10px);
}
.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--duration-normal) var(--ease-out);
}

Step 4: Validate Accessibility

步骤4：验证可访问性

markdown
undefined
markdown
undefined

Accessibility Checklist

可访问性检查清单

Color Contrast (WCAG 2.1 AA)

颜色对比度（WCAG 2.1 AA）

  • Text/background: 4.5:1 minimum (normal text)
  • Text/background: 3:1 minimum (large text)
  • UI components: 3:1 minimum
  • 文本/背景：最小4.5:1（常规文本）
  • 文本/背景：最小3:1（大文本）
  • UI组件：最小3:1

Keyboard Navigation

键盘导航

  • All interactive elements focusable
  • Focus order logical (left→right, top→bottom)
  • Focus indicator visible
  • Skip links present
  • 所有交互元素可聚焦
  • 聚焦顺序符合逻辑（从左到右，从上到下）
  • 聚焦指示器可见
  • 存在跳转链接

Screen Reader

屏幕阅读器

  • Semantic HTML used
  • Images have alt text
  • Form labels associated
  • ARIA labels where needed
  • 使用语义化HTML
  • 图片包含替代文本
  • 表单标签关联正确
  • 必要时使用ARIA标签

Text & Readability

文本与可读性

  • Minimum 16px body text
  • Line height ≥ 1.5
  • Paragraph width < 80 characters
  • No text in images
undefined
  • 正文字体最小16px
  • 行高≥1.5
  • 段落宽度<80字符
  • 图片中无文本
undefined

Step 5: Handoff

步骤5：交付

markdown
undefined
markdown
undefined

Design Handoff Package

设计交付包

Component Breakdown

组件分解

ComponentPropsVariants
Buttonsize, variant, disabledprimary, secondary, ghost
Inputsize, error, placeholderdefault, error, success
Cardpadding, shadowelevated, flat, outlined
组件属性变体
Buttonsize, variant, disabledprimary, secondary, ghost
Inputsize, error, placeholderdefault, error, success
Cardpadding, shadowelevated, flat, outlined

CSS/Token Summary

CSS/令牌摘要

  • Colors: [link to color palette]
  • Typography: [link to type scale]
  • Spacing: 8px base unit
  • Breakpoints: 640/768/1024/1280px
  • 颜色：[调色板链接]
  • 排版：[比例链接]
  • 间距：8px基础单位
  • 断点：640/768/1024/1280px

Files

文件

  • Figma: [link]
  • Tokens: design-tokens.ts
  • Components: /src/components/

---
  • Figma：[链接]
  • 令牌：design-tokens.ts
  • 组件：/src/components/

---

Examples

示例

Example 1: SaaS Landing Page

示例1：SaaS登录页面

Prompt:
Design a SaaS landing page with modern typography,
soft gradients, and subtle motion.
Include hero, features, pricing, and CTA.
Expected output:
  • Section layout with visual direction
  • Typography scale (H1: 48px → Body: 16px)
  • Color palette with gradient definitions
  • Motion/interaction specifications
  • Component list with props
提示:
Design a SaaS landing page with modern typography,
soft gradients, and subtle motion.
Include hero, features, pricing, and CTA.
预期输出:
  • 带视觉方向的页面布局
  • 排版比例（H1:48px → 正文:16px）
  • 带渐变定义的调色板
  • 动效/交互规范
  • 带属性的组件列表

Example 2: Admin Dashboard

示例2：管理后台仪表盘

Prompt:
Create a clean admin dashboard with data cards,
filters, and tables. Focus on clarity and fast scanning.
Expected output:
  • Grid layout (12-column)
  • Component breakdown (cards, tables, filters)
  • Visual hierarchy documentation
  • Responsive behavior specification
提示:
Create a clean admin dashboard with data cards,
filters, and tables. Focus on clarity and fast scanning.
预期输出:
  • 网格布局（12列）
  • 组件分解（卡片、表格、过滤器）
  • 视觉层级文档
  • 响应式行为规范

Example 3: Mobile-First Form

示例3：移动端优先表单

Prompt:
Design a multi-step form optimized for mobile.
Include progress indicator, validation states,
and success confirmation.
Expected output:
  • Step-by-step flow diagram
  • Form field specifications
  • Error/success state designs
  • Touch-friendly sizing (min 44px targets)
提示:
Design a multi-step form optimized for mobile.
Include progress indicator, validation states,
and success confirmation.
预期输出:
  • 分步流程图
  • 表单字段规范
  • 错误/成功状态设计
  • 适合触摸的尺寸（最小44px目标区域）

Best practices

最佳实践

  1. Start with content hierarchy: UI follows content priority
  2. Consistent spacing scale: 8px 기반 시스템, ad-hoc 간격 금지
  3. Motion with intent: 의미 있는 전환만 애니메이션
  4. Test on mobile: 레이아웃 무결성 확인
  5. Accessibility first: 디자인 단계에서 접근성 고려
  1. 从内容层级开始：UI跟随内容优先级
  2. 一致的间距比例：基于8px的系统，禁止临时设置间距
  3. 有目的性的动效：仅对有意义的切换添加动画
  4. 在移动端测试：检查布局完整性
  5. 优先考虑可访问性：在设计阶段考虑可访问性

Common pitfalls

常见陷阱

  • 효과와 그라데이션 과용: 단순함 유지
  • 일관성 없는 타이포그래피 스케일: 정의된 스케일 사용
  • 접근성 고려 누락: 색상 대비, 키보드 네비게이션
  • 过度使用效果和渐变：保持简洁
  • 不一致的排版比例：使用已定义的比例
  • 忽略可访问性考虑：颜色对比度、键盘导航

Troubleshooting

故障排除

Issue: UI feels generic

问题：UI感觉通用

Cause: 시각적 방향이나 토큰 없음 Solution: 스타일 레퍼런스와 팔레트 제공
原因：缺乏视觉方向或令牌 解决方案：提供风格参考和调色板

Issue: Layout breaks on mobile

问题：布局在移动端断裂

Cause: 반응형 그리드 규칙 없음 Solution: 브레이크포인트와 스태킹 동작 정의
原因：没有响应式网格规则 解决方案：定义断点和堆叠行为

Issue: Inconsistent components

问题：组件不一致

Cause: 토큰 미사용 Solution: 모든 값을 토큰에서 참조
原因：未使用令牌 解决方案：所有值都引用令牌

Output format

输出格式

markdown
undefined
markdown
undefined

Design System Report

设计系统报告

Tokens Applied

应用的令牌

  • Colors: [primary, secondary, accent]
  • Typography: [font-family, scale]
  • Spacing: [base unit, scale]
  • Shadows: [levels]
  • 颜色：[primary, secondary, accent]
  • 排版：[font-family, scale]
  • 间距：[基础单位, 比例]
  • 阴影：[层级]

Section Layout

页面布局

SectionGridComponents
Hero2-colBadge, Heading, CTA
Features3-colCard, Icon
Pricing3-colPricingCard
CTA1-colButton
部分网格组件
Hero2列Badge, Heading, CTA
Features3列Card, Icon
Pricing3列PricingCard
CTA1列Button

Component List

组件列表

  • Button (primary, secondary, ghost)
  • Card (elevated, flat)
  • Input (default, error)
  • Badge
  • Icon
  • Button (primary, secondary, ghost)
  • Card (elevated, flat)
  • Input (default, error)
  • Badge
  • Icon

Accessibility Audit

可访问性审核

  • Contrast ratios pass
  • Focus indicators visible
  • Semantic HTML

---
  • 对比度符合要求
  • 聚焦指示器可见
  • 语义化HTML

---

Multi-Agent Workflow

多Agent工作流

Validation & Retrospectives

验证与回顾

  • Round 1 (Orchestrator): 시각적 방향, 섹션 완전성
  • Round 2 (Analyst): 접근성, 계층 구조 리뷰
  • Round 3 (Executor): 핸드오프 체크리스트 검증
  • 第一轮（协调器）：视觉方向、部分完整性
  • 第二轮（分析师）：可访问性、层级结构审查
  • 第三轮（执行者）：交付清单验证

Agent Roles

Agent角色

AgentRole
Claude토큰 정의, 컴포넌트 설계
Gemini접근성 분석, 레퍼런스 리서치
CodexCSS/컴포넌트 코드 생성
Agent角色
Claude令牌定义、组件设计
Gemini可访问性分析、参考研究
CodexCSS/组件代码生成

Metadata

元数据

Version

版本

  • Current Version: 1.0.0
  • Last Updated: 2026-01-21
  • Compatible Platforms: Claude, ChatGPT, Gemini, Codex
  • 当前版本：1.0.0
  • 最后更新：2026-01-21
  • 兼容平台：Claude, ChatGPT, Gemini, Codex

Related Skills

相关技能

  • ui-component-patterns
  • responsive-design
  • web-accessibility
  • image-generation
  • ui-component-patterns
  • responsive-design
  • web-accessibility
  • image-generation

Tags

标签

#frontend
#design
#ui
#ux
#typography
#animation
#design-tokens
#accessibility
#frontend
#design
#ui
#ux
#typography
#animation
#design-tokens
#accessibility