AI 기반 DS 진화

## Task

SaaS 대시보드 제품을 위한 디자인 토큰을 설계해줘.

## Requirements

- 다크/라이트 모드 지원
- 접근성 AA 기준 색상 대비
- 8px 기반 스페이싱
- 반응형 타이포그래피

## Brand Direction

- 전문적이고 신뢰감 있는 느낌
- Primary: 파란색 계열
- 미니멀하고 깔끔한 스타일

## Output Format

JSON 토큰 파일 (Design Tokens W3C 형식)

{
  "color": {
    "primitive": {
      "blue": {
        "50": { "$value": "#eff6ff" },
        "500": { "$value": "#3b82f6" },
        "600": { "$value": "#2563eb" },
        "900": { "$value": "#1e3a8a" }
      },
      "slate": {
        "50": { "$value": "#f8fafc" },
        "900": { "$value": "#0f172a" }
      }
    },
    "semantic": {
      "primary": { "$value": "{color.primitive.blue.500}" },
      "primary-hover": { "$value": "{color.primitive.blue.600}" },
      "background": {
        "default": { "$value": "{color.primitive.slate.50}" },
        "dark": { "$value": "{color.primitive.slate.900}" }
      }
    }
  },
  "spacing": {
    "1": { "$value": "4px" },
    "2": { "$value": "8px" },
    "4": { "$value": "16px" },
    "6": { "$value": "24px" },
    "8": { "$value": "32px" }
  }
}

// scripts/validate-tokens.ts

interface TokenValidation {
  contrastCheck: boolean
  consistencyCheck: boolean
  completenessCheck: boolean
}

async function validateGeneratedTokens(tokens: object): Promise<TokenValidation> {
  const results = {
    contrastCheck: await checkColorContrast(tokens),
    consistencyCheck: checkNamingConsistency(tokens),
    completenessCheck: checkRequiredTokens(tokens),
  }

  if (!results.contrastCheck) {
    console.log('⚠️ 색상 대비 부족. AI에게 수정 요청...')
    // AI에게 피드백 전달하여 재생성
  }

  return results
}

## Task

다음 코어 컴포넌트들을 순서대로 생성해줘.

## Components to Generate

1. Button (variants: default, destructive, outline, ghost, link)
2. Input (states: default, error, disabled)
3. Label
4. Card (with Header, Content, Footer)
5. Dialog (with Trigger, Content, Close)
6. Select
7. Checkbox
8. Radio
9. Switch
10. Table (with sorting, pagination)

## Tech Stack

- React 18+ with TypeScript
- Tailwind CSS
- Radix UI Primitives (for complex interactions)
- class-variance-authority (for variants)

## Design Tokens

{generated_tokens}

## Requirements per Component

- TypeScript interface with JSDoc
- All states (default, hover, focus, disabled)
- Accessibility (ARIA, keyboard)
- Storybook story file
- Unit test file

## Output Structure

components/
└── {component}/
├── index.tsx
├── {component}.tsx
├── {component}.stories.tsx
└── {component}.test.tsx

// scripts/validate-components.ts

const componentChecklist = {
  structure: [
    'TypeScript interface exists',
    'JSDoc comments present',
    'Default export and named export',
  ],
  accessibility: ['ARIA attributes', 'Keyboard navigation', 'Focus management'],
  styling: ['Uses design tokens only', 'No hardcoded values', 'Responsive support'],
  testing: ['Story file exists', 'Test file exists', 'Edge cases covered'],
}

async function validateComponent(componentPath: string) {
  const results = {}

  for (const [category, checks] of Object.entries(componentChecklist)) {
    results[category] = await runChecks(componentPath, checks)
  }

  return results
}

## Task

코어 컴포넌트를 조합한 UI 패턴을 생성해줘.

## Available Components

{component_list}

## Patterns to Generate

### 1. Authentication

- Login Form (email, password, remember, social)
- Register Form (name, email, password, confirm, terms)
- Password Reset Form

### 2. Data Display

- Data Table (sortable, filterable, pagination)
- Stat Card (label, value, trend, icon)
- Activity Feed (avatar, action, time)

### 3. Navigation

- Sidebar Navigation (collapsible, nested)
- Breadcrumb
- Tab Navigation

### 4. Feedback

- Empty State (icon, title, description, action)
- Error State
- Loading State (skeleton, spinner)

## Output Format

각 패턴을 독립적인 컴포넌트로 생성.
props로 커스터마이징 가능하게.

## Issue

Button 컴포넌트에서 loading 상태일 때 클릭이 가능함

## Current Behavior

loading={true}여도 onClick이 트리거됨

## Expected Behavior

loading 상태에서는 클릭 불가, aria-busy="true"

## Fix Request

Button 컴포넌트를 수정하고 테스트 케이스 추가

## Request

Button에 "success" variant 추가 필요

## Use Case

폼 제출 성공 후 일시적으로 표시

## Design

- 초록색 배경 (success 토큰 사용)
- 체크 아이콘 포함 옵션
- 2초 후 기본 상태로 복귀 옵션

## Audit Result

axe-core에서 Dialog 컴포넌트 위반 발견:

- focus-trap 누락
- aria-describedby 누락

## Fix Request

위반 사항 수정하고 접근성 테스트 추가

// scripts/generate-design-sheets.ts

import { mcp } from './mcp-client'

async function generateComponentSheets() {
  // 1. 프로젝트 생성
  const project = await mcp.stitch.create_project({
    title: 'Design System Component Library',
  })

  // 2. 컴포넌트별 시트 생성
  const componentPrompts = [
    {
      name: 'Button States',
      prompt: `
        버튼 컴포넌트 상태 시트:
        - 1행: Default variants (primary, secondary, destructive, outline, ghost)
        - 2행: Hover states
        - 3행: Focus states
        - 4행: Disabled states
        - 5행: Loading states
        각 버튼에 라벨 포함. 깔끔한 그리드 레이아웃.
      `,
    },
    {
      name: 'Form Components',
      prompt: `
        폼 컴포넌트 시트:
        - Input (default, focus, error, disabled)
        - Select (closed, open, selected)
        - Checkbox (unchecked, checked, indeterminate)
        - Radio (unselected, selected)
        - Switch (off, on)
        각 상태에 라벨 포함.
      `,
    },
    {
      name: 'Card Variations',
      prompt: `
        카드 컴포넌트 변형:
        - Basic card (title, content)
        - Card with header actions
        - Card with image
        - Card with footer buttons
        - Stat card (KPI 표시용)
        일관된 그림자와 radius 적용.
      `,
    },
  ]

  for (const { name, prompt } of componentPrompts) {
    await mcp.stitch.generate_screen_from_text({
      projectId: project.name.split('/')[1],
      prompt: prompt,
      deviceType: 'DESKTOP',
    })
    console.log(`✓ Generated: ${name}`)
  }

  // 3. 생성된 스크린 목록 조회
  const screens = await mcp.stitch.list_screens({
    projectId: project.name.split('/')[1],
  })

  return { project, screens }
}

// 실제 페이지 템플릿 생성
const pageTemplates = [
  {
    name: 'Dashboard',
    prompt: `
      SaaS 대시보드 메인 화면:
      - 좌측: 접히는 사이드바 네비게이션
      - 상단: 헤더 (로고, 검색, 알림, 프로필)
      - 메인: KPI 카드 4개 + 차트 2개 + 최근 활동
      미니멀하고 전문적인 스타일.
    `,
  },
  {
    name: 'Settings',
    prompt: `
      설정 페이지:
      - 좌측: 설정 카테고리 네비게이션 (탭)
      - 우측: 폼 필드들 (프로필, 알림, 보안, 결제)
      각 섹션은 카드로 구분.
    `,
  },
  {
    name: 'Data Table',
    prompt: `
      데이터 테이블 페이지:
      - 상단: 제목, 필터 버튼, 검색, 추가 버튼
      - 중간: 테이블 (체크박스, 정렬, 상태 뱃지)
      - 하단: 페이지네이션
      많은 데이터를 효율적으로 표시.
    `,
  },
]

// scripts/release.ts

import { generateChangelog } from './changelog'
import { bumpVersion } from './versioning'

async function release() {
  // 1. 변경사항 분석
  const commits = await getCommitsSinceLastTag()
  const changeType = analyzeChangeType(commits)

  // 2. 버전 업데이트
  const newVersion = await bumpVersion(changeType)

  // 3. Changelog 생성 (AI 활용)
  const changelog = await generateChangelog(commits, {
    format: 'user-friendly',
    includeAIContributions: true,
  })

  // 4. 릴리스 생성
  await createGitTag(newVersion)
  await publishToNpm(newVersion)
  await notifyTeam(newVersion, changelog)
}

Day 1:  요구사항 정의, 토큰 시스템 생성
Day 2:  토큰 검증/수정, 기본 컴포넌트 5개
Day 3:  컴포넌트 5개 추가, 테스트 작성
Day 4:  패턴 라이브러리 (인증, 데이터 표시)
Day 5:  패턴 라이브러리 (네비게이션, 피드백)
Day 6:  Storybook 구성, 문서 자동 생성
Day 7:  접근성 감사, 버그 수정
Day 8:  시각적 회귀 테스트 구축
Day 9:  팀 온보딩 자료 준비
Day 10: 첫 릴리스 (v0.1.0)