frontend-design-system

仓库: supercent-io/skills-template
安装量: 8.1K
排名: #306

安装

npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system

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

New Release Main Headline Here Supporting copy that explains the value proposition in 1-2 sentences.
Product screenshot

모션/인터랙션 노트:

/ 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

| Component | Props | Variants |

|-----------|-------|----------|

| Button | size, variant, disabled | primary, secondary, ghost |

| Input | size, error, placeholder | default, error, success |

| Card | padding, shadow | elevated, flat, outlined |

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

| Section | Grid | Components |

|---------|------|------------|

| Hero | 2-col | Badge, Heading, CTA |

| Features | 3-col | Card, Icon |

| Pricing | 3-col | PricingCard |

| CTA | 1-col | Button |

Component List

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

Accessibility Audit

  • [x] Contrast ratios pass
  • [x] Focus indicators visible
  • [x] 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

← 返回排行榜