generate-theme

テーマの生成

この機能は $build-design-system に移行しました。新しいタスクでは新しい名称を優先して使用してください。現在のエントリーポイントも、既存のインストールと呼び出しとの互換性を引き続き維持します。

対象のウェブページからデザイントークンを収集し、デザイン仕様書 DESIGN.md と Tailwind CSS テーマを生成します。

前提条件

• Node.js >= 18
• extract-page-data または clone-page スキルがインストールされていること（データ収集に使用）

ワークフロー

Step 1: デザインデータとスクリーンショットの収集

extract-page-data または clone-page スキルを使用して、theme.json と複数の視点からのスクリーンショットを収集します。Playwright、ブラウザー自動化、in-app Browser/Chrome、その他の同等ツールも使用できます。スクリーンショット、レスポンシブスクリーンショット、トークン／スタイルの根拠を安定して出力できることが条件です。

# 方式 A: extract-page-data（快速采集）
node <extract-page-data>/scripts/extract.mjs <url> --theme --screenshot --scroll -o ./theme-data

# 方式 B: clone-page（采集 + 多视口截图 + section 截图，推荐）
node <clone-page>/scripts/clone.mjs <url> quick -o ./theme-data --scroll
node <clone-page>/scripts/clone.mjs <url> responsive -o ./theme-data
# 按需采集关键 section 的截图
node <clone-page>/scripts/clone.mjs <url> styles -o ./theme-data --selector "header"
node <clone-page>/scripts/clone.mjs <url> styles -o ./theme-data --selector "main > section:nth-child(1)"
node <clone-page>/scripts/clone.mjs <url> styles -o ./theme-data --selector "footer"

収集後、theme-data/ に以下のファイルが含まれている必要があります。

• theme.json — デザイントークン（色、フォント、間隔、角丸、影、アニメーション…）
• screenshot.png — 全ページのスクリーンショット（最も重要な参考資料）
• responsive/ — 複数のビューポートのスクリーンショット（desktop/tablet/mobile）
• sections/*/screenshot.png — 各セクションの個別スクリーンショット

Step 2: スクリーンショットの分析（最も重要なステップ）

スクリーンショットがデザイン仕様の最終的な判断基準です。多くの重要なデザイン情報はスクリーンショットにしか存在せず、CSS プロパティからは抽出できません。

スクリーンショットで必ず確認するデザインの観点

観点	スクリーンショットで確認する内容	theme.json で取得可能か
🎨 ブランドのトーン	全体的なビジュアルスタイル——ミニマル／テクノロジー／温かみ／高級感／活気	❌ 不可
📐 レイアウトのリズム	セクション間の余白の比率、コンテンツ密度、配置方法	❌ 不可
🖼️ 視覚的階層	強調されている要素、視線の重心、情報の優先順位	❌ 不可
🎭 装飾要素	背景パターン、グラデーションの方向、すりガラス効果、光と影の効果	⚠️ 一部可能
📱 レスポンシブ戦略	ビューポートごとのレイアウト変化、要素の非表示／再配置ルール	❌ 不可
🧩 コンポーネントのスタイル	ボタンの形状／サイズ、カードのスタイル、ナビゲーションのパターン、フォームのスタイル	⚠️ 一部可能
🔤 タイポグラフィ	見出しの階層による視覚的印象、段落間隔、テキストの配置	⚠️ 一部可能
🌈 グラデーションの方向	左から右／上から下／放射状、グラデーション色の移り変わり	❌ 不可
📸 画像のスタイル	写真／イラスト／3D／アイコンのスタイル、画像の角丸、アスペクト比	❌ 不可
☀️ 明暗の雰囲気	ページ全体がライト系かダーク系か、色の彩度の傾向	⚠️ 一部可能

スクリーンショットの分析手順

1. 全ページのスクリーンショット screenshot.png を確認します。

   • ブランドのトーンを判断します（3～5 個のキーワードで説明）
   • メインカラーとサブカラーを特定します
   • 全体的なレイアウトパターンを確認します（単一カラム／2 カラム／グリッド／カード一覧）
   • 装飾要素に注意します（グラデーション背景／ノイズテクスチャ／光の効果／幾何学模様）

2. レスポンシブスクリーンショット responsive/ を確認します。

   • desktop、tablet、mobile のレイアウト変化を比較します
   • 小さい画面で非表示／折りたたまれる要素を記録します
   • ナビゲーションの変化を確認します（横並び → ハンバーガーメニュー）

3. セクションのスクリーンショット sections/*/screenshot.png を確認します。

   • 各領域の個別のビジュアルスタイル
   • コンポーネントの具体的な形状（ボタンのスタイル、カードのスタイル、フォームのスタイル）
   • 画像と装飾の使用方法

分析結果は、DESIGN.md の「ビジュアルテーマと雰囲気」「レイアウトと間隔」「コンポーネント仕様」「レスポンシブ動作」などのセクションに直接記載してください。

Step 3: theme.json の分析

theme.json を読み込み、各トークンのカテゴリを分析して分類します。

# 查看采集的设计令牌
cat theme-data/theme.json

理解しておくべき点：

• colors.background[0] — メインの背景色
• colors.text[0] — メインのテキスト色
• typography.families[0] — メインフォント
• spacing — 間隔の体系
• radius — 角丸の体系
• shadow.box — 影の体系
• transitions — トランジションアニメーション
• animations — CSS アニメーション
• cssVariables — ページに既存の CSS 変数（存在する場合は優先して使用）

⚠️ 注意： theme.json のデータは機械的に抽出されたプロパティ値であり、欠落やずれがある可能性があります。theme.json の値とスクリーンショットから確認した見た目が矛盾する場合は、スクリーンショットを優先してください。

Step 4: 成果物の生成

出力ディレクトリの構成：

<output>/
├── DESIGN.md            # 设计规范文档（getdesign.md / DESIGN.md 9 段式标准）
├── globals.css          # Tailwind CSS v4 主题定义
└── screenshots/         # 视觉参考截图
    ├── full-page.png    # 全页截图
    ├── desktop.png      # 桌面视图
    ├── tablet.png       # 平板视图
    ├── mobile.png       # 手机视图
    ├── header.png       # 头部截图
    └── ...              # 其他 section 截图

---

DESIGN.md の生成仕様

形式は getdesign.md／DESIGN.md 標準を参考にしてください：AI と人間の両方が読みやすいプレーンな Markdown にします。DESIGN.md は実行可能なデザイン仕様でなければならず、雰囲気の説明だけにしてはいけません。

必須の 9 セクション

生成する DESIGN.md には、以下の 9 項目をすべて含める必要があります。根拠となる情報がない場合は、「明確なルールは収集できなかったため、保守的なデフォルトを適用」と明記し、ブランドルールやコンポーネントの詳細を捏造しないでください。

1. ビジュアルテーマと雰囲気：ブランド／製品の背景、適用する場面、適用しない場面、キーワード、ページの印象、情報密度、ブランド表現の範囲。
2. 色彩システム：hex 値、意味上の役割、使用範囲、使用禁止の場面、Tailwind／CSS 変数との対応。
3. フォントシステム：display／body／mono の役割、フォントファミリー、フォントサイズの階層、行の高さ、ウェイト、文字間隔、フォールバック。
4. コンポーネント仕様：ボタン、入力欄、カード、ナビゲーション、テーブル、タグ、モーダルなどの基本コンポーネントのサイズ、角丸、境界線、状態、インタラクション動作。
5. レイアウトと間隔：コンテナ幅、グリッド、セクションのリズム、密度、ブレークポイントより前のデフォルトレイアウト、間隔スケール、ページ全体の余白。
6. 奥行き、影、境界線：影の階層、境界線／区切り線、ring、elevation、サーフェスの重ね合わせルール、過度に重い装飾の禁止事項。
7. モーション：時間、イージング、transform のパターン、表示／退出／hover のルール、使用可能および禁止するアニメーション。
8. レスポンシブ動作：desktop／tablet／mobile のレイアウト変化、ナビゲーションの折りたたみ、要素の表示／非表示、画像／テーブル／カードの再配置方針。
9. Prompt guide：LLM に与えるすぐに使える生成指示。推奨する記述、禁止する記述、そのまま再利用できる UI 生成プロンプトを含めます。

ドキュメント構造テンプレート

以下のテンプレートは基本構成です。生成時には、上記の 9 セクションをすべて補完し、コンポーネント、奥行き／境界線、レスポンシブ、Prompt guide を省略しないでください。

# [品牌名] 设计系统

> 从 [原始 URL] 提取的设计规范

## 视觉风格

> 👁️ 以下内容基于截图观察总结，是本设计系统的灵魂。

- **品牌调性**: [从截图推断，如：科技感/极简/温暖/高端/活泼]
- **色彩氛围**: [亮色系/暗色系/高饱和/低饱和]
- **布局风格**: [宽松留白/紧凑密集/卡片式/列表式]
- **装饰特征**: [渐变背景/毛玻璃/几何图案/纯色块/无装饰]
- **图片风格**: [摄影/插画/3D/图标/无图]

## 设计原则

- [从截图和品牌调性推断 3-5 条设计原则]

---

## 🎨 色彩系统

### 基础色板

| 名称 | 值 | Tailwind | 用途 |
|------|----|---------|----- |
| Primary | #XXXX | `bg-primary` / `text-primary` | 品牌主色、CTA 按钮 |
| Secondary | #XXXX | `bg-secondary` | 辅助强调 |
| Background | #XXXX | `bg-background` | 页面底色 |
| Foreground | #XXXX | `text-foreground` | 主要文本 |
| Muted | #XXXX | `bg-muted` / `text-muted` | 次要文本、禁用态 |
| Border | #XXXX | `border-border` | 分割线、边框 |
| Accent | #XXXX | `bg-accent` | 高亮、标签 |
| Destructive | #XXXX | `bg-destructive` | 错误、删除 |

### 色彩规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 使用语义化变量 `bg-primary`, `text-foreground` 而非硬编码色值 |
| ✅ 推荐 | 深色模式通过 `.dark` 类切换，不使用 `prefers-color-scheme` |
| ⚠️ 允许 | 在特殊装饰场景下使用渐变色 |
| 🚫 禁止 | 硬编码 `#RRGGBB` 值，必须使用 CSS 变量 |
| 🚫 禁止 | 在文本上使用低对比度颜色（对比度 < 4.5:1） |

---

## 📝 字体系统

### 字体家族

| 名称 | 字体 | Tailwind | 用途 |
|------|------|---------|----- |
| Sans | Inter, system-ui, sans-serif | `font-sans` | 正文、UI 组件 |
| Mono | JetBrains Mono, monospace | `font-mono` | 代码块 |

### 文字样式

| 层级 | 大小 | 行高 | 字重 | Tailwind |
|------|------|------|------|---------|
| H1 | 36px | 44px | 700 | `text-4xl font-bold` |
| H2 | 30px | 36px | 600 | `text-3xl font-semibold` |
| H3 | 24px | 32px | 600 | `text-2xl font-semibold` |
| Body | 16px | 24px | 400 | `text-base` |
| Small | 14px | 20px | 400 | `text-sm` |
| Caption | 12px | 16px | 400 | `text-xs` |

### 字体规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 标题使用 font-semibold 或 font-bold |
| ✅ 推荐 | 正文行高 1.5（24px / 16px） |
| ⚠️ 允许 | 在 Hero 区域使用更大的标题（最大 48px） |
| 🚫 禁止 | 使用超过 3 种字体 |
| 🚫 禁止 | 正文字号低于 14px |

---

## 📏 间距系统

### 间距标尺

| 级别 | 值 | Tailwind | 用途 |
|------|----|---------|----- |
| xs | 4px | `p-1` / `gap-1` | 图标与文字间距 |
| sm | 8px | `p-2` / `gap-2` | 紧凑元素间距 |
| md | 16px | `p-4` / `gap-4` | 默认内边距 |
| lg | 24px | `p-6` / `gap-6` | Section 间距 |
| xl | 32px | `p-8` / `gap-8` | 大区块间隔 |
| 2xl | 48px | `p-12` / `gap-12` | Section 分隔 |

### 间距规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 使用 4px 的倍数（4, 8, 12, 16, 24, 32...） |
| ✅ 推荐 | 同级元素间距保持一致 |
| 🚫 禁止 | 使用奇数 px 值（如 5px, 7px, 13px） |

---

## 🔲 圆角系统

| 名称 | 值 | Tailwind | 用途 |
|------|----|---------|----- |
| None | 0 | `rounded-none` | 表格、分割线 |
| SM | 4px | `rounded-sm` | 小按钮、标签 |
| MD | 8px | `rounded-md` | 默认按钮、输入框 |
| LG | 12px | `rounded-lg` | 卡片、弹窗 |
| XL | 16px | `rounded-xl` | 大卡片、面板 |
| Full | 9999px | `rounded-full` | 头像、药丸按钮 |

### 圆角规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 按钮统一使用 `rounded-md` |
| ✅ 推荐 | 卡片统一使用 `rounded-lg` |
| 🚫 禁止 | 同一页面混用超过 4 种圆角值 |

---

## 🌑 阴影系统

| 名称 | 值 | Tailwind | 用途 |
|------|----|---------|----- |
| SM | 0 1px 2px rgba(0,0,0,0.05) | `shadow-sm` | 按钮默认态 |
| MD | 0 4px 6px rgba(0,0,0,0.1) | `shadow-md` | 卡片悬浮态 |
| LG | 0 10px 15px rgba(0,0,0,0.1) | `shadow-lg` | 弹窗、下拉菜单 |

### 阴影规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 交互元素 hover 时提升 1 级阴影 |
| ⚠️ 允许 | 在强调区域使用彩色阴影 |
| 🚫 禁止 | 使用黑色（opacity > 0.3）的重阴影 |

---

## 🎞️ 动画 & 过渡

### 过渡 Transition

| 属性 | 值 | Tailwind | 用途 |
|------|----|---------|----- |
| Default | all 0.2s ease | `transition-all duration-200` | 按钮、链接 hover |
| Slow | all 0.3s ease-out | `transition-all duration-300` | 卡片展开、面板 |

### 动画 Animation

| 名称 | 描述 | Tailwind |
|------|------|---------|
| fadeIn | 淡入（opacity 0→1） | `animate-in fade-in` |
| slideUp | 上滑进入 | `animate-in slide-in-from-bottom` |

### 动画规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 交互反馈使用 200ms 过渡 |
| ✅ 推荐 | 页面进场动画使用 300-500ms |
| ⚠️ 允许 | 在 Hero 区域使用循环动画 |
| 🚫 禁止 | 动画时长超过 1s（用户感知为卡顿） |
| 🚫 禁止 | 使用 `animation-delay` 超过 500ms |

---

## 📐 布局

### 容器宽度

| 断点 | 宽度 | Tailwind |
|------|------|---------|
| sm | 640px | `max-w-screen-sm` |
| md | 768px | `max-w-screen-md` |
| lg | 1024px | `max-w-screen-lg` |
| xl | 1280px | `max-w-screen-xl` |

### 布局规范

| 级别 | 规则 |
|------|------|
| ✅ 推荐 | 主容器使用 `max-w-screen-xl` 居中 |
| ✅ 推荐 | 使用 flexbox / grid 布局，不使用 float |
| 🚫 禁止 | 内容区宽度超过 1440px |

---

## 🧩 组件规范

### Button

| 变体 | 样式 |
|------|------|
| Primary | `bg-primary text-white rounded-md px-4 py-2 shadow-sm hover:shadow-md` |
| Secondary | `bg-secondary text-secondary-foreground rounded-md px-4 py-2` |
| Ghost | `bg-transparent hover:bg-muted text-foreground rounded-md px-4 py-2` |
| Destructive | `bg-destructive text-white rounded-md px-4 py-2` |

### Card

bg-background border border-border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow

### Input

bg-background border border-border rounded-md px-3 py-2 text-foreground focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors

---

## 使用约束

### ✅ 推荐

- 所有颜色使用 CSS 变量 / Tailwind 语义类
- 保持 4px 间距基准
- 交互元素添加 hover/focus 反馈
- 使用语义化 HTML 标签

### 🚫 禁止

- 硬编码色值
- 使用 `!important`
- 内联样式代替 Tailwind 类
- 未定义的 magic number（如 `margin: 13px`）

---

## Prompt guide

### 推荐指令

- 使用本 DESIGN.md 中的语义颜色、字体、圆角、阴影和间距 token。
- 先还原整体布局节奏，再微调组件状态。
- 按响应式行为处理 desktop/tablet/mobile，不让内容溢出。

### 禁止指令

- 不要硬编码未登记色值、字体、圆角、阴影或间距。
- 不要使用低对比度文本、过度阴影或与品牌无关的装饰。
- 不要忽略组件的 hover/focus/disabled 状态。

### 可直接复用的生成提示

- "Design a [页面/组件] using this DESIGN.md: apply the semantic palette, typography roles, layout rhythm, component states, and responsive behavior."
- "Before finalizing, check every visible color, font, radius, shadow, motion, and spacing against this DESIGN.md."

---

globals.css の生成仕様

必ず Tailwind CSS v4 の構文を使用してください。

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  /* ── 色彩 ──────────────────── */
  --background: <从 theme.json colors.background[0] 提取>;
  --foreground: <从 theme.json colors.text[0] 提取>;
  --primary: <从 theme.json colors.text[1] 或 CSS 变量中推断>;
  --primary-foreground: <对比色计算>;
  --secondary: <从 theme.json 推断>;
  --secondary-foreground: <对比色>;
  --muted: <从 theme.json 推断浅色>;
  --muted-foreground: <次要文本色>;
  --accent: <强调色>;
  --accent-foreground: <对比色>;
  --destructive: <错误/危险色，若无则默认 #ef4444>;
  --border: <从 theme.json colors.border[0] 提取>;
  --ring: <焦点环色，通常 = primary 带透明度>;

  /* ── 圆角 ──────────────────── */
  --radius: <从 theme.json radius[0] 提取>;

  /* ── 字体 ──────────────────── */
  --font-sans: <从 theme.json typography.families[0] 提取>;
  --font-mono: <从 theme.json typography.families 提取 monospace>;
}

.dark {
  --background: <深色模式背景>;
  --foreground: <深色模式文本>;
  /* ... 所有变量的深色模式值 ... */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-xl: calc(var(--radius) * 2);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
}

globals.css の生成ポイント

1. CSS 変数名は shadcn/ui の命名規則に従います（background、foreground、primary、muted、accent、destructive、border、ring）
2. 色の値は theme.json からマッピングします：
   • colors.background[0].value → --background
   • colors.text[0].value → --foreground
   • cssVariables に値がある場合は優先して使用します（元のデザインシステムの命名を維持）
3. @theme inline で Tailwind にマッピングします
4. ダークモードを必ず含めます（theme.json から推定できない場合は、反転色を使用）
5. 角丸は radius[0] から抽出し、その他のレベルは calc で導出します

---

token 类别对照表

从 theme.json 到 DESIGN.md 的映射：

theme.json 字段	DESIGN.md 章节	globals.css 变量
colors.background	色彩系统 > 基础色板	--background
colors.text	色彩系统 > 基础色板	--foreground, --primary
colors.border	色彩系统 > 基础色板	--border
typography.families	字体系统 > 字体家族	--font-sans, --font-mono
typography.textStyles	字体系统 > 文字样式	—
spacing	间距系统	—
radius	圆角系统	--radius
shadow.box	阴影系统	—
shadow.text	阴影系统	—
transitions	动画 & 过渡	—
animations	动画 & 过渡	—
lineWidth	边框	—
cssVariables	全局 — 优先复用	直接使用
assets.images	（参考）	—

---

数据来源优先级

优先级	数据来源	提供什么	可信度
⭐⭐⭐⭐⭐	截图（全页 + 响应式 + section）	品牌调性、布局节奏、视觉层级、装饰元素、组件形态	最高 — 视觉真相
⭐⭐⭐⭐	cssVariables（:root 变量）	原始设计系统的命名和值	高 — 开发者意图
⭐⭐⭐	theme.json（颜色/字体/间距/阴影）	属性值的统计频率	中 — 机器提取，可能有遗漏

提示

• 截图是最终真相 — 当 token 数据和截图冲突时，永远以截图为准。截图中能看到的渐变、装饰、排版节奏无法从 CSS 属性中提取
• 先看截图再读数据 — 工作流中截图分析在 theme.json 分析之前，这是故意的。先建立视觉直觉，再用数据验证
• 响应式截图揭示布局策略 — desktop/tablet/mobile 三张图对比能发现断点布局逻辑、元素隐显规则
• section 截图精准定位组件风格 — 全页截图太小看不清细节，section 截图是观察按钮/卡片/表单风格的关键
• cssVariables 是金矿 — 如果页面已经定义了 :root 变量，优先使用它们，因为这是原始设计系统的意图
• count 越高越重要 — theme.json 中的 count 字段表示该值出现次数，次数多 = 该设计系统的核心值
• 推荐/允许/禁止 — 每个 token 类别必须包含三级规范表格
• Tailwind 类名映射 — DESIGN.md 中每个 token 必须给出对应的 Tailwind 类名