Frontend Design System

This is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.

When to use this skill

• Production-quality UI needed: Generate high-quality UI from prompts

• Consistent design language: Consistent visual language across screens

• Typography/layout/motion guide: Systematic design system

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: [Primary CTA] secondary_actions: [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

Section-by-section component structure:

// 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/Interaction notes:

/* 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-based system, no ad-hoc spacing

• Motion with intent: Animate only meaningful transitions

• Test on mobile: Verify layout integrity

• Accessibility first: Consider accessibility at the design stage

Common pitfalls

• Overuse of effects and gradients: Maintain simplicity

• Inconsistent typography scale: Use the defined scale

• Missing accessibility considerations: Color contrast, keyboard navigation

Troubleshooting

Issue: UI feels generic

Cause: No visual direction or tokens Solution: Provide style references and palette

Issue: Layout breaks on mobile

Cause: No responsive grid rules Solution: Define breakpoints and stacking behavior

Issue: Inconsistent components

Cause: Tokens not in use Solution: Reference all values from tokens

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): Visual direction, section completeness

• Round 2 (Analyst): Accessibility, hierarchy review

• Round 3 (Executor): Handoff checklist verification

Agent Roles

Agent Role

Claude Token definition, component design

Gemini Accessibility analysis, reference research

Codex CSS/component code generation

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

Unity3D Design Guide

Unity3D 게임 UI 개발 시 참조하는 디자인 가이드라인입니다. codebase-search '디자인 토큰' 으로 프로젝트 내 기존 디자인 파일을 탐색할 수 있습니다.

게임 UI 색상 팔레트

Unity Color Wheel 기반 권장 팔레트:

용도 색상 HEX 예시

Primary (주요 액션) 채도 높은 색상 #4CAF50, #2196F3

Danger/Enemy 붉은 계열 #F44336, #E91E63

Warning/Alert 노란 계열 #FFC107, #FF9800

Neutral/Background 저채도 어두운 색상 #212121, #37474F

Text/UI Frame 흰색 또는 밝은 회색 #FFFFFF, #E0E0E0

Unity 적용: unity-mcp: manage_material 로 색상 팔레트를 머티리얼에 적용하세요.

폰트·타이포그래피 규칙

용도 크기 스타일

제목/HUD 중요 24-36px Bold

버튼/메뉴 16-20px Regular/Medium

본문/설명 12-14px Regular

힌트/소형 10-12px Regular, 낮은 불투명도

Unity 적용: unity-mcp: manage_ui 로 TextMeshPro 컴포넌트 설정을 일괄 적용하세요.

아이콘·스프라이트 명명 규칙

icon_<category><name><size>.png 예: icon_weapon_sword_64.png icon_ui_health_32.png icon_buff_speed_48.png

sprite_<character><action><frame>.png 예: sprite_player_idle_00.png sprite_enemy_attack_03.png

Unity 적용: unity-mcp: manage_texture 로 스프라이트 임포트 설정(Pixels Per Unit, Filter Mode)을 일관되게 적용하세요.

프로젝트 내 디자인 파일 탐색

디자인 토큰 파일 탐색

codebase-search '디자인 토큰' codebase-search 'ColorPalette' codebase-search 'UIStyle'

컴포넌트 탐색

codebase-search 'manage_ui' codebase-search 'TextMeshPro'

관련 스킬

• ui-component-patterns: Unity UI 컴포넌트 설계 패턴

• unity-mcp (manage_ui , manage_material ): Unity Editor에 직접 적용

• web-accessibility: UI 접근성 기준 (WCAG 2.1)