# Sistema de design Nuxt UI

## Prévia da interface do sistema de design Nuxt UI

Edite todos os campos de exemplo, escolha uma lista de verificação, confira a validação e redefina.

## Referência de design do sistema de design Nuxt UI

Padrões de Nuxt UI 4.11.3, CSS semântico compilado real e contratos dos componentes nativos de Vue. As escolhas de layout e validação originais são identificadas separadamente.

### Aliases de cores semânticas padrão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| primary | green | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| secondary | blue | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| success | green | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| info | blue | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| warning | yellow | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| error | red | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
| neutral | slate | Alias padrão real de Nuxt UI 4.11.3. As propriedades de cor dos componentes usam nomes semânticos, enquanto a paleta configurada fornece os valores. |
### Papéis de texto claro

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ui-text-dimmed | var(--ui-color-neutral-400) | Texto auxiliar de menor ênfase. Não use esse papel para rótulos de campos obrigatórios nem mensagens de validação. |
| --ui-text-muted | var(--ui-color-neutral-500) | Descrições auxiliares, como dicas de campos e o parágrafo introdutório da prévia original. |
| --ui-text-toned | var(--ui-color-neutral-600) | Hierarquia de leitura secundária; compare-a com o papel de texto normal antes de reduzir ainda mais o contraste. |
| --ui-text | var(--ui-color-neutral-700) | Papel de texto padrão para o fluxo principal de leitura e o conteúdo inserido pelo usuário. |
| --ui-text-highlighted | var(--ui-color-neutral-900) | Títulos de alta ênfase e detalhes em primeiro plano, incluindo o título principal da prévia. |
| --ui-text-inverted | #fff | Primeiro plano para uma superfície escura invertida; não é uma substituição geral para texto branco em todos os destaques. |
### Superfícies e bordas claras

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ui-bg | #fff | Plano de fundo básico e superfície clara do cartão usados no compositor completo. |
| --ui-bg-muted | var(--ui-color-neutral-50) | Superfície auxiliar discreta para uma região secundária na aparência clara. |
| --ui-bg-elevated | var(--ui-color-neutral-100) | Separação mais forte em relação ao fundo branco para superfícies secundárias elevadas ou destacadas. |
| --ui-bg-accented | var(--ui-color-neutral-200) | Fundo neutro mais pronunciado; mantenha os valores dos campos legíveis sobre ele. |
| --ui-bg-inverted | var(--ui-color-neutral-900) | Superfície neutra escura que combina com o papel de primeiro plano invertido. |
| --ui-border | var(--ui-color-neutral-200) | Linha divisória neutra padrão para campos e contornos de cartões. |
| --ui-border-muted | var(--ui-color-neutral-200) | Separadores de baixa ênfase entre blocos relacionados, em vez de divisões fortes entre seções. |
| --ui-border-accented | var(--ui-color-neutral-300) | Contorno neutro mais forte quando a borda padrão não oferece separação suficiente. |
| --ui-border-inverted | var(--ui-color-neutral-900) | Papel da borda em superfícies invertidas; use-a com o fundo previsto. |
### Geometria compartilhada e tipografia do Tailwind

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --ui-radius | .25rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
| --ui-container | 80rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
| --spacing | .25rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
| --text-sm | .875rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
| --text-xl | 1.25rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
| --text-4xl | 2.25rem | Valores padrão publicados de Nuxt UI ou do Tailwind na saída realmente compilada. O layout original usa largura máxima de 1100px e espaçamento de 24px. |
### Contratos dos componentes Vue

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Vite plugin | ui({ colorMode: false }) | Gera as importações de componentes/tema e a integração necessária com o navegador. |
| Vue plugin | createApp(App).use(ui) | Importe ui de @nuxt/ui/vue-plugin; importar apenas um componente diretamente não configura a integração independente completa. |
| UApp | Application wrapper | Fornece o contexto nativo do aplicativo para a árvore de componentes. |
| UFormField | label, description, name | Conecta o contexto do campo e o texto de apoio legível ao controle. |
| UInput / UTextarea | v-model | Os dois campos de entrada são refs controladas do Vue; a área de texto também usa redimensionamento automático e linhas. |
| USwitch | v-model + label | A opção da lista de verificação é opcional e tem um estado booleano real. |
| UButton | @click / color / variant | A composição principal e a ação de recuperação com contorno neutro usam variantes nativas. |
| UCard | header slot + default body | Mantém o conteúdo do campo e o resultado legível em superfícies nativas correspondentes. |
| UBadge | color + variant="subtle" | O texto e a aparência diferenciam a espera de um resultado composto localmente. |
## Nuxt UI: guia completo do sistema de design

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Nuxt UI: ambiente de execução Vue independente do sistema de design

### Use o caminho oficial de integração com Vue

> Este estudo executa @nuxt/ui 4.11.3 com Vue 3 e Vite. Não é um aplicativo Nuxt renderizado no servidor. O plugin do Vite resolve os modelos de UI gerados, a importação automática de componentes e os aliases do framework; o plugin do Vue registra a integração necessária em tempo de execução. O exemplo completo inclui ambos, evitando uma configuração enganosa que instala um pacote, mas deixa #build ou #imports sem resolução.

- @nuxt/ui/vite fornece integração em tempo de compilação.

- @nuxt/ui/vue-plugin fornece o registro em tempo de execução.

- UApp envolve a árvore de componentes nativos.

### Mantenha o componente raiz do aplicativo e a folha de estilos

UApp envolve a composição. A folha de estilos importa Tailwind CSS e @nuxt/ui, e a entrada principal importa essa folha antes de montar o aplicativo. A compilação gera componentes CSS reais e comportamentos, em vez de aproximações estáticas de cartões e interruptores. Esta é uma configuração concreta no navegador para inspecionar a biblioteca; um aplicativo Nuxt deve usar a configuração de módulo própria, conforme a documentação.

## Nuxt UI: cores semânticas e variantes de componentes do sistema de design

### Use cores semânticas em vez de copiar um tom de verde

A configuração padrão associa primary e success a verde, secondary e info a azul, warning a amarelo, error a vermelho e neutral a cinza-ardósia. Os componentes nativos usam esses aliases por meio das propriedades de cor. Assim, o botão principal de composição e o botão neutro de redefinição com contorno representam funções de ação distintas, sem introduzir uma paleta personalizada que seja apresentada incorretamente como padrão de Nuxt UI.

### Deixe explícito o escopo da aparência

O plugin do Vite está configurado com colorMode:false para este estudo somente com tema claro. A tabela de referência lista as declarações correspondentes para texto, superfície e borda no tema claro. Ela não afirma que esses valores literais também se aplicam ao tema escuro. Um produto que adicione modo de cor deve habilitar a integração escolhida e verificar em conjunto os controles, as superfícies e as preferências salvas.

## Nuxt UI: papéis do texto, superfícies e geometria do sistema de design

### Entenda as relações semânticas de CSS

O texto de apoio usa --ui-text-muted, associado a neutral-500; o título principal usa --ui-text-highlighted, associado a neutral-900. As variáveis de superfície e borda também fazem referência à escala de neutros configurada. O guia preserva essas relações em vez de reduzir tudo a alguns valores hexadecimais sem conexão, para que a alteração da paleta de neutros mantenha um tema de componentes coerente.

### Separe os padrões compartilhados das decisões da página

Nesta versão, --ui-radius compartilhado é .25rem e --ui-container é 80rem. Já o layout original do briefing escolhe um limite externo de 1100px, duas colunas com espaçamento de 24px e uma única coluna abaixo de 700px. Os papéis de texto reais do Tailwind definem os tamanhos do título e do texto de apoio. Essas decisões de página estão no CSS fornecido, não são requisitos inventados para toda a biblioteca.

## Nuxt UI: composição de campos e validação local no sistema de design

### Forneça um contexto de campo real para cada entrada

UFormField fornece um rótulo visível e um nome para UInput ou UTextarea. O campo de contexto também mostra uma contagem de palavras calculada com base no conteúdo sem espaços externos. Os dois controles usam v-model, portanto os valores exibidos e o manipulador de composição leem as mesmas refs. A área de texto tem uma quantidade inicial de linhas adequada e redimensionamento automático, permitindo que conteúdos mais longos cresçam em vez de ficarem ocultos em uma caixa fixa e cortada.

### Valide antes de compor

A ação de composição original exige um título e um contexto cujo conteúdo, após remover os espaços externos, não esteja vazio. Se algum deles estiver ausente, ela mostra um alerta legível e mantém a entrada atual do usuário. Isso é validação do aplicativo, não uma chamada implícita a um servidor nem um esquema que não foi incluído. O código fornecido mostra a regra e o tratamento do erro em um só lugar.

## Nuxt UI: prevenção de rascunhos desatualizados no sistema de design

### Monte apenas o texto que estiver presente

A saída combina o título e o contexto fornecidos com uma lista estática opcional para compartilhamento. O resultado informa que é um rascunho local, não uma resposta de IA. Não há chamada a um modelo, atraso de carregamento nem conteúdo gerado inventado. A lista opcional é controlada por um USwitch nativo com valor booleano, e o texto montado reflete diretamente essa escolha.

### Limpe resultados antigos quando as entradas mudarem

Um watch do Vue que observa o título, o contexto e a lista remove o resultado composto anterior após qualquer edição. O indicador de status volta então a Aguardando seu texto. Isso evita que um rascunho desatualizado pareça atual enquanto o usuário edita novas entradas. A contagem de palavras continua sendo um valor computado, para permanecer sempre sincronizada com o contexto atual.

## Nuxt UI: estados vazios e de redefinição completos no sistema de design

### Torne útil o painel de espera

Antes da composição, o cartão à direita contém uma explicação completa do que será exibido e de como funcionam a edição, a privacidade e a redefinição. Não é um módulo de conteúdo vazio. Depois da composição, esse espaço exibe o rascunho completo e legível, preservando as quebras de linha e a quebra automática de texto. O indicador repete o estado em texto, para que a cor não seja o único sinal.

### Restaure todos os dados de exemplo

A ação Redefinir exemplo restaura o título original, o contexto completo e a lista ativada, além de limpar o resultado e qualquer erro. Ela não deixa uma demonstração em branco que obrigue o leitor a adivinhar que conteúdo deveria estar ali. A verificação no navegador compõe um briefing editado e, em seguida, confirma que o título de exemplo completo retorna após a redefinição.

## Nuxt UI: cartões responsivos e fluxo de texto no sistema de design

### Mantenha o resultado legível em telas estreitas

Os dois cartões passam a uma única coluna abaixo de 700px, e todos os campos de entrada usam a largura disponível. O rascunho usa pre-wrap, em vez de uma linha pré-formatada que não pode quebrar, para que títulos e frases longos sejam distribuídos naturalmente em várias linhas. Os botões quebram linha dentro do grupo de ações. A página é verificada em 280px, além dos tamanhos de celular, tablet e desktop, após uma edição e composição reais.

### Inspecione o estado após as transições nativas

O estilo do interruptor inclui sua transição nativa de estado. A verificação visual aguarda antes de capturar o resultado, para não confundir uma posição intermediária do botão ou uma cor transitória da trilha com o estado final. As verificações funcionais confirmam o efeito do valor booleano, verificando se um interruptor desmarcado realmente remove a lista do texto composto.

## Nuxt UI: projeto completo em Vue e Vite do sistema de design

### Use os cinco arquivos fornecidos

O exemplo fornece App.vue, main.js, style.css, vite.config.mjs e index.html. A configuração inclui @vitejs/plugin-vue e @nuxt/ui/vite; a entrada principal instala @nuxt/ui/vue-plugin. Instalar apenas @nuxt/ui e colar App.vue não constitui um projeto executável completo. A configuração com versões fixadas reproduz a pré-visualização local com seus componentes nativos e estilos semânticos reais.

1. Salve juntos os cinco arquivos fornecidos.

2. Instale as dependências com versões fixadas.

3. Execute o Vite nesse diretório.

4. Teste entradas ausentes, saída editada, remoção da lista e redefinição.

### Mantenha este estudo no navegador separado da implantação

A compilação local não tem endpoint de servidor, autenticação, armazenamento persistente nem conexão com um modelo externo. Esses recursos não estão implícitos nos nomes dos componentes nem na ação de composição. Um produto real pode reutilizar o padrão de campos e estados, adicionando persistência e comportamento de serviço próprios e verificados, mas o estudo completo continua útil sem esses recursos.

## Nuxt UI: exemplos de componentes do sistema de design

### App.vue

Composição completa de componentes nativos e estado reativo.

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

Referência de código

- Mantenha juntos os cinco arquivos de origem.

### main.js

Montagem do Vue e plugin de execução do 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');
```

Referência de código

- Mantenha juntos os cinco arquivos de origem.

### style.css

Importações do tema nativo e layout responsivo original.

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

Referência de código

- Mantenha juntos os cinco arquivos de origem.

### vite.config.mjs

Compilador do Vue e plugin de compilação do 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}});
```

Referência de código

- Mantenha juntos os cinco arquivos de origem.

### index.html

Documento raiz completo para o navegador.

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

Referência de código

- Mantenha juntos os cinco arquivos de origem.

## Nuxt UI: configuração do agente de IA para o sistema de design

### Ponto de partida para implementação

Salve primeiro os cinco arquivos fornecidos. Use uma versão do Node compatível com as versões fixadas do Vite e do Nuxt UI (a compilação local usou o 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
```

### Um prompt para seu projeto

```
Implemente o compositor de briefings independente completo de Nuxt UI 4.11.3 com os plugins oficiais do Vite e do Vue. Preserve as cores semânticas, os contextos de UFormField, as refs controladas dos campos de entrada e do interruptor, a validação após remover espaços externos, a contagem de palavras computada, a limpeza de resultados desatualizados, o conteúdo completo de espera e a redefinição. Não sugira que há uma chamada de IA ou salvamento em um backend.
```

## Nuxt UI: fontes e escopo do sistema de design

Componentes reais de Nuxt UI em um aplicativo de navegador independente com Vue/Vite. O criador de briefings é um código OpenDesign original e não chama um modelo de IA, servidor Nuxt ou serviço de persistência.

- Instalação do Vue Integração independente com Vue e Vite.

- Design system CSS semântico e estrutura de tema compartilhada.

- Cores Aliases semânticos configuráveis.

- Campos de formulário Rótulos, descrições e contexto do campo.

- Área de texto Comportamento de controle de texto e redimensionamento.

## Recursos relacionados ao sistema de design Nuxt UI

### Oruga UI

Um editor de catálogo nativo do Oruga, com tags de tópicos pesquisáveis e removíveis, limites de vocabulário aplicados, tokens reais de um tema opcional e um cartão dinâmico que reflete os rótulos selecionados.

### Pico CSS

Pico CSS aplica estilos a HTML semântico com uma escala tipográfica responsiva baseada em rem e variáveis de tema. Suas distribuições padrão, sem classes e condicionais têm escopos de integração diferentes; este guia usa a compilação padrão em um formulário de preferências de leitura, com comportamentos nativos de expansão e diálogo.

### Preline UI

Um planejador de sessões nativo do Preline, com guias vinculadas, um plugin de entrada numérica com restrições, aliases de tema instalados, escalas reais do Tailwind e uma estimativa local de materiais que se atualiza conforme a sessão selecionada.


- [Referência de implementação](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Fonte](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [Fonte](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [Fonte](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Referência de código](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Instalação do Vue Integração independente com Vue e Vite.](https://ui.nuxt.com/docs/getting-started/installation/vue)
- [Design system CSS semântico e estrutura de tema compartilhada.](https://ui.nuxt.com/docs/getting-started/theme/design-system)
- [Cores Aliases semânticos configuráveis.](https://ui.nuxt.com/docs/getting-started/theme/colors)
- [Campos de formulário Rótulos, descrições e contexto do campo.](https://ui.nuxt.com/docs/components/form-field)
- [Área de texto Comportamento de controle de texto e redimensionamento.](https://ui.nuxt.com/docs/components/textarea)