# design-forge 素材庫 — 運用ルール(Claude Code向け)

背景透過素材(SVG/PNG)の一元格納庫。**どのプロジェクトの作業中でも、透過素材を作ったらここに登録する。**

## 場所と構成

```
design-forge/assets/
├ catalog.json   … 全素材の台帳(検索の起点。必ずここから引く。演出も登録済み)
├ ASSETS.md      … このルール
├ viewer.html    … ブラウザで一覧・検索する閲覧ページ
├ effects.html   … 演出庫。アニメーション/演出のライブデモ+コードコピー(type:"effect")
├ deco/          … 装飾(ブロブ/きらめき/枠/柄…)
├ textures/      … タイル質感(将来用。今はdeco/に同居)
├ illustrations/ … 一枚絵の透過イラスト(PNG/SVG)
└ logos/         … ロゴ・マーク類
```

アイコンスプライト(20種×14テーマ)は `presets/<slug>/icons.svg` が原本。catalog.json に登録済み。

## 引き出し方(Claude の手順)

1. `assets/catalog.json` を Read し、`tags` / `themes` / `type` で探す
2. ローカル利用: `開発/design-forge/<file>` からコピー or 参照
3. 公開URL利用: `https://design-forge.pages.dev/<file>`(全素材デプロイ済み)
4. SVGは原則 `currentColor` で着色 → CSSの `color` で案件の色に合わせる
5. CSS背景に使う場合は data-URI 化も可(noise等のタイル素材)

## 登録ルール(素材を作ったら)

1. 原本を `assets/<type>/` にコピー(命名: kebab-case、内容が分かる名前)
2. `catalog.json` の `items` 末尾に追記:
   `{ id, file, type(deco|texture|icon-sprite|illustration|logo), format, transparent, tiling, themes[], tags[](日本語・検索される言葉で), usage(使い方1行), source(作った案件と日付) }`
3. `updated` を更新
4. 機会があれば `npx wrangler pages deploy design-forge --project-name design-forge --commit-dirty=true` で公開反映(任意)

## 演出(effect)の扱い

- 演出スニペット(出現・マーキー・グリント等)は effects.html 内の `EFFECTS` 配列に実体があり、catalog.json には `type:"effect"` で索引だけ登録する
- 新しい汎用演出を作ったら: effects.html の EFFECTS 配列に追記(id/name/note/tags/css/html/js)+ catalog.json に `fx-<id>` で索引を追記

## 禁止

- catalog.json に載せずに素材だけ置く(迷子になる)
- 案件固有すぎる素材の登録(人物写真・実ロゴ等は案件フォルダに置く。汎用化できるものだけここへ)
- 透過でない素材(背景ベタ付きはここに入れない)