12.6CI Integration

# .github/workflows/design-system.yml
name: Design System Verification
on:
  pull_request:
    paths:
      - 'src/components/**'
      - 'design-tokens/**'
      - 'src/styles/**'

jobs:
  verify-tokens:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build && npm run start &

      - name: Verify design tokens
        run: npx playwright test tests/design-system/

      - name: Check Figma drift
        run: python scripts/figma_design_drift.py --report drift-report.json
        env:
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}

      - name: Comment drift report on PR
        if: always()
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            if (fs.existsSync('drift-report.json')) {
              const report = JSON.parse(fs.readFileSync('drift-report.json'));
              if (report.length > 0) {
                const body = `## Design Drift Detected\n\n` +
                  report.map(d =>
                    `- **${d.property}**: Figma=${d.figma}, Code=${d.implementation}`
                  ).join('\n');
                github.rest.issues.createComment({
                  issue_number: context.issue.number,
                  owner: context.repo.owner,
                  repo: context.repo.repo,
                  body: body
                });
              }
            }

Design system verification prevents the gradual divergence between design intent and implementation that manual review inevitably misses. Automated comparison between Figma specs and computed CSS styles catches drift at the PR level, before it compounds across dozens of components.