Frontend Design System

프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.

When to use this skill

• 프로덕션 품질 UI 필요: 프롬프트에서 고품질 UI 생성

• 일관된 디자인 언어: 화면 간 일관된 시각적 언어

• 타이포그래피/레이아웃/모션 가이드: 체계적인 디자인 시스템

Instructions

Step 1: Define Design Tokens

// 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

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"

Step 3: Generate UI Output

섹션별 컴포넌트 구조:

// 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>

모션/인터랙션 노트:

/* 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

Accessibility Checklist

Color Contrast (WCAG 2.1 AA)

• Text/background: 4.5:1 minimum (normal text)
• Text/background: 3:1 minimum (large text)
• UI components: 3:1 minimum

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

Text & Readability

• Minimum 16px body text
• Line height ≥ 1.5
• Paragraph width < 80 characters
• No text in images

Step 5: Handoff

Design Handoff Package

Component Breakdown

CSS/Token Summary

• Colors: [link to color palette]
• Typography: [link to type scale]
• Spacing: 8px base unit
• Breakpoints: 640/768/1024/1280px

Files

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

Examples

Example 1: SaaS Landing Page

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

Example 2: Admin Dashboard

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

Example 3: Mobile-First Form

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)

Best practices

• Start with content hierarchy: UI follows content priority

• Consistent spacing scale: 8px 기반 시스템, ad-hoc 간격 금지

• Motion with intent: 의미 있는 전환만 애니메이션

• Test on mobile: 레이아웃 무결성 확인

• Accessibility first: 디자인 단계에서 접근성 고려

Common pitfalls

• 효과와 그라데이션 과용: 단순함 유지

• 일관성 없는 타이포그래피 스케일: 정의된 스케일 사용

• 접근성 고려 누락: 색상 대비, 키보드 네비게이션

Troubleshooting

Issue: UI feels generic

Cause: 시각적 방향이나 토큰 없음 Solution: 스타일 레퍼런스와 팔레트 제공

Issue: Layout breaks on mobile

Cause: 반응형 그리드 규칙 없음 Solution: 브레이크포인트와 스태킹 동작 정의

Issue: Inconsistent components

Cause: 토큰 미사용 Solution: 모든 값을 토큰에서 참조

Output format

Design System Report

Tokens Applied

• Colors: [primary, secondary, accent]
• Typography: [font-family, scale]
• Spacing: [base unit, scale]
• Shadows: [levels]

Section Layout

Component List

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

Accessibility Audit

• Contrast ratios pass
• Focus indicators visible
• Semantic HTML

Multi-Agent Workflow

Validation & Retrospectives

• Round 1 (Orchestrator): 시각적 방향, 섹션 완전성

• Round 2 (Analyst): 접근성, 계층 구조 리뷰

• Round 3 (Executor): 핸드오프 체크리스트 검증

Agent Roles

Agent Role

Claude 토큰 정의, 컴포넌트 설계

Gemini 접근성 분석, 레퍼런스 리서치

Codex CSS/컴포넌트 코드 생성

Metadata

Version

• Current Version: 1.0.0

• Last Updated: 2026-01-21

• Compatible Platforms: Claude, ChatGPT, Gemini, Codex

Related Skills

• ui-component-patterns

• responsive-design

• web-accessibility

• image-generation

Tags

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