AI ネイティブ設計

選んだ AI に、そのまま渡す。

GunjoUI の全コンポーネントは Markdown 仕様と JSON-Schema エンドポイントを公開しており、AI ツールが variant キー・Tailwind クラス・デザイントークンを正確に参照できます ── 人間が読むのと同じ SSOT です。

Spec を prompt に公開済

全コンポーネントページに「Copy spec for AI」ボタン。v0 / Cursor / Claude にそのまま貼れる Markdown。

JSON エンドポイント公開済

/api/specs/inputs/button が構造化 JSON を返却。/api/specs/manifest で全カタログをまとめて取得。

DESIGN.md公開済

canonical な仕様書 ── 色・タイポグラフィ・コンポーネント規則を AI 消費前提で記述。

MCP サーバー予定

予定: Claude / Cursor が gunjo-ui 名前空間を MCP で直接クエリ。

今すぐ試す

Button コンポーネントのライブ仕様。クリックでコピーして、お使いの AI ツールに貼ってください。

# Button

**Package**: `@gunjo/ui`
**Category**: inputs

## Description
Displays a button or a component that looks like a button.

## Variants
Default: `default`

### `default`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#0c0c12 | text=#f8fafc

### `destructive`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#ef4444 | text=#f8fafc

### `outline`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg border bg-transparent text-sm font-medium`
Colors: fill=transparent | stroke=#e2e8f0@1px | text=#0c0c12

### `secondary`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#f1f5f9 | text=#18181b

### `ghost`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg bg-transparent text-sm font-medium`
Colors: fill=transparent | text=#0c0c12

### `link`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg bg-transparent text-sm font-medium`
Colors: fill=transparent | text=#0c0c12

### `primary`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#394794 | text=#f8fafc

### `info`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#1d4ed8 | text=#f8fafc

### `success`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#15803d | text=#f8fafc

### `warning`
Classes: `inline-flex items-center h-9 py-2 px-4 gap-2 rounded-lg text-sm font-medium`
Colors: fill=#b45309 | text=#f8fafc

## How to use with AI
Paste this entire spec into v0, Cursor, or Claude and ask: "Use the GunjoUI Button component to build [your screen]." The spec gives the AI exact variant keys and Tailwind class signatures to compose against.

## Source
- Component: `src/components/inputs/Button.tsx`
- Design spec: `design/inputs.pen`
- Docs: https://gunjo.dev/docs/components/button

JSON エンドポイント

GET

/api/specs/<category>/<name>コンポーネント単体

GET

/api/specs/manifest全コンポーネント

/api/specs/inputs/button を試す /api/specs/manifest を試す

SSOT ファイル

デザインの SSOT を生のままダウンロードできます。.pen は Pencil で開けて、JSON は design:sync が spec とコード生成のもとにしているファイルです。GunjoUI は設計データを code / docs へ同期しますが、ページ全体を .pen から完全自動生成するものではありません。

マニフェスト全 SSOT ファイルの URL とサイズを返す JSON。

カテゴリー別ファイル

<category>.pen がデザインソース。<category>-core.json はツール向けの構造化 spec、<category>-metadata.json はタイトル・説明テキスト。

カテゴリー	.pen	metadata.json	core.json
patterns	patterns.pen	patterns-metadata.json	patterns-core.json
feedback	feedback.pen	feedback-metadata.json	feedback-core.json
layout	layout.pen	layout-metadata.json	layout-core.json
navigation	navigation.pen	navigation-metadata.json	navigation-core.json
overlay	overlay.pen	overlay-metadata.json	overlay-core.json
display	display.pen	display-metadata.json	display-core.json
inputs	inputs.pen	inputs-metadata.json	inputs-core.json

一括取得

シェルで実行すると ./ssot/ に全ファイルをダウンロードします。

mkdir -p ssot && \
curl -fsSL https://gunjo.dev/api/ssot/manifest \
  | jq -r '.files[] | "\(.downloadUrl)\t\(.fileName)"' \
  | while IFS=$'\t' read -r url name; do
      curl -fsSL "https://gunjo.dev$url" -o "ssot/$name"
    done

ファイルの使い方

.pen は Pencil のドキュメント — まだ入れていない場合は Pencil をインストールしてください。JSON（core / metadata）は普通の JSON なのでどんなツールでも読めます。

デザインの参考として使う

.pen を開いて、自分のデザインに取り込む素材として使ったり、コードエディタの横に並べて視覚リファレンスにできます。

必要な <category>.pen をダウンロード。
Pencil で開く — そのカテゴリの全コンポーネントが 1 枚の無限キャンバスに並びます。
パン・ズームで観察。フレームをドラッグコピーして自分のドキュメントに持ち込めます。

SSOT を編集してコントリビュートする

.pen を編集して design:sync を流すと、metadata・spec・生成 TS・docs ナビまで全部の派生物が再生成されます。

gunjo を clone して、design/ の <category>.pen を Pencil で開く。
編集して保存。Pencil が同じ .pen ファイルに書き戻します。
`npm run design:sync` を実行 — metadata、core spec JSON、生成 variant-keys、manifest、public-exports、docs ナビが全部 .pen から再ビルドされます。
.pen と再生成された成果物を一緒にコミット（design:verify が整合性を検証します）。

詳しい SSOT 運用手順（design/README.md）

各ファイルの役割

コード生成ツールや AI に流す場合の使い分け：

<category>-core.json: 構造化 spec — variant key、各 variant のジオメトリ、slot ID。コード生成や下流ツールのカノニカル入力。
<category>-metadata.json: コンポーネントごとの title / description。i18n や docs のソース。
<category>.pen: Pencil の元ドキュメント — 内部は JSON ですが、ラウンドトリップは Pencil で開いたときだけ可能です。

ツール別レシピ

v0

spec を貼り付けて、「これらの GunjoUI コンポーネントで [画面] を作って」とプロンプト。

Cursor

チャットに投入、または @ で component spec を参照。Cursor は variant キーと Tailwind クラスを正確に拾います。

Claude

spec を会話コンテキストに。将来的に MCP 経由で名前空間に直接アクセス予定。

Figma Make

token spec があると、生成フレームをデザインシステムの HSL 値と整合させやすくなります。

プロンプト Cookbook

ダッシュボード・ログイン・データテーブル・オンボーディング・設定・ランディング・AI チャット・カンバンの 8 種類、すぐに貼り付けて使えるプロンプト。GunjoUI の spec エンドポイントに事前接続済み。

Cookbook を開く

ロードマップ

gunjo-ui MCP サーバー

Claude / Cursor が Model Context Protocol で gunjo-ui 名前空間を直接クエリ ── コピペ不要。

MCP プランを読む

Figma プラグイン

.pen を SSOT にしたまま、GunjoUI のトークンとコンポーネントを Figma 側へ反映する配布面として計画中。

Figma プランを読む