デザイントークンをAIで管理する

// style-dictionary.config.js（Style Dictionary v3.x）
module.exports = {
  source: ["tokens/**/*.json"],
  platforms: {
    css: {
      transformGroup: "css",
      prefix: "sd",
      buildPath: "build/css/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables",
        },
      ],
    },
  },
};

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#0066CC",
        "$type": "color",
        "$description": "ブランドのプライマリカラー"
      }
    }
  }
}

# scripts/ai-token-check.py
import json
import subprocess
import sys

def check_tokens_with_ai(tokens_path: str, rules_path: str) -> dict:
    with open(tokens_path) as f:
        tokens = json.load(f)
    with open(rules_path) as f:
        rules = f.read()

    prompt = f"""
あなたはデザイントークンの品質監査AIです。
以下のルールに従ってトークンJSONを検査し、違反をJSONで返してください。

## ルール
{rules}

## トークンJSON
{json.dumps(tokens, ensure_ascii=False, indent=2)}

## 出力形式（必ずJSONのみ返すこと）
{{
  "violations": [
    {{
      "token": "トークンパス",
      "rule": "違反したルール名",
      "message": "詳細メッセージ"
    }}
  ],
  "summary": "全体サマリー"
}}
"""

    result = subprocess.run(
        ["claude", "-p", prompt, "--output-format", "json"],
        capture_output=True,
        text=True,
    )
    return json.loads(result.stdout)

# token-rules.yaml（ルール定義）
rules:
  - name: naming_convention
    description: "トークン名はdot.case形式（例: color.brand.primary）"
  - name: color_format
    description: "colorタイプの値はHEX(#RRGGBB)またはrgba()形式のみ"
  - name: reference_exists
    description: "参照（{token.path}形式）は必ず実在するトークンを指すこと"
  - name: dtcg_schema
    description: "$value/$typeキーが必須。$typeはW3C DTCGの型定義に準拠"
  - name: required_description
    description: "トップレベルカテゴリのトークンは$descriptionを持つこと"

# scripts/token-impact.py
import json
import re
import sys
from pathlib import Path

def find_references(tokens: dict, changed_path: str, current_path: str = "") -> list[str]:
    """変更されたトークンパスを参照しているトークンを再帰探索"""
    affected = []
    for key, value in tokens.items():
        path = f"{current_path}.{key}" if current_path else key
        if isinstance(value, dict):
            if "$value" in value:
                ref_pattern = re.compile(r"\{([^}]+)\}")
                if isinstance(value["$value"], str):
                    refs = ref_pattern.findall(value["$value"])
                    if changed_path in refs:
                        affected.append(path)
            else:
                affected.extend(find_references(value, changed_path, path))
    return affected

def main():
    tokens_path = Path(sys.argv[1])
    changed_token = sys.argv[2]  # 例: "color.brand.primary"

    with open(tokens_path) as f:
        tokens = json.load(f)

    affected = find_references(tokens, changed_token)
    print(f"変更されたトークン: {changed_token}")
    print(f"影響を受けるトークン ({len(affected)}件):")
    for t in affected:
        print(f"  - {t}")

if __name__ == "__main__":
    main()

# scripts/ai-token-naming.py
import json
import subprocess

def suggest_token_name(tokens_path: str, description: str, token_type: str) -> str:
    with open(tokens_path) as f:
        tokens = json.load(f)

    # 既存トークンのパス一覧を抽出
    def extract_paths(obj, prefix=""):
        paths = []
        for key, value in obj.items():
            p = f"{prefix}.{key}" if prefix else key
            if isinstance(value, dict) and "$value" in value:
                paths.append(p)
            elif isinstance(value, dict):
                paths.extend(extract_paths(value, p))
        return paths

    existing_paths = extract_paths(tokens)[:50]  # 先頭50件を文脈として渡す

    prompt = f"""
既存のデザイントークン命名規則を参考に、新しいトークン名を提案してください。

## 既存トークンパス（参考）
{chr(10).join(existing_paths)}

## 追加したいトークンの説明
- 用途: {description}
- タイプ: {token_type}

## 要求
- dot.case形式で提案
- 3〜4階層（例: component.element.variant.property）
- 既存命名パターンと整合性を保つ
- 候補を3つ提示し、理由を1行で説明

候補のみを返してください（JSON不要）。
"""

    result = subprocess.run(
        ["claude", "-p", prompt],
        capture_output=True, text=True,
    )
    return result.stdout.strip()

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

on:
  pull_request:
    paths:
      - "tokens/**"
      - "tokens.json"

jobs:
  token-lint:
    name: Style Dictionary Build Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

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

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

      - run: pnpm install --frozen-lockfile

      # Style Dictionaryビルドが通ることを確認
      - name: Build tokens
        run: pnpm exec style-dictionary build --config style-dictionary.config.js

  token-ai-check:
    name: AI Consistency Check
    runs-on: ubuntu-latest
    needs: token-lint
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2  # 差分取得のため2コミット分取得

      - uses: actions/setup-python@v5
        with:
          python-version: "3.12"

      - name: Install Claude CLI
        run: pip install anthropic-claude-cli

      - name: Run AI token check
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          python scripts/ai-token-check.py tokens/tokens.json token-rules.yaml \
            --output check-result.json

      - name: Check for violations
        run: |
          python - <<'EOF'
          import json, sys
          with open("check-result.json") as f:
              result = json.load(f)
          violations = result.get("violations", [])
          if violations:
              print(f"::error::AI検証で{len(violations)}件の違反を検出しました")
              for v in violations:
                  print(f"::error file={v['token']}::{v['rule']}: {v['message']}")
              sys.exit(1)
          print("AI検証: 違反なし")
          EOF

  token-impact:
    name: Impact Analysis
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 2

      - uses: actions/setup-python@v5
        with:
          python-version: "3.12"

      - name: Detect changed tokens
        id: changed
        run: |
          git diff HEAD~1 HEAD -- tokens/ > token-diff.txt
          echo "diff_file=token-diff.txt" >> $GITHUB_OUTPUT

      - name: Run impact analysis
        run: |
          python scripts/token-impact-ci.py \
            --tokens tokens/tokens.json \
            --diff ${{ steps.changed.outputs.diff_file }} \
            --output impact-report.md

      - name: Post PR comment
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const report = fs.readFileSync('impact-report.md', 'utf8');
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## デザイントークン変更影響レポート\n\n${report}`
            });