# Nuxt UI デザインシステム

## Nuxt UI デザインシステムのインターフェースプレビュー

入力済みのサンプルを編集し、チェックリストを選んで、バリデーションとリセットを確認します。

## Nuxt UI デザインシステムのデザインリファレンス

Nuxt UI 4.11.3 のデフォルト、実際にコンパイルされたセマンティック CSS、ネイティブ Vue コンポーネントの契約を使用します。独自のレイアウトとバリデーションの選択は別途明記しています。

### デフォルトのセマンティックカラーエイリアス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| primary | green | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| secondary | blue | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| success | green | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| info | blue | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| warning | yellow | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| error | red | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
| neutral | slate | Nuxt UI 4.11.3 の実際のデフォルトエイリアスです。コンポーネントのカラー props はセマンティック名を参照し、設定されたパレットがその値を提供します。 |
### 明るいテキストのロール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --ui-text-dimmed | var(--ui-color-neutral-400) | 最も強調度の低い補足テキストです。必須項目のラベルやバリデーションメッセージには使用しないでください。 |
| --ui-text-muted | var(--ui-color-neutral-500) | 入力欄のヒントや、元のプレビューの導入文などの補足説明に使います。 |
| --ui-text-toned | var(--ui-color-neutral-600) | 標準のテキスト役割と比べてから、さらにコントラストを下げてください。 |
| --ui-text | var(--ui-color-neutral-700) | 本文の読み進めやすさとユーザー入力に使う標準のテキスト役割です。 |
| --ui-text-highlighted | var(--ui-color-neutral-900) | プレビューのメイン見出しなど、強調度の高い見出しや前景の詳細に使います。 |
| --ui-text-inverted | #fff | 反転した暗い背景上で使う前景色です。あらゆるアクセントカラー上の白文字を指定する汎用的な上書きではありません。 |
### 明るい背景と境界線

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --ui-bg | #fff | ベースのキャンバスと、コンポーザー全体で使う明るいカードの背景です。 |
| --ui-bg-muted | var(--ui-color-neutral-50) | 明るい外観の中で、二次領域に使う控えめな補助背景です。 |
| --ui-bg-elevated | var(--ui-color-neutral-100) | 白いキャンバスとの差を強める、浮き上がった、または強調された二次背景です。 |
| --ui-bg-accented | var(--ui-color-neutral-200) | より目立つニュートラルな背景です。上に置く入力値が読みやすい状態を保ってください。 |
| --ui-bg-inverted | var(--ui-color-neutral-900) | 反転した前景色と組み合わせる暗いニュートラル背景です。 |
| --ui-border | var(--ui-color-neutral-200) | 入力欄やカードの輪郭に使う標準のニュートラルな区切り線です。 |
| --ui-border-muted | var(--ui-color-neutral-200) | 強いセクション境界ではなく、関連するブロック間の控えめな区切りに使います。 |
| --ui-border-accented | var(--ui-color-neutral-300) | 標準の境界線では十分に区別できない場合に使う、より明確なニュートラルの輪郭線です。 |
| --ui-border-inverted | var(--ui-color-neutral-900) | 反転した背景用の境界線役割です。対応する背景と組み合わせてください。 |
### 共通の形状とTailwindのタイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --ui-radius | .25rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
| --ui-container | 80rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
| --spacing | .25rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
| --text-sm | .875rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
| --text-xl | 1.25rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
| --text-4xl | 2.25rem | 実際にコンパイルされた出力に含まれる公開済みのNuxt UIまたはTailwindの既定値です。元のレイアウトでは、最大幅に1100px、間隔に24pxを独自に設定しています。 |
### Vueコンポーネントの契約

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Vite plugin | ui({ colorMode: false }) | コンポーネントとテーマのインポート、および必要なブラウザー連携を生成します。 |
| Vue plugin | createApp(App).use(ui) | import ui from @nuxt/ui/vue-plugin; をインポートしてください。コンポーネントを直接インポートするだけでは、スタンドアロン環境のセットアップは完了しません。 |
| UApp | Application wrapper | コンポーネントツリーにネイティブなアプリコンテキストを提供します。 |
| UFormField | label, description, name | フィールドのコンテキストと、読みやすい補助テキストをコントロールに結び付けます。 |
| UInput / UTextarea | v-model | どちらの入力もVueのrefで状態を管理します。テキストエリアはautoresizeとrowsも使用します。 |
| USwitch | v-model + label | 任意のチェックリスト項目の選択状態は、実際のboolean値で管理します。 |
| UButton | @click / color / variant | 主要な合成操作と、ニュートラルなアウトラインのリセット操作には、ネイティブのバリアントを使用します。 |
| UCard | header slot + default body | 入力内容と読みやすい結果に、同じネイティブ背景を適用します。 |
| UBadge | color + variant="subtle" | テキストと外観によって、待機中か、ローカルで生成した結果があるかを区別します。 |
## Nuxt UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Nuxt UI デザインシステムのスタンドアロンVueランタイム

### 公式のVue連携方法を使う

> この例では、Viteを使ってVue 3上で@nuxt/ui 4.11.3を実行します。Nuxtのサーバーサイドレンダリングアプリケーションではありません。Viteプラグインは生成されたUIテンプレート、自動コンポーネントインポート、フレームワークのエイリアスを解決し、Vueプラグインは必要なランタイム連携を登録します。パッケージをインストールしただけで#buildや#importsが未解決のままになる、誤解を招くセットアップを避けるため、完全な例では両方を含めています。

- @nuxt/ui/viteはビルド時の連携を提供します。

- @nuxt/ui/vue-pluginはランタイム登録を提供します。

- UAppでネイティブのコンポーネントツリーを囲みます。

### アプリケーションのラッパーとスタイルシートを維持する

UAppでコンポジションを囲みます。スタイルシートではTailwind CSSと@nuxt/uiをインポートし、メインエントリではアプリケーションをマウントする前にそのスタイルシートをインポートします。ビルドによって、カードやスイッチを静的に模したものではなく、実際のコンポーネントCSSと動作が生成されます。これはライブラリを確認するための具体的なブラウザーセットアップです。Nuxtアプリケーションでは、ドキュメントに記載された独自のモジュールセットアップを使用してください。

## Nuxt UI デザインシステムのセマンティックカラーとコンポーネントバリアント

### コピーした緑色ではなく、セマンティックカラーを使う

標準設定では、primaryとsuccessが緑、secondaryとinfoが青、warningが黄色、errorが赤、neutralがスレートにマッピングされます。ネイティブコンポーネントは、colorプロパティを通じてこれらのエイリアスを使用します。そのため、主要な合成ボタンとニュートラルなアウトラインのリセットボタンは、Nuxt UIの標準だと誤って説明するカスタムパレットを導入せずに、異なるアクションの役割を表せます。

### 外観の適用範囲を明確にする

このライト表示のみの例では、ViteプラグインのcolorMode:falseを設定しています。参照表には、対応するライト表示のテキスト、背景、境界線の宣言を記載しています。これらの値がダークテーマでも使われるとはしていません。製品でカラーモードを追加する場合は、選択した連携方法を有効にし、コントロール、背景、保存された設定をまとめて確認してください。

## Nuxt UI デザインシステムのテキスト役割、背景、形状

### セマンティックなCSSの関係を読み解く

補助テキストには--ui-text-mutedを使い、これはneutral-500を参照します。メイン見出しには--ui-text-highlightedを使い、これはneutral-900を参照します。背景と境界線の変数も同様に、設定済みのニュートラルスケールを参照します。これらの関係を保ち、無関係な少数の16進数値に単純化しないことで、ニュートラルパレットを変更しても一貫したコンポーネントテーマを維持できます。

### 共通の既定値とページごとの判断を分ける

このバージョンの共通設定では、--ui-radiusは.25rem、--ui-containerは80remです。一方、元の簡潔なレイアウトでは、外側の最大幅を1100px、2カラム間の間隔を24pxとし、700px未満では1カラムにしています。見出しと補助テキストのサイズには、実際のTailwindテキスト役割を使います。これらは提示されたCSSでのページごとの判断であり、ライブラリ全体に適用される要件として作り上げたものではありません。

## Nuxt UI デザインシステムのフィールド構成とローカルバリデーション

### すべての入力に正しいフィールドコンテキストを設定する

UFormFieldでUInputまたはUTextareaを囲み、表示ラベルとnameを設定します。contextフィールドには、前後の空白を除いた内容から算出した文字数も表示します。どちらのコントロールもv-modelを使うため、表示値とコンポジションのハンドラーが同じrefを参照します。テキストエリアには適切な初期行数とautoresizeを設定し、ユーザーの入力が固定サイズの枠内で切り詰められず、長くなるにつれて表示領域も広がるようにします。

### コンポジションの前に検証する

元のコンポジション操作では、前後の空白を除いたtitleとcontextが空でないことを必須とします。どちらかが未入力の場合は、わかりやすいアラートを表示し、現在の入力内容を保持します。これはアプリケーション内のバリデーションであり、サーバーへの呼び出しや、含まれていないスキーマを暗黙に想定するものではありません。提示されたコードでは、ルールとエラー処理を1か所で確認できます。

## Nuxt UI デザインシステムの派生ドラフトと古い状態の防止

### 入力されているテキストだけを組み立てる

出力は、入力されたタイトルとコンテキストに、任意の固定共有チェックリストを組み合わせたものです。結果はAIの応答ではなく、ローカルの下書きであることを明示します。モデルの呼び出しや読み込み待ち、生成されたかのようなコンテンツはありません。任意のチェックリストはネイティブのUSwitchのブール値で制御され、組み立てられるテキストにはその選択がそのまま反映されます。

### 入力が変更されたら古い結果をクリアする

タイトル、コンテキスト、チェックリストを監視するVueのwatchにより、編集があるたびに以前の合成結果を削除します。ステータスバッジは「テキストを入力してください」に戻ります。これにより、新しい入力を編集中に古い下書きが最新のものとして表示されるのを防ぎます。単語数はcomputed値のため、現在のコンテキストとのずれも生じません。

## Nuxt UI デザインシステムの空状態とリセット状態を完全に整える

### 待機パネルを役立つ内容にする

合成前は、右側のカードに、表示される内容や編集、プライバシー、リセットの仕組みを詳しく説明します。単なる空のコンテンツ領域ではありません。合成後は、改行と折り返しを保った、読みやすい下書き全文を表示します。バッジにも状態をテキストで示すため、色だけに頼ることはありません。

### サンプル入力一式にリセットする

サンプルをリセットすると、元のタイトルとコンテキスト全文、オンのチェックリストが復元され、結果とエラーはクリアされます。何を入力すればよいか分からない空のデモ状態にはなりません。ブラウザテストでは、変更したブリーフを合成したあと、リセットするとサンプルのタイトル全文が戻ることを確認します。

## Nuxt UI デザインシステムのレスポンシブカードとテキストの流れ

### 狭い画面でも結果を読みやすくする

700px未満では2枚のカードを1列にし、すべての入力欄を利用可能な幅に広げます。下書きには、折り返せない整形済みの1行ではなくpre-wrapを使うため、長いタイトルや文も自然に折り返されます。ボタンはアクショングループ内で折り返します。実際に編集して合成したあと、スマートフォン、タブレット、デスクトップに加え、幅280pxでもページを確認します。

### ネイティブの状態遷移後に状態を確認する

スイッチのスタイルにはネイティブの状態遷移が含まれます。結果をキャプチャする前に待機し、中間状態のつまみやトラックの色を遷移後の状態と見誤らないようにします。機能テストでは、オフにしたスイッチによって合成テキストからチェックリストが実際に削除されることを確認し、ブール値の反映を検証します。

## Nuxt UI デザインシステムのVue・Viteプロジェクト一式

### 提供された5つのファイルをすべて使う

この例では、App.vue、main.js、style.css、vite.config.mjs、index.htmlを使用します。設定には@vitejs/plugin-vueと@nuxt/ui/viteを含め、メインエントリでは@nuxt/ui/vue-pluginを登録します。@nuxt/uiだけをインストールしてApp.vueを貼り付けても、実行可能なプロジェクト一式にはなりません。バージョンを固定したセットアップにより、実際のネイティブコンポーネントとセマンティックスタイルを使ったローカルプレビューを再現できます。

1. 提供された5つのファイルを同じディレクトリに保存します。

2. バージョンを固定した依存関係をインストールします。

3. そのディレクトリでViteを実行します。

4. 入力漏れ、編集後の出力、チェックリストの削除、リセットをテストします。

### このブラウザ上の検証をデプロイとは切り分ける

このローカルビルドには、サーバーエンドポイント、認証、永続ストレージ、外部モデルへの接続はありません。コンポーネント名や合成アクションから、そうした機能があると示唆することもありません。実際の製品では、独自に検証済みの永続化やサービスの動作を追加しながら、フィールドと状態のパターンを再利用できます。一方、この検証サンプルは、そうした機能がなくても十分に活用できます。

## Nuxt UI デザインシステムのコンポーネント例

### App.vue

ネイティブコンポーネントを使った構成とリアクティブな状態管理を一通り示します。

```
<script setup>
import{ref,computed,watch}from'vue';
const title=ref('A calmer project handoff'),context=ref('Help a small team understand what is ready, what needs a decision, and who owns the next step.'),checklist=ref(true),error=ref(''),brief=ref('');const words=computed(()=>context.value.trim()?context.value.trim().split(/\s+/).length:0);watch([title,context,checklist],()=>{brief.value='';error.value=''});function compose(){if(!title.value.trim()||!context.value.trim()){error.value='Add both a title and context before composing.';return}brief.value=title.value.trim()+'\n\nPurpose\n'+context.value.trim()+(checklist.value?'\n\nBefore sharing\n• Name the next decision.\n• Identify an owner.\n• Include the source materials.':'')+'\n\nThis is a local draft, not a generated AI response.';}function reset(){title.value='A calmer project handoff';context.value='Help a small team understand what is ready, what needs a decision, and who owns the next step.';checklist.value=true;brief.value='';error.value=''}
</script>
<template><UApp><main><p class="text-primary font-semibold text-sm">NUXT UI / ORIGINAL BRIEF COMPOSER</p><h1 class="text-4xl font-bold tracking-tight mt-4 text-highlighted">Put the next step into words.</h1><p class="text-muted mt-5 max-w-2xl leading-7">A local composition tool using Nuxt UI 4.11.3 in a standalone Vue application. The preview assembles your text; it does not call an AI model.</p><div class="layout"><UCard><template #header><h2 class="font-semibold text-xl">Write the essentials</h2></template><div class="stack"><UFormField label="Brief title" name="title"><UInput v-model="title" class="w-full" placeholder="Name the work" aria-label="Brief title"/></UFormField><UFormField label="Context" name="context" :description="words+' words in your context'"><UTextarea v-model="context" class="w-full" autoresize :rows="5" placeholder="What should the next person understand?" aria-label="Context"/></UFormField><USwitch v-model="checklist" label="Include the sharing checklist"/><p v-if="error" role="alert" class="text-error text-sm">{{error}}</p><div class="flex flex-wrap gap-3"><UButton @click="compose">Compose local brief</UButton><UButton color="neutral" variant="outline" @click="reset">Reset sample</UButton></div></div></UCard><UCard><template #header><div class="flex justify-between gap-3 flex-wrap"><h2 class="font-semibold text-xl">Readable draft</h2><UBadge :color="brief?'success':'neutral'" variant="subtle">{{brief?'Composed locally':'Waiting for your text'}}</UBadge></div></template><div v-if="brief" class="brief" role="status">{{brief}}</div><div v-else class="space-y-4 text-muted leading-7"><p>Your draft will keep the title and context you provide, with an optional sharing checklist.</p><ul class="list-disc pl-5 space-y-2"><li>Editing any input clears an older composed result.</li><li>No content leaves the browser.</li><li>Reset returns to the complete sample inputs.</li></ul></div></UCard></div><p class="notes text-muted">Actual UCard, UFormField, UInput, UTextarea, USwitch, UButton and UBadge components with Nuxt UI’s default semantic theme. Original application content and state; this example uses Vue/Vite, not a Nuxt server.</p></main></UApp></template>
```

コードリファレンス

- 5つのソースファイルをすべて同じ場所に置きます。

### main.js

VueのマウントとNuxt UIのランタイムプラグイン。

```
import{createApp}from'vue';import ui from'@nuxt/ui/vue-plugin';import App from'./App.vue';import './style.css';createApp(App).use(ui).mount('#app');
```

コードリファレンス

- 5つのソースファイルをすべて同じ場所に置きます。

### style.css

ネイティブテーマのインポートと元のレスポンシブレイアウト。

```
@import 'tailwindcss';
@import '@nuxt/ui';
body{margin:0}*{box-sizing:border-box}main{max-width:1100px;margin:auto;padding:32px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.stack{display:grid;gap:24px}.brief{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere}.notes{font-size:13px;line-height:1.6;margin-top:24px}@media(max-width:700px){main{padding:16px}.layout{grid-template-columns:1fr}}textarea{min-height:150px}button{max-width:100%}
```

コードリファレンス

- 5つのソースファイルをすべて同じ場所に置きます。

### vite.config.mjs

VueコンパイラーとNuxt UIのビルドプラグイン。

```
import{defineConfig}from'vite';import vue from'@vitejs/plugin-vue';import ui from'@nuxt/ui/vite';export default defineConfig({plugins:[vue(),ui({colorMode:false})],base:'./',build:{cssCodeSplit:false}});
```

コードリファレンス

- 5つのソースファイルをすべて同じ場所に置きます。

### index.html

ブラウザー用のルートドキュメント一式。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Project brief composer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>
```

コードリファレンス

- 5つのソースファイルをすべて同じ場所に置きます。

## Nuxt UI デザインシステムのエージェント設定

### 実装の出発点

最初に、提供された5つのファイルをすべて保存します。バージョンを固定したViteおよびNuxt UIのリリースがサポートするNodeバージョンを使用してください（ローカルビルドではNode 22.17を使用）。

```
npm init -y
npm install vue@3.5.43 vue-router@5.3.1 @nuxt/ui@4.11.3 tailwindcss@4.3.3 vite@8.3.2 @vitejs/plugin-vue@6.0.9
npx vite --host 127.0.0.1
```

### あなたのプロジェクト向けプロンプト

```
公式のViteおよびVueプラグインを使って、Nuxt UI 4.11.3のスタンドアロンVueブリーフコンポーザーを一式実装します。セマンティックカラー、UFormFieldのコンテキスト、制御された入力とスイッチのref、trimによる入力検証、computedによる単語数、古い結果のクリア、完全な待機時コンテンツ、リセットを維持してください。AIの呼び出しやバックエンドへの保存を示唆しないでください。
```

## Nuxt UI デザインシステムの参照元と対象範囲

スタンドアロンのVue/Viteブラウザーアプリで使う実際のNuxt UIコンポーネントです。ブリーフコンポーザーは独自のOpenDesignコードで、AIモデル、Nuxtサーバー、永続化サービスは呼び出しません。

- Vueのインストール スタンドアロンのVue・Vite連携。

- デザインシステム セマンティックなCSSと共通のテーマ構成。

- カラー 設定可能なセマンティックエイリアス。

- フォームフィールド ラベル、説明、フィールドコンテキスト。

- テキストエリア 制御されたテキスト入力とサイズ変更の動作。

## Nuxt UI デザインシステム関連リソース

### Oruga UI

ネイティブのOrugaカタログエディター。検索・削除できるトピックタグ、語彙数の上限、任意テーマの実際のトークンを備え、選択したラベルを反映するカードをライブ表示します。

### Pico CSS

Pico CSSのスタイルは、レスポンシブなremベースの文字サイズスケールとテーマ変数を備えたセマンティックなHTMLです。標準版、クラスレス版、条件付き版では統合できる範囲が異なります。このガイドでは標準ビルドを使い、ネイティブの開閉要素とダイアログ動作を備えた読みやすさ設定フォームを作成します。

### Preline UI

タブを連動させたネイティブのPrelineセッションプランナー。入力数値を制限するプラグイン、インストール済みのテーマエイリアス、実際のTailwindスケールを備え、選択したセッションに応じてローカルの教材費見積もりが更新されます。


- [実装リファレンス](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [ソース](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [ソース](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [ソース](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [コードリファレンス](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Vueのインストール スタンドアロンのVue・Vite連携。](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [デザインシステム セマンティックなCSSと共通のテーマ構成。](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [カラー 設定可能なセマンティックエイリアス。](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [フォームフィールド ラベル、説明、フィールドコンテキスト。](https://ui.nuxt.com/docs/components/form-field)
- [テキストエリア 制御されたテキスト入力とサイズ変更の動作。](https://ui.nuxt.com/docs/components/textarea)