# design-forge 運用レシピ(Claude Code向け)

新しいHP/アプリを作るとき、**ゼロから書かずここのプリセットを改修する。**

> **v2追記(2026-07-04):** 客に見せるLP/HPの見た目は `SPEC-V2.md` の品質基準(見本= `v2/cool/`)を目指すこと。
> v1プリセットは部品・トークン・アイコンの供給源として使う。管理画面はv1で十分。
> 透過素材は `assets/catalog.json` から引き、新規作成したら必ず登録する(`assets/ASSETS.md`)。

## 手順

1. 依頼の印象に合うテーマを選ぶ(例:「清潔感ある歯科」→ clean、「高級感」→ luxury)。
   迷ったら index.html(カタログ)で比較。
2. `presets/<slug>/` を新プロジェクトのフォルダへ**コピー**する(design-forge内は改変しない)。
3. HP なら sample-lp.html、管理画面なら sample-app.html をベースに文言・構成を差し替える。
4. 色や雰囲気の微調整は **tokens.css の変数だけ**触る。components.css はクラス追加以外なるべく触らない。
5. アイコンは icons.svg の20種から使う。足りなければ同じ線質(SPEC.mdの表参照)で追加する。

## 別テーマへの載せ替え

全テーマがSPEC準拠(同一クラス名・同一変数名)なので、
tokens.css / components.css / animations.css / icons.svg を別テーマのものに差し替えるだけで着せ替えできる。

## 禁止事項

- design-forge 内のプリセット原本を案件都合で書き換えない(改善は全テーマ整合を保って行う)
- 外部ライブラリ・CDN追加(Google Fonts以外)
- 公開時は noindex を維持(実案件で公開するときのみ外す)