Developer Guide
Ship UI with Confidence

⚡ Quick Start

Before vs After

// ❌ Before: Hardcoded values everywhere
<button style={{ backgroundColor: '#0064FA', padding: '12px 24px' }}>Click</button>

// ✅ After: CSS variables from extracted design system
<Button variant="primary">Click</Button>

Setup in 3 Steps

# 1. Install
pip install playwright && playwright install chromium

# 2. Extract design system
python scripts/wizard.py --url https://example.com --name "MyProject"

# 3. Copy to your project
cp output/MyProject/design-system.css src/styles/
cp -r output/MyProject/components/* src/components/

🔧 Framework Integration

React + Tailwind CSS

// tailwind.config.js — extend with design tokens
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--semi-color-primary)',
        secondary: 'var(--semi-color-secondary)',
      },
      spacing: {
        'tight': 'var(--semi-spacing-tight)',
        'base': 'var(--semi-spacing-base)',
      }
    }
  }
}

Vue 3

# Generate Vue components
python scripts/component_generator.py \
  --input output/MyProject/design-system.json \
  --all --framework vue --output ./src/components

Next.js

// app/layout.tsx
import './globals.css';
import './styles/design-system.css';
// Design tokens available globally

🧩 Working with Components

// Generated component structure
components/
├── button/ → component.tsx, index.ts, types.ts
├── card/  → component.tsx, index.ts
└── input/ → component.tsx, index.ts

// Usage
import { Button, Card, Input } from './components';

<Card variant="elevated">
  <Input placeholder="Type here" />
  <Button variant="primary">Submit</Button>
</Card>

🎨 Design Tokens in Code

/* Generated design-system.css */
:root {
  --semi-color-primary: #0064FA;
  --semi-color-primary-hover: #0052CC;
  --semi-color-success: #10B981;
  --semi-color-danger: #EF4444;
  --semi-font-family-regular: 'Inter', sans-serif;
  --semi-spacing-base: 16px;
  --semi-border-radius-medium: 6px;
  --semi-shadow-elevated: 0 4px 14px rgba(0,0,0,0.1);
}

Best practices: Always use CSS variables, never hardcode hex values. Use semantic names. Reference tokens via var().

🚀 CI/CD Integration

Automate design system checks in your pipeline with GitHub Actions:

# .github/workflows/design-system.yml
name: Design System Sync
on:
  push:
    branches: [main]
jobs:
  extract-and-compare:
    runs-on: ubuntu-latest
    steps:
      - name: Extract design system
        run: python scripts/wizard.py --url $STAGING_URL
      - name: Compare with baseline
        run: python scripts/figma_bridge.py compare ...

🧪 Testing

// Visual regression + token validation
describe('Design System', () => {
  test('uses correct primary color', () => {
    render(<Button variant="primary">Test</Button>);
    const styles = window.getComputedStyle(screen.getByRole('button'));
    expect(styles.backgroundColor).toBe('rgb(0, 100, 250)');
  });
});

💡 Best Practices