AIとデザインシステムの共創

┌────────────────────────────────────────────────────────┐
│          AI × デザインシステム 協働ワークフロー         │
├────────────────────────────────────────────────────────┤
│                                                        │
│  [デザイントークン]                                    │
│       ↓ コンテキスト注入                               │
│  [AI プロンプト] → コンポーネント生成                  │
│                       ↓                               │
│               [Storybook Story 作成]                   │
│                       ↓                               │
│          ┌────────────┴────────────┐                   │
│          ↓                        ↓                   │
│  [ビジュアル回帰テスト]  [トークン準拠チェック]          │
│  (Chromatic)             (Style Dictionary)            │
│          ↓                        ↓                   │
│          └────────────┬────────────┘                   │
│                       ↓                               │
│              [CI 品質ゲート]                           │
│               Pass → PR マージ                        │
│               Fail → 自動フィードバック → 再生成       │
│                                                        │
└────────────────────────────────────────────────────────┘

// tokens/color.json（Style Dictionary 形式）
{
  "color": {
    "primary": { "value": "#0066cc", "type": "color" },
    "primary-hover": { "value": "#0052a3", "type": "color" },
    "surface": { "value": "#ffffff", "type": "color" },
    "text-primary": { "value": "#1a1a1a", "type": "color" }
  },
  "spacing": {
    "sm": { "value": "8px", "type": "spacing" },
    "md": { "value": "16px", "type": "spacing" },
    "lg": { "value": "24px", "type": "spacing" }
  },
  "typography": {
    "label-sm": { "value": "12px/1.5 Inter, sans-serif", "type": "typography" }
  }
}

// scripts/generate-ai-context.ts
import fs from "fs";
import path from "path";

interface TokenContext {
  colors: Record<string, string>;
  spacing: Record<string, string>;
  typography: Record<string, string>;
}

function buildTokenContext(tokensDir: string): TokenContext {
  const colorTokens = JSON.parse(
    fs.readFileSync(path.join(tokensDir, "color.json"), "utf8")
  );
  const spacingTokens = JSON.parse(
    fs.readFileSync(path.join(tokensDir, "spacing.json"), "utf8")
  );

  const colors: Record<string, string> = {};
  Object.entries(colorTokens.color).forEach(([key, val]: [string, any]) => {
    colors[`--color-${key}`] = val.value;
  });

  return { colors, spacing: {}, typography: {} };
}

function generateSystemPrompt(context: TokenContext): string {
  const colorList = Object.entries(context.colors)
    .map(([key, val]) => `  ${key}: ${val}`)
    .join("\n");

  return `
# Design System Context

このプロジェクトでは以下のデザイントークンを使用してください。
色・スペーシング・フォントは必ずCSS変数で参照し、ハードコードを禁止します。

## カラートークン（CSS変数名: 値）
${colorList}

## 命名規則
- コンポーネント名: PascalCase（例: PrimaryButton, CardContainer）
- Props: camelCase（例: isDisabled, onClickHandler）
- バリアント: "primary" | "secondary" | "ghost"

## 必須要件
- CSS-in-JS(styled-components/emotion)を使う場合はCSS変数を参照する
- Tailwindを使う場合はtailwind.config.tsのカスタムトークンを使う
- ハードコードした色（#hex, rgb()等）は使用禁止
`;
}

const context = buildTokenContext("./tokens");
const prompt = generateSystemPrompt(context);
fs.writeFileSync("./ai-context/design-system-prompt.md", prompt);
console.log("AI context generated:", "./ai-context/design-system-prompt.md");

## System Prompt（デザインシステムコンテキスト込み）

{上記スクリプトで生成したコンテキスト}

## Task

以下の要件でButtonコンポーネントをReact + TypeScriptで作成してください：

- バリアント: primary / secondary / ghost
- サイズ: sm / md / lg
- disabled 状態対応
- アイコン（左/右）オプション
- アクセシビリティ: aria-label, role="button"対応

## 出力フォーマット

1. コンポーネントファイル（Button.tsx）
2. Storybookストーリーファイル（Button.stories.tsx）
3. 型定義（ButtonProps）

# Storybook初期化（公式値: Storybook 8.x系）
pnpm dlx storybook@latest init

# 必要なアドオン追加
pnpm add -D @storybook/addon-a11y @storybook/addon-interactions

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};

export default config;

// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta = {
  title: "Components/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["primary", "secondary", "ghost"],
    },
    size: {
      control: { type: "select" },
      options: ["sm", "md", "lg"],
    },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: "primary",
    size: "md",
    children: "ボタン",
  },
};

export const Secondary: Story = {
  args: {
    variant: "secondary",
    size: "md",
    children: "ボタン",
  },
};

export const Disabled: Story = {
  args: {
    variant: "primary",
    size: "md",
    children: "無効化されたボタン",
    disabled: true,
  },
};

# Chromatic CLI インストール
pnpm add -D chromatic

# 初回実行（プロジェクトIDを取得）
pnpm dlx chromatic --project-token=<YOUR_TOKEN> --build-script-name=build-storybook

# .github/workflows/chromatic.yml
name: Chromatic Visual Regression

on:
  push:
    branches:
      - "**"
  pull_request:
    types: [opened, synchronize]

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Chromaticはgit履歴を使用

      - uses: pnpm/action-setup@v3
        with:
          version: 9

      - uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "pnpm"

      - run: pnpm install --frozen-lockfile

      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          buildScriptName: build-storybook
          # AI生成コンポーネントのPRでは自動承認しない
          autoAcceptChanges: false
          # 差分が検出された場合はビルドを失敗にする
          exitZeroOnChanges: false

// eslint-rules/no-hardcoded-color.ts
import { Rule } from "eslint";

const rule: Rule.RuleModule = {
  meta: {
    type: "problem",
    docs: {
      description: "デザイントークンを使用せず色をハードコードすることを禁止",
    },
    messages: {
      noHardcodedColor:
        "ハードコードされた色 '{{value}}' は禁止です。デザイントークン（CSS変数）を使用してください。",
    },
  },
  create(context) {
    return {
      Literal(node) {
        if (typeof node.value === "string") {
          // #hex, rgb(), rgba(), hsl() のパターンを検出
          const colorPattern =
            /^#[0-9a-fA-F]{3,8}$|^rgba?\(|^hsla?\(/;
          if (colorPattern.test(node.value.trim())) {
            context.report({
              node,
              messageId: "noHardcodedColor",
              data: { value: node.value },
            });
          }
        }
      },
    };
  },
};

export default rule;

// .eslintrc.json
{
  "rules": {
    "custom/no-hardcoded-color": "error",
    "custom/no-hardcoded-spacing": "warn"
  }
}

#!/bin/bash
# scripts/check-token-compliance.sh
# AI生成コンポーネントのトークン準拠を確認するスクリプト（経験則）

CHANGED_FILES=$(git diff --name-only origin/main...HEAD | grep -E "\.(tsx|ts|css|scss)$")

if [ -z "$CHANGED_FILES" ]; then
  echo "No component files changed."
  exit 0
fi

echo "Checking token compliance for:"
echo "$CHANGED_FILES"

# ハードコードされた色の検出
VIOLATIONS=$(grep -rn "#[0-9a-fA-F]\{3,8\}\|rgb(\|rgba(" $CHANGED_FILES 2>/dev/null)

if [ -n "$VIOLATIONS" ]; then
  echo "::error::Token compliance violation detected:"
  echo "$VIOLATIONS"
  echo ""
  echo "Use CSS variables (--color-primary, etc.) instead of hardcoded values."
  exit 1
fi

echo "Token compliance check passed."
exit 0

# .github/workflows/token-check.yml
name: Design Token Compliance

on:
  pull_request:
    paths:
      - "src/**/*.tsx"
      - "src/**/*.ts"
      - "src/**/*.css"

jobs:
  token-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Check token compliance
        run: bash scripts/check-token-compliance.sh

# .github/workflows/design-system-qa.yml
name: Design System QA

on:
  pull_request:
    paths:
      - "src/components/**"
      - "src/tokens/**"

jobs:
  # Step 1: デザイントークン準拠チェック
  token-compliance:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: bash scripts/check-token-compliance.sh

  # Step 2: Storybook ビルド + Chromatic
  visual-regression:
    runs-on: ubuntu-latest
    needs: token-compliance
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "pnpm"
      - run: pnpm install --frozen-lockfile
      - name: Run Chromatic
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          autoAcceptChanges: false
          exitZeroOnChanges: false

  # Step 3: アクセシビリティチェック
  a11y-check:
    runs-on: ubuntu-latest
    needs: token-compliance
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - run: pnpm install --frozen-lockfile
      - run: pnpm storybook:test --ci

// プロンプトに含めるProps型サンプル
interface ButtonProps {
  variant: "primary" | "secondary" | "ghost"; // 必ずこの3種類のみ
  size: "sm" | "md" | "lg";
  isDisabled?: boolean; // disabled ではなく isDisabled
  onClick: () => void;
}

// .storybook/preview.ts
import type { Preview } from "@storybook/react";

const preview: Preview = {
  globalTypes: {
    theme: {
      description: "Theme",
      defaultValue: "light",
      toolbar: {
        title: "Theme",
        items: ["light", "dark"],
        dynamicTitle: true,
      },
    },
  },
  decorators: [
    (Story, context) => {
      const theme = context.globals.theme || "light";
      document.documentElement.setAttribute("data-theme", theme);
      return <Story />;
    },
  ],
};

export default preview;

// src/components/Button/Button.test.ts（Storybook test）
import { composeStories } from "@storybook/react";
import { render } from "@testing-library/react";
import { axe } from "jest-axe";
import * as stories from "./Button.stories";

const { Primary, Secondary, Disabled } = composeStories(stories);

test.each([
  ["Primary", Primary],
  ["Secondary", Secondary],
  ["Disabled", Disabled],
])("%s story has no a11y violations", async (name, Story) => {
  const { container } = render(<Story />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});