運用ガイド

1件のデザインは src/designs/<slug>/ フォルダ1つです。component.tsx(実物)と meta.json(名前・説明・AI Script など)を置けば、ギャラリーページ・/api/components.json・/r/<slug>.json・llms.txt のすべてに自動で反映されます。手作業での登録は一切ありません。

手順: (1) 既存フォルダをコピーして slug を変える (2) component.tsx を実装 (3) meta.json を書く (4) npm run dev で表示確認 (5) main に push すると自動デプロイ。

・実案件で使った、または実案件で使える汎用形になっていること(クライアント固有の文言・画像は除去)。

・白基調ブランド(アンバーアクセント)に準拠していること。準拠しない実験的なデザインはタグで明示する。

・レスポンシブで崩れないこと。フォーカスリング(focus-visible)があること。

・AI Script は「そのままAIに貼れば同等のものが出る」粒度で書くこと。クラス名を具体的に列挙する。

毎週、今週の案件から「ナレッジ化できるデザイン」を洗い出し、汎用化してこのギャラリーに追加します。tools と同じ運用リズムです。

目安: 週1件。追加ゼロの週は「候補なし」の判断だけ記録して終わりでOK。無理に埋めない。

・レジストリ全体: /api/components.json(メタ情報+ソースコード+AI Script)

・1件取得(shadcn形式): /r/<slug>.json — npx shadcn@latest add https://designs.first-ch.com/r/<slug>.json でコードごと導入できます。

・サイト案内: /llms.txt

・各プロジェクトの CLAUDE.md に「UI 作成時は https://designs.first-ch.com/api/components.json を参照する」と書いておくと、AIが自動でこのギャラリーを使います。