デザインシステム × AI開発の — UI Stack・AutoLayout・Variables で迷わない開発体制を構築する

{
  "semantic": {
    "primary": {
      "foreground": "#2563EB",
      "background": "#EFF6FF"
    }
  },
  "action": {
    "button": {
      "primary": {
        "background": "{semantic.primary.foreground}",
        "text": "#FFFFFF"
      }
    },
    "spacing": {
      "small": "8px",
      "medium": "12px"
    }
  }
}

{
  "mcpServers": {
    "design-tokens": {
      "command": "node",
      "args": ["scripts/design-tokens-mcp.js"],
      "env": {
        "TOKENS_FILE": "design-tokens.json"
      }
    }
  }
}

// scripts/build-design-tokens.ts
import figmaAPI from 'figma-api';
 
interface DesignTokens {
  colors: Record<string, string>;
  spacing: Record<string, string>;
  typography: Record<string, Record<string, string>>;
}
 
async function extractFigmaVariables(): Promise<DesignTokens> {
  const client = new figmaAPI.Api({ personalAccessToken: process.env.FIGMA_TOKEN });
  const file = await client.getFile(process.env.FIGMA_FILE_ID);
 
  const tokens: DesignTokens = { colors: {}, spacing: {}, typography: {} };
 
  // Variables を走査して抽出
  file.styles.forEach((style) => {
    if (style.name.startsWith('Semantic/')) {
      tokens.colors[style.name] = style.value;
    }
  });
 
  return tokens;
}
 
async function generateCSSVariables(tokens: DesignTokens) {
  let css = ':root {\n';
  Object.entries(tokens.colors).forEach(([name, value]) => {
    const cssVarName = name.replace(/\//g, '-').toLowerCase();
    css += `  --color-${cssVarName}: ${value};\n`;
  });
  css += '}\n';
  return css;
}
 
// Usage in build
const tokens = await extractFigmaVariables();
const css = await generateCSSVariables(tokens);
// → output to src/styles/design-tokens.css

# .github/workflows/vrt.yml
name: Visual Regression Testing
 
on: [pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
 
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
 
      - run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
 
      - name: Run VRT tests with Percy
        run: npx percy exec -- npm run test:e2e
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
      - name: Upload Percy results
        if: always()
        run: |
          echo "Percy VRT Results: https://percy.io/builds/${PERCY_BUILD_ID}"

// components/ProductCard.tsx
import React, { CSSProperties } from 'react';
 
interface Product {
  id: string;
  name: string;
  description: string;
  image: string;
  price: number;
}
 
type ProductCardState = 'ideal' | 'loading' | 'empty' | 'error' | 'partial';
 
interface ProductCardProps {
  product?: Product;
  state: ProductCardState;
  onRetry?: () => void;
}
 
const DESIGN_TOKENS = {
  colors: {
    primary: '#2563EB',
    destructive: '#EF4444',
    background: '#FFFFFF',
    border: '#E5E7EB',
    textPrimary: '#1F2937',
    textSecondary: '#6B7280',
    errorBg: '#FEE2E2',
    errorBorder: '#EF4444',
  },
  spacing: {
    xs: '8px',
    sm: '12px',
    md: '16px',
    lg: '24px',
  },
};
 
const containerStyle: CSSProperties = {
  padding: DESIGN_TOKENS.spacing.sm,
  borderRadius: '8px',
  border: `1px solid ${DESIGN_TOKENS.colors.border}`,
  backgroundColor: DESIGN_TOKENS.colors.background,
  display: 'flex',
  flexDirection: 'column',
  gap: DESIGN_TOKENS.spacing.sm,
};
 
export const ProductCard: React.FC<ProductCardProps> = ({
  product,
  state,
  onRetry,
}) => {
  if (state === 'loading') {
    return (
      <div style={containerStyle}>
        <div style={{
          width: '100%',
          height: '200px',
          backgroundColor: '#F3F4F6',
          borderRadius: '4px',
        }} />
        <div style={{ height: '20px', backgroundColor: '#E5E7EB', borderRadius: '4px' }} />
      </div>
    );
  }
 
  if (state === 'empty') {
    return (
      <div style={{ ...containerStyle, textAlign: 'center', color: DESIGN_TOKENS.colors.textSecondary }}>
        <p>商品がまだ登録されていません。</p>
      </div>
    );
  }
 
  if (state === 'error') {
    return (
      <div style={{ ...containerStyle, backgroundColor: DESIGN_TOKENS.colors.errorBg, borderColor: DESIGN_TOKENS.colors.errorBorder }}>
        <p style={{ color: DESIGN_TOKENS.colors.destructive, fontWeight: 'bold' }}>エラーが発生しました</p>
        {onRetry && (
          <button onClick={onRetry} style={{
            padding: `${DESIGN_TOKENS.spacing.xs} ${DESIGN_TOKENS.spacing.sm}`,
            backgroundColor: DESIGN_TOKENS.colors.destructive,
            color: '#FFFFFF',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}>
            再試行
          </button>
        )}
      </div>
    );
  }
 
  if (!product || state === 'partial') {
    return (
      <div style={containerStyle}>
        {product?.image && <img src={product.image} alt={product.name} style={{ width: '100%', borderRadius: '4px' }} />}
        <h3 style={{ margin: 0, color: DESIGN_TOKENS.colors.textPrimary }}>{product?.name || '読み込み中...'}</h3>
      </div>
    );
  }
 
  // Ideal State
  return (
    <div style={containerStyle}>
      <img src={product.image} alt={product.name} style={{ width: '100%', borderRadius: '4px' }} />
      <h3 style={{ margin: 0, color: DESIGN_TOKENS.colors.textPrimary }}>{product.name}</h3>
      <p style={{ margin: 0, color: DESIGN_TOKENS.colors.textSecondary, fontSize: '14px' }}>{product.description}</p>
      <span style={{ color: DESIGN_TOKENS.colors.primary, fontWeight: 'bold', fontSize: '18px' }}>
        ${product.price.toFixed(2)}
      </span>
    </div>
  );
};