워크플로우 전략

// Figma에서 추출된 컴포넌트 명세
{
  "component": "Card",
  "variant": "elevated",
  "properties": {
    "padding": "{spacing.4}",
    "borderRadius": "{radius.lg}",
    "shadow": "{shadow.md}"
  },
  "slots": {
    "header": { "component": "CardHeader" },
    "content": { "component": "CardContent" },
    "footer": { "component": "CardFooter" }
  }
}

## Task

Figma 명세를 기반으로 React 컴포넌트를 생성하세요.

## Design Spec

{figma_json}

## Constraints

1. 디자인 시스템 컴포넌트만 사용
2. 하드코딩 금지, 토큰 참조
3. TypeScript strict mode
4. 접근성 요구사항 충족

## Output

완전한 TSX 컴포넌트 코드

# Claude Code로 대시보드 구현
> "사용자 분석 대시보드를 만들어줘.
   - 상단에 KPI 카드 4개
   - 중간에 차트 2개 (막대, 선)
   - 하단에 최근 활동 테이블"

// Stitch MCP를 통한 디자인 생성
const screen = await stitch.generateScreenFromText({
  projectId: 'my-project',
  prompt: `
    대시보드 화면을 디자인해줘:
    - 상단: KPI 카드 4개 (매출, 사용자, 전환율, 이탈률)
    - 중간: 막대 차트 + 선 차트
    - 하단: 데이터 테이블
    - 스타일: 미니멀, 다크 모드 지원
  `,
  deviceType: 'DESKTOP',
})

// 생성된 UI에서 토큰 추출
const extractedTokens = analyzeGeneratedUI({
  colors: extractColors(screen),
  spacing: extractSpacing(screen),
  typography: extractTypography(screen),
})

// 디자인 시스템에 반영
await updateDesignTokens(extractedTokens)

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

// 2. 컴포넌트별 스크린 생성
const components = [
  '로그인 폼 - 이메일/비밀번호 입력, 소셜 로그인 버튼',
  '사용자 프로필 카드 - 아바타, 이름, 역할, 통계',
  '알림 드롭다운 - 읽음/안읽음, 시간, 액션 버튼',
  '데이터 테이블 - 정렬, 필터, 페이지네이션',
]

for (const component of components) {
  await mcp.stitch.generate_screen_from_text({
    projectId: project.name.split('/')[1],
    prompt: component,
    deviceType: 'DESKTOP',
  })
}

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

// figma-sync.ts

interface SyncConfig {
  figmaFileId: string
  tokensPath: string
  direction: 'figma-to-code' | 'code-to-figma' | 'bidirectional'
}

async function syncTokens(config: SyncConfig) {
  if (config.direction === 'figma-to-code' || config.direction === 'bidirectional') {
    // Figma → Code
    const figmaTokens = await fetchFigmaVariables(config.figmaFileId)
    const codeTokens = transformToCodeFormat(figmaTokens)
    await writeTokens(config.tokensPath, codeTokens)
  }

  if (config.direction === 'code-to-figma' || config.direction === 'bidirectional') {
    // Code → Figma
    const codeTokens = await readTokens(config.tokensPath)
    const figmaVariables = transformToFigmaFormat(codeTokens)
    await updateFigmaVariables(config.figmaFileId, figmaVariables)
  }
}

// component-sync.ts

interface ComponentChange {
  component: string
  changeType: 'props' | 'styles' | 'structure'
  source: 'design' | 'code'
  diff: object
}

async function handleComponentChange(change: ComponentChange) {
  if (change.source === 'design') {
    // 디자인 변경 → 코드 업데이트
    const updatedCode = await generateCodeFromDesign(change)
    await createPullRequest({
      title: `sync: Update ${change.component} from design`,
      body: `디자인 변경사항 자동 동기화\n\n${JSON.stringify(change.diff, null, 2)}`,
      files: updatedCode,
    })
  } else {
    // 코드 변경 → 디자인 알림
    await notifyDesigner({
      component: change.component,
      message: `코드에서 ${change.changeType} 변경됨. 디자인 업데이트 필요`,
      diff: change.diff,
    })
  }
}

# .github/workflows/design-system-validate.yml
name: Design System Validation

on:
  pull_request:
    paths:
      - 'packages/ui/**'
      - 'tokens/**'

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Type Check
        run: yarn tsc --noEmit

      - name: Lint (DS Rules)
        run: yarn lint:design-system

      - name: Accessibility Audit
        run: yarn test:a11y

      - name: Visual Regression
        run: yarn test:visual