Guide

ガイド

First CH Designs は、良いUIをソースコードと再現プロンプト（AI Script）つきでストックしているデザインギャラリーです。ここでは閲覧者・開発者・AIエージェントそれぞれの使い方をまとめます。

01コードをそのまま使う

各デザインの詳細ページには実物のプレビューとソースコード（React + Tailwind CSS v4）があります。「コピー」ボタンでコードを取得し、そのままプロジェクトに貼り付けて使えます。

各デザインは shadcn の registry-item 形式でも配布しています。プロジェクトのターミナルで次を実行すると、依存関係ごと自動で追加されます。

npx shadcn@latest add https://designs.first-ch.com/r/<slug>.json

・レジストリ全体（メタ情報+AI Script）: /api/components.json

・1件のソースコード付き詳細（shadcn形式）: /r/<slug>.json

・サイト案内（llms.txt）: /llms.txt

AIにUI実装を依頼するとき、これらのURLを渡すとこのギャラリーのデザインを参考・再現できます。