まだ、何者でもない。
だからこそ、どんな色にもなれる。
Start here
あなたの色を、すぐ形にする道具。コンポーネント、トークン、ガイドライン、パターン、AI 連携。
コンポーネントカタログ
150+ コンポーネントを監査済み。docs ページ、プレビューとコード、カテゴリ概要から確認できます。
トークンシステム
色、タイポ、余白、角丸、影、モーション、レイヤー、密度をコピー可能な値として確認できます。
ガイドライン
コンポーネント選定、docs 品質、アクセシビリティ、画面に出る文言の判断基準。
公開パターン
alpha では dashboard / auth / media library だけを公開対象にし、他は作り直し後に戻します。
Live components
触って分かる GunjoUI
主要な UI をその場で触れるように並べています。入力、選択、切り替え、進捗、タブ、コピー、ツールチップの挙動を、トップページ上で確認できます。
入力項目
Input と Select を、実際のフォームに近い余白と幅で確認できます。
ボタンと補足説明
主要操作、補助操作、危険操作、説明付き操作を横並びで確認できます。
状態と進捗
Switch の状態と Progress の値を同じ文脈で確認します。
タブと内容切り替え
プレビュー、コード、確認観点を同じ幅で切り替えます。
表示カテゴリを表示中
同期は有効です。
GunjoUI の現在値
公開前に確認したコンポーネント、パターン、トークンの規模を表示しています。
コンポーネント
153
監査済み
公開パターン
3
Dashboard / Auth / Media Library
主要トークン
8+
色・余白・文字・影など
色の物語
群青 — Gunjō
未だ青ならず、青になりつつあるもの。夜明け前の色、墨のまだ乾かぬ色、形になる前の色。alpha 段階のデザインシステムは、becoming する色そのもの。
#2F63CA · hsl(220 62% 49%)媚茶 — Kobicha
becoming を支える温かい土。ホバー、選択、人の意思が介在する瞬間に温度を加える色。
#E8DDD3 / #3A2A25SSOT と AI 連携
GunjoUI は .pen と design metadata を SSOT とし、トークン、コンポーネント仕様、docs 登録、export 情報へ同期します。ページ全体を .pen から完全自動生成するものではありません。
コンポーネント仕様
Ready各コンポーネントの Markdown 仕様をコピーでき、variant 名を推測せず AI ツールへ渡せます。
JSON-Schema endpoints
Ready/api/specs/* でコンポーネント仕様とカタログ manifest を machine-readable に配信します。
.pen ベースの SSOT
Synced.pen を設計ソースとし、sync が tokens、spec、generated keys、docs registry、exports へ展開します。
AI 連携ドキュメント
Docsv0 / Cursor / Claude / Figma Make などへ渡すための考え方と入口をまとめています。
エンジニア向け
React と Tailwind のコンポーネントライブラリとして導入し、docs を使って実装と設計判断を揃えます。
React 19 · Tailwind v3/v4 · Radix UI · TypeScript · MIT
$npm install @gunjo/uiドキュメントを読む