# Design HTML
> デザインSSOT JSONからドキュメント・共有用の静的HTMLを生成しdoc/input/design/html/に保存する。SSOTだけ先にある場合の視覚的確認や共有に使う。
- Skill: `mae616/design-html` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mae616/design-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mae616/design-html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mae616 (https://skillmd.com/u/mae616)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/mae616/design-html
---
# [デザイン] （任意）SSOT → 静的HTML を生成し、`doc/input/design/html/` に保存
## コマンド: /design-html [$PAGE_KEY]
設計JSON（SSOT）から**静的HTML**を生成し、`doc/input/design/html/` に保存する。
## いつ使う？（位置づけ）
- **ドキュメント共有/レビュー用**に「ブラウザで見られる見た目」が欲しいとき
- 実装スタックに依存しない形で、UIの骨格・トークン反映を目視確認したいとき
- `/design-mock` で1枚ペラHTMLを作った後、**ページ単位でイメージ確認**したいとき
- `/design-ssot`・`/design-mock` のいずれかで SSOT が揃っている前提（このコマンドはSSOTを作らない）
## 次に何をする？
- 見た目の調整が必要なら、HTMLの差分/変更点を根拠に SSOT（tokens/components/context）へ反映する。
⚠️ **反映の前に、SSOTの差分（どのキーをどの値に変えるか）を見せて合意を得る**（ADR-027）
- 実装に進むなら `/design-ui` → `/design-components` → `/design-assemble`（READMEのフローに合流）
> **旧 `/design-split` の役割はこのスキルが担う**: `/design-mock` が生成したSSOTからページ単位HTMLを生成するため、1枚ペラHTMLを手動で分割する必要はない
## 見た目の基準（ビューポート）について
- まず `doc/input/rdd.md` の「ターゲット表示環境（事実）」を参照し、生成HTMLの確認は **そのビューポートを基準**に行う
- 未記入の場合は、以下を **推奨デフォルト**として仮置きする：
- desktop: 1440x900
- mobile: 390x844
- tablet: 834x1194
### 入力
- $PAGE_KEY（任意）: 画面キー（`doc/input/design/design_context.json` の `pages[].key`）
- 省略時: **全ページ**を生成する（複数ページ対応の既定）
### 出力（差分のみ）
- `doc/input/design/html/{page}.html`（tokens/variants/copy反映、外部依存なしで再現）
### 仕様
- 入力となるJSON（`doc/input/design/design-tokens.json`, `doc/input/design/components.json`, `doc/input/design/design_context.json`）が存在する前提（通常は `/design-ssot` の成果物）
- `doc/input/design/copy.json`（文言のSSOT。一字一句固定）が存在する前提（不足時は推測で補わず停止）
- `doc/input/design/assets/assets.json` が存在する場合は必ず参照し、画像アセットを反映する（baseDir配下の相対パス）
- `assets.json` に `status: "failed"` がある場合は、**必ずユーザーに不足（動画/画像等）を報告**し、手元提供またはFigma Export設定の依頼をして停止する（推測で代替しない）
- React/Vue 等の実装に依存しない生成
- 画像は相対またはデータURIで完結
- **RDD準拠**のスタイルのみ（tokens必須）
- ここで停止
### ゲート
- 主要ブレイクポイントでレイアウト崩れなし（簡易スナップ）
- tokens外の値（magic number）が混入していない
- `copyKey` の不足0件（`design_context.json` の参照が `copy.json` で解決できる）