# Дизайн-система Nuxt UI

## Nuxt UI Предварительный просмотр интерфейса дизайн-системы

Измените заполненные примеры, выберите пункт контрольного списка, проверьте валидацию и сброс.

## Nuxt UI Справочник по дизайн-системе

Nuxt UI Значения по умолчанию для версии 4.11.3, фактически скомпилированные семантические CSS и контракты нативных компонентов Vue. Решения по исходному макету и валидации отмечены отдельно.

### Семантические псевдонимы цветов по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primary | green | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| secondary | blue | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| success | green | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| info | blue | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| warning | yellow | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| error | red | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
| neutral | slate | Фактический псевдоним по умолчанию в Nuxt UI 4.11.3. Цветовые свойства компонентов ссылаются на семантические имена, а настроенная палитра задаёт их значения. |
### Роли текста для светлой темы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --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) | Импортируйте ui из @nuxt/ui/vue-plugin; одного прямого импорта компонента недостаточно для полной самостоятельной настройки. |
| UApp | Application wrapper | Предоставляет контекст приложения Vue для дерева компонентов. |
| UFormField | label, description, name | Связывает контекст поля и понятный вспомогательный текст с элементом управления. |
| UInput / UTextarea | v-model | Оба поля ввода связаны с управляемыми Vue refs; в текстовой области также включены автоматическое изменение размера и начальное число строк. |
| USwitch | v-model + label | Необязательный выбор в контрольном списке хранится как реальное логическое состояние. |
| UButton | @click / color / variant | Для основного действия и нейтрального действия с контуром используются нативные варианты. |
| UCard | header slot + default body | Для содержимого поля и понятного результата используются одинаковые нативные поверхности. |
| UBadge | color + variant="subtle" | Текст и оформление различают ожидание и локально составленный результат. |
## Nuxt UI Полное руководство по дизайн-системе

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Nuxt UI Среда выполнения для самостоятельного проекта Vue в дизайн-системе

### Используйте официальный способ интеграции с Vue

> В этом примере @nuxt/ui 4.11.3 работает с Vue 3 и Vite. Это не приложение Nuxt с серверным рендерингом. Плагин Vite разрешает сгенерированные шаблоны интерфейса, автоматический импорт компонентов и псевдонимы фреймворка; плагин 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 — оттенки сланцевого. Нативные компоненты используют эти псевдонимы через цветовые свойства. Поэтому кнопка основного действия и нейтральная кнопка сброса с контуром представляют разные роли действий, не вводя пользовательскую палитру, которую ошибочно выдают за значение по умолчанию Nuxt UI.

### Чётко обозначьте область применения темы оформления

Для этого примера только со светлой темой в плагине Vite задано colorMode:false. В справочной таблице перечислены соответствующие объявления цветов текста, поверхностей и границ для светлой темы. Это не означает, что те же буквальные значения используются и в тёмной теме. Если продукт добавляет переключение цветовой темы, включите выбранную интеграцию и проверьте совместную работу элементов управления, поверхностей и сохранённых настроек.

## Nuxt UI Роли текста, поверхности и геометрия дизайн-системы

### Разберитесь в связях семантических CSS

Для вспомогательного текста используется --ui-text-muted, ссылающийся на neutral-500; для основного заголовка — --ui-text-highlighted, ссылающийся на neutral-900. Переменные поверхностей и границ также ссылаются на настроенную шкалу нейтральных оттенков. Руководство сохраняет эти связи, а не сводит всё к нескольким несвязанным значениям hex: при изменении нейтральной палитры тема компонентов остаётся согласованной.

### Отделяйте общие значения по умолчанию от решений для страницы

В этой версии общие значения --ui-radius и --ui-container составляют .25rem и 80rem соответственно. В исходном макете описания проекта выбрана максимальная внешняя ширина 1100px, две колонки с интервалом 24px и одна колонка при ширине меньше 700px. Для заголовка и вспомогательного текста используются фактические текстовые роли Tailwind. Эти решения для страницы заданы в предоставленном CSS, а не представлены как требования всей библиотеки.

## Nuxt UI Компоновка полей и локальная валидация в дизайн-системе

### Задайте каждому полю корректный контекст

UFormField добавляет видимую подпись и имя для UInput или UTextarea. В поле контекста также отображается число слов, вычисляемое по тексту без пробелов по краям. Для обоих элементов управления используется v-model, поэтому отображаемые значения и обработчик составления читают одни и те же refs. Текстовая область имеет удобное начальное число строк и автоматически меняет размер, позволяя введённому пользователем длинному тексту занимать больше места, а не обрезаться в неподвижном поле.

### Проводите валидацию до составления результата

Исходное действие составления требует непустых заголовка и контекста после удаления пробелов по краям. Если одно из полей пусто, отображается понятное предупреждение, а введённые данные сохраняются. Это валидация приложения, а не подразумеваемый запрос к серверу или схема, которой здесь нет. Предоставленный код наглядно показывает правило и обработку ошибки в одном месте.

## Nuxt UI Черновик на основе данных и предотвращение показа устаревшего состояния в дизайн-системе

### Собирайте результат только из имеющегося текста

Результат объединяет указанные заголовок и контекст с необязательным статическим контрольным списком для публикации. Он обозначен как локальный черновик, а не ответ ИИ. Здесь нет вызова модели, ожидания загрузки или выдуманного сгенерированного содержимого. Необязательный контрольный список управляется нативным USwitch с логическим состоянием, и итоговый текст напрямую отражает выбранный вариант.

### Сбрасывайте прежний результат при изменении данных

Наблюдатель Vue за заголовком, контекстом и контрольным списком удаляет ранее составленный результат после любого изменения. Затем значок состояния снова показывает «Ожидание текста». Это не позволяет устаревшему черновику выглядеть актуальным, пока пользователь редактирует новые данные. Число слов остаётся вычисляемым значением и потому всегда соответствует текущему контексту.

## Nuxt UI Полные состояния пустого экрана и сброса в дизайн-системе

### Сделайте панель ожидания полезной

До составления результата в правой карточке приводится полное объяснение того, что появится и как работают редактирование, конфиденциальность и сброс. Это не пустой блок. После составления в нём отображается весь текст черновика: сохраняются переносы строк и автоматический перенос текста. Значок повторяет состояние текстом, поэтому цвет не служит единственным сигналом.

### Восстанавливайте заполненные примеры

Кнопка сброса примера восстанавливает исходный заголовок, весь контекст и включённый контрольный список, одновременно удаляя результат и ошибку. Она не оставляет пустой пример, в котором читателю приходится догадываться, какой текст должен быть. Проверка в браузере изменяет описание проекта, составляет результат и затем проверяет, что после сброса восстановлен полный исходный заголовок.

## Nuxt UI Адаптивные карточки и перенос текста в дизайн-системе

### Сохраняйте читаемость результата на узких экранах

При ширине меньше 700px две карточки выстраиваются в один столбец, а все поля ввода занимают доступную ширину. Для черновика используется pre-wrap, а не форматированный текст без переносов, поэтому длинные заголовки и предложения естественно переносятся на новую строку. Кнопки переносятся внутри своей группы действий. После реального редактирования и составления результата страница проверяется при ширине 280px, а также на телефонах, планшетах и настольных компьютерах.

### Проверяйте состояние после нативных переходов

Для оформления переключателя используются нативные переходы между состояниями. Перед снимком состояния визуальная проверка ждёт завершения перехода, чтобы не принять промежуточный цвет ползунка или дорожки за конечное состояние. Функциональные проверки подтверждают действие логического значения: если переключатель выключен, контрольный список действительно удаляется из составленного текста.

## Nuxt UI Полный проект Vue и Vite для системы дизайна

### Используйте все пять предоставленных файлов

В примере используются App.vue, main.js, style.css, vite.config.mjs и index.html. Конфигурация включает @vitejs/plugin-vue и @nuxt/ui/vite; точка входа main устанавливает @nuxt/ui/vue-plugin. Одной установки @nuxt/ui и вставки App.vue недостаточно, чтобы получить полностью работоспособный проект. Зафиксированная конфигурация воспроизводит локальный предпросмотр с настоящими нативными компонентами и семантическими стилями.

1. Сохраните все пять предоставленных файлов в одной папке.

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>
```

Справочник по коду

- Храните все пять исходных файлов в одной папке.

### 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');
```

Справочник по коду

- Храните все пять исходных файлов в одной папке.

### 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%}
```

Справочник по коду

- Храните все пять исходных файлов в одной папке.

### 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}});
```

Справочник по коду

- Храните все пять исходных файлов в одной папке.

### 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>
```

Справочник по коду

- Храните все пять исходных файлов в одной папке.

## Nuxt UI Настройка агента системы дизайна

### Отправная точка для реализации

Сначала сохраните все пять предоставленных файлов. Используйте версию Node, совместимую с зафиксированными выпусками Vite и Nuxt UI (локальная сборка выполнялась на 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
```

### Запрос для вашего проекта

```
Реализуйте полноценный автономный составитель брифов Nuxt UI 4.11.3 на Vue с официальными плагинами Vite и Vue. Сохраните семантические цвета, контексты UFormField, управляемые ссылки на ввод и переключатель, проверку с удалением пробелов по краям, вычисление количества слов, очистку устаревшего результата, полное состояние ожидания и сброс. Не создавайте впечатление, что выполняется запрос к ИИ или сохранение на сервере.
```

## Nuxt UI Источники и область применения системы дизайна

Настоящие компоненты Nuxt UI в автономном браузерном приложении Vue/Vite. Составитель брифов написан на оригинальном коде OpenDesign и не обращается к модели ИИ, серверу Nuxt или службе хранения данных.

- Установка Vue Интеграция с автономными Vue и Vite.

- Дизайн-система Семантические CSS и общая структура темы.

- Цвета Настраиваемые семантические псевдонимы.

- Поля формы Метки, описания и контекст поля.

- Текстовая область Управляемый ввод текста и изменение размера.

## Nuxt UI Связанные ресурсы системы дизайна

### Oruga UI

Встроенный редактор каталога Oruga с поиском и удалением тематических тегов, ограничениями словаря, реальными токенами необязательной темы и динамической карточкой, которая отражает выбранные метки.

### Pico CSS

Pico CSS стилизует семантический HTML с адаптивной шкалой типографики в rem и переменными темы. Стандартная, безклассовая и условная сборки рассчитаны на разные сценарии интеграции; в этом руководстве используется стандартная сборка для формы предпочтений чтения со встроенными раскрывающимися блоками и диалогом.

### 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)