# First CH Designs

> First CH合同会社のデザインギャラリー。制作現場で生まれたUIを、ソースコード(React + Tailwind CSS v4)とAI Script(再現プロンプト)つきでストックしています。

## Machine-readable registry

- Design index (metadata + AI Script): https://designs.first-ch.com/api/components.json
- Single item with source code (shadcn registry-item format): https://designs.first-ch.com/r/<slug>.json
- Install into a project: npx shadcn@latest add https://designs.first-ch.com/r/<slug>.json

## Designs

- [ACC-01 FAQアコーディオン](https://designs.first-ch.com/d/faq-accordion): よくある質問の開閉リスト。JavaScript不要の<details>で実装し、開くとプラス記号が45度回って×になる。1問目のみ初期表示。
- [BDG-01 ステータスバッジ](https://designs.first-ch.com/d/status-badge): 管理画面や一覧で状態を示すバッジ。淡い背景色+ドットの組み合わせで、4状態(公開中・レビュー待ち・停止中・下書き)。
- [BLK-01 CTAバナー](https://designs.first-ch.com/d/cta-banner): ページ下部に置く行動喚起ブロック。淡いアンバーのグラデーション面にアイブロウ+見出し+2ボタン。部品ではなくセクション単位の標本。
- [BLK-02 料金プラン](https://designs.first-ch.com/d/pricing-plans): 3段階の料金カード。中央の「おすすめ」プランだけアンバーの枠とリングで強調し、ボタンも塗り。LPやサービス紹介ページ用のセクション。
- [BLK-03 制作フロー](https://designs.first-ch.com/d/process-steps): 番号つきの工程ステップ。制作の流れなど「順序が意味を持つ」内容向け。丸番号を細い罫線で連結し、デスクトップで横並びになる。
- [BTN-01 スタンダードボタン](https://designs.first-ch.com/d/solid-button): 白基調サイトの基本となる3種のボタン。プライマリ(アンバー)・セカンダリ(枠線)・テキストの優先度3段階で構成。
- [CRD-01 フィーチャーカード](https://designs.first-ch.com/d/feature-card): サービス紹介や特徴一覧に使うリンクカード。見出し+説明文+矢印リンクのシンプル構成。ホバーで上部にアンバーの罫線が伸び、わずかに浮き上がる。
- [INP-01 テキストフィールド](https://designs.first-ch.com/d/text-field): お問い合わせフォームの基本入力欄。通常状態とエラー状態のセット。ラベル・ヘルパーテキスト・エラーメッセージを含む。
- [PGE-01 スプリットヒーロー](https://designs.first-ch.com/d/hero-split): コーポレートサイト冒頭のヒーロー。左に見出し+2ボタン+実績数値、右にCSSだけで作ったブラウザ枠のサイトプレビュー。画像素材なしで成立する。
- [TYP-01 セクション見出し](https://designs.first-ch.com/d/section-heading): LPやコーポレートサイトのセクション冒頭に置く見出しセット。英字アイブロウ+見出し+リード文+アンバーの短い罫線。

## Pages

- [運用ガイド](https://designs.first-ch.com/guide): 追加手順・掲載基準・週次サイクル