AIデザイン自動化完全戦略：Stitch・Figma Make・MCPを組み合わせた個人開発フロー

# Design System Architecture v1.0
 
## System Name
Cosmos Design System v1.0
 
## Design Philosophy
- **Minimalism with Humanity**: 余白と情報密度のバランス
- **Playfulness**: Stiffnessを避け、アニメーションで親しみやすさを表現
- **Accessibility First**: WCAG 2.1 AA 達成を最低条件
- **Localization-Ready**: 日本語特有の行間・文字詰めに対応
 
## Scope
- Web App（Next.js 16+）
- iOS App（SwiftUI 5.0+）
- Android App（Jetpack Compose）
- Figma コンポーネントライブラリ

## Color System
 
### Semantic Colors
- Primary: #3A86FF (Action, Links, Focus)
- Secondary: #8338EC (Emphasis, Highlights)
- Success: #06A77D (Positive feedback)
- Warning: #FFB703 (Caution)
- Error: #E63946 (Destructive)
 
### Neutral Palette
- Neutral-900: #0A0A0A (Text, Depth 1)
- Neutral-700: #424242 (Secondary text)
- Neutral-500: #9E9E9E (Tertiary)
- Neutral-300: #E0E0E0 (Borders)
- Neutral-50: #F9F9F9 (Backgrounds)
 
### Dark Mode Overrides
- Background Dark: #121212
- Surface Dark: #1E1E1E
- Text on Dark: #FFFFFF (opacity 87%)

## Typography System
 
### Font Selection
- UI Font: Inter (EN) + Noto Sans JP (JP)
- Monospace: JetBrains Mono + HackGen (JP)
 
### Type Scale
- H1: Inter Bold 32px, line-height 1.25
- H2: Inter Bold 24px, line-height 1.33
- Body: Inter Regular 16px, line-height 1.6
- Small: Inter Regular 12px, line-height 1.5
- Caption: Inter Light 11px, line-height 1.45
 
### Font Weights
- Light: 300
- Regular: 400
- Medium: 500
- Bold: 700
- Extra Bold: 800

## Spacing System
 
### Base Unit: 4px Modular Scale
- xs: 4px (micro spacing)
- sm: 8px (tight)
- md: 16px (standard)
- lg: 24px (comfortable)
- xl: 32px (breathing room)
- 2xl: 48px (section separation)
- 3xl: 64px (major sections)
 
### Component-Level Rules
- Button padding: 12px (vertical) × 16px (horizontal)
- Card padding: 16px
- Section margin: 32px (top) / 24px (bottom)
- Gutter (grid): 16px

## Animation & Motion
 
### Easing Functions
- Standard: cubic-bezier(0.4, 0.0, 0.2, 1)
- Entrance: cubic-bezier(0.0, 0.0, 0.2, 1)
- Deceleration: cubic-bezier(0.4, 0.0, 1.0, 1.0)
- Emphasis: cubic-bezier(0.68, -0.55, 0.265, 1.55)
 
### Duration & Delay
- Micro: 100ms (ボタン反応)
- Short: 200ms (フェード)
- Medium: 300-400ms (モーダル)
- Long: 500-800ms (ページ遷移)
- Delay: 0 (即座) / 50ms (sequential) / 100ms+ (staggered)
 
### Interaction Patterns
- Hover: スケール 1.05, transition 200ms
- Focus: アウトライン 2px (Primary色)
- Active: 背景色 15% darker
- Disabled: opacity 50%, cursor not-allowed

## Core Components
 
### Button Component
- States: Default, Hover, Focus, Active, Disabled, Loading
- Variants: Filled, Outlined, Tonal, Text
- Sizes: xs (28px), sm (32px), md (40px), lg (48px)
- Icons: Leading, Trailing, Icon-only
- Content: Label, Badge (optional)
 
#### Filled Button (Primary Action)
- Background: Primary
- Text Color: White
- Border: None
- Padding: md size = 12px (v) × 24px (h)
- Border Radius: 8px
- Hover: Overlay +20% darker
- Active: Overlay +30% darker
 
### Card Component
- Background: White (or Neutral-50 dark)
- Border: Optional 1px Neutral-300
- Shadow: 0 1px 3px rgba(0,0,0,0.12)
- Border Radius: 12px
- Padding: 16px
 
### Text Input
- Border: 1px Neutral-300
- Border Radius: 4px
- Padding: 8px 12px
- Focus: Border Primary 2px

## Implementation Checklist
 
### Figma Setup
- [ ] すべてのセマンティックカラーを Variables に登録
- [ ] タイポグラフィスタイルをコンポーネントスタイルに統合
- [ ] スペーシングトークンを自動レイアウトに反映
- [ ] アニメーション仕様を Prototypes に記録
- [ ] ダークモード切り替え機能を実装
- [ ] すべてのコンポーネントに説明文を付記
 
### Code Generation (MCP)
- [ ] design-tokens.ts 自動生成の確認
- [ ] Button, Card, Input コンポーネント自動生成
- [ ] CSS Variable マッピング確認
- [ ] ダークモード CSS 自動生成
- [ ] TypeScript 型安全性確認
 
### Quality Assurance
- [ ] Lighthouse Accessibility スコア 90+
- [ ] WCAG 2.1 AA 達成確認
- [ ] prefers-reduced-motion サポート確認

/project-root
├── design.md
├── figma/
│   ├── workspace-url.txt
│   └── sync-status.json
├── src/
│   ├── tokens/
│   │   ├── design-tokens.ts
│   │   ├── colors.ts
│   │   ├── typography.ts
│   │   └── spacing.ts
│   ├── components/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Input.tsx

// auto-generated from Figma MCP
import React from 'react';
import { DesignTokens } from '@/tokens/design-tokens';
 
export interface ButtonProps {
  size?: 'xs' | 'sm' | 'md' | 'lg';
  variant?: 'filled' | 'outlined' | 'tonal';
  state?: 'default' | 'hover' | 'active' | 'disabled';
  children?: React.ReactNode;
}
 
export const Button: React.FC<ButtonProps> = ({
  size = 'md',
  variant = 'filled',
  state = 'default',
  children,
}) => {
  const sizeStyles = {
    xs: { padding: '6px 12px' },
    sm: { padding: '8px 16px' },
    md: { padding: '12px 24px' },
    lg: { padding: '16px 32px' },
  };
 
  const variantStyles = {
    filled: {
      backgroundColor: DesignTokens.colors.primary,
      color: '#FFFFFF',
    },
    outlined: {
      backgroundColor: 'transparent',
      border: `1px solid ${DesignTokens.colors.primary}`,
    },
  };
 
  return (
    <button
      style={{
        ...sizeStyles[size],
        ...variantStyles[variant],
        transition: `all 200ms cubic-bezier(0.4, 0.0, 0.2, 1)`,
        borderRadius: '8px',
      }}
    >
      {children}
    </button>
  );
};

// auto-generated from design.md
export const DesignTokens = {
  colors: {
    primary: '#3A86FF',
    secondary: '#8338EC',
    success: '#06A77D',
    warning: '#FFB703',
    error: '#E63946',
    neutral: {
      '900': '#0A0A0A',
      '700': '#424242',
      '500': '#9E9E9E',
      '300': '#E0E0E0',
      '50': '#F9F9F9',
    },
  },
  typography: {
    h1: { fontSize: '32px', fontWeight: 700, lineHeight: 1.25 },
    h2: { fontSize: '24px', fontWeight: 700, lineHeight: 1.33 },
    body: { fontSize: '16px', fontWeight: 400, lineHeight: 1.6 },
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
} as const;