> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Configurando um Sistema de Design
> Configure o Agent com o sistema de design da sua organização — biblioteca de componentes, ativos de marca, tokens de design e padrões visuais — para que cada aplicativo, site e artefato siga a linguagem visual da sua organização.
Um sistema de design fornece ao Agent o conhecimento necessário para construir uma UI alinhada à marca em tudo o que sua organização cria no Replit — aplicativos web, aplicativos móveis, slides e outros artefatos. Ao configurar sua biblioteca de componentes, tokens de design, ativos de marca e regras de uso dentro do monorepo pnpm padrão do Replit, o Agent aplica sua linguagem visual desde o primeiro prompt.
Os sistemas de design estão disponíveis exclusivamente no plano **Enterprise**. Apenas administradores da organização podem configurar e gerenciar sistemas de design.
## Por que configurar um sistema de design
Sem um sistema de design, cada desenvolvedor precisa explicar manualmente sua biblioteca de componentes, tokens de cor e convenções de layout ao Agent. Configurar um sistema de design resolve isso ao:
* **Codificar seus padrões visuais**: O Agent usa seus componentes, cores e espaçamentos exatos — não padrões genéricos
* **Garantir consistência**: Cada aplicativo segue a mesma linguagem de design
* **Reduzir o tempo de integração**: Novos desenvolvedores produzem resultados alinhados à marca imediatamente
* **Capturar conhecimento tácito**: Decisões de design e padrões de uso de componentes que existem na cabeça da sua equipe ficam documentados para o Agent
## O que você vai precisar
* Biblioteca de componentes de código frontend como um tarfile ou conjunto de tarfiles
* Ativos de fonte e ícones usados no seu sistema de design
* Qualquer documentação de IA do seu sistema de design (MCP, Agent Skills)
## O que você pode configurar
Configurar um sistema de design envolve três partes:
1. **Instruções personalizadas**. Seu arquivo `custom_instruction/instructions.md` fornece ao Agent as regras de alto nível que se aplicam a cada projeto: qual biblioteca de componentes usar, quais tokens de design referenciar e quais padrões seguir. O Agent sempre tem esse arquivo no contexto.
2. **Skills**. As skills em `.agents/skills/` fornecem material de referência detalhado que o Agent carrega sob demanda. Use-as para documentação da API de componentes, guias de temas, bibliotecas de padrões de layout e outros conteúdos de referência aprofundados que seriam muito grandes para o arquivo de instruções principal.
3. **Ativos de design e marca**. Coloque seus logos, ícones, fontes e outros ativos de marca em uma pasta dedicada (por exemplo, `src/assets/brand/`). Configure um alias de caminho do Vite para que o Agent e os desenvolvedores possam referenciá-los com importações limpas como `@brand/logo.svg` em vez de caminhos relativos frágeis. Isso mantém as referências de ativos consistentes em todo o projeto.
## Guia passo a passo
Este guia orienta você na configuração de um sistema de design de ponta a ponta usando sua biblioteca de componentes existente empacotada como tarfiles:
1. **Crie um novo app Replit** e faça upload dos seus tarfiles.
2. **Diga ao Replit Agent para instalar os pacotes e exibir todos os componentes.** O Agent configurará o projeto e renderizará sua biblioteca de componentes.
3. **Revise o resultado.** Verifique se todos os componentes parecem corretos e correspondem às suas expectativas. Depois que tudo for verificado, prossiga para [Criando a skill do sistema de design](#criando-a-skill-do-sistema-de-design).
### Criando a skill do sistema de design
Com seus componentes prontos, a etapa final é criar uma skill do sistema de design para que o Agent possa referenciar seus componentes, tokens e padrões de uso em cada projeto.
Copie o prompt completo abaixo e cole-o no Agent. Substitua `` pelo nome do seu sistema de design:
````
Create a `` design system skill from the components and packages in this project.
Use the file structure shown below with a `SKILL.md` at the root, a `references/` directory for guides and component docs, and a `packages/` directory containing all dependencies needed to function.
Go through every component in the project and document each one in its own file under `references/components/`, including its props, variants, and example usage.
Format `SKILL.md` as an index that links out to the guide and component reference files, with a "General Guidance" section and a "Components" section, following the example shown below.
File structure:
.agents/skills/your-design-system/
├── SKILL.md
├── references/
│ ├── guides/
│ │ ├── setup.md
│ │ ├── guardrails.md
│ │ ├── layout-and-spacing.md
│ │ └── ...
│ └── components/
│ ├── component-index.md
│ ├── button.md
│ ├── checkbox.md
│ └── ...
└── packages/
└── (Tar files or code components)
The `SKILL.md` file acts as an index that links out to separate markdown files for guides and component references. Each linked file covers one topic in detail. Here is an example of what the generated `SKILL.md` looks like:
```markdown
---
name: your-design-system
description: Use when building or modifying any UI. Provides component API references, layout guidance, and visual style rules for your design system.
---
# Your Design System
## General Guidance
- [Setup](references/guides/setup.md) — Installation, project configuration, and provider setup
- [Guardrails](references/guides/guardrails.md) — Hard rules that must never be broken (banned patterns, required tokens, accessibility minimums)
- [Layout & Spacing](references/guides/layout-and-spacing.md) — Grid system, spacing scale, responsive breakpoints, and page templates
- ...
## Components
- [Component Index](references/components/component-index.md) — Full list of available components with status and category
Individual component references (props, variants, examples):
- [Button](references/components/button.md)
- [Checkbox](references/components/checkbox.md)
- ...
```
Guide files cover one topic each — setup and installation steps, best practices and rules, reference tables for token values, and short code examples showing correct usage.
Component files document a single component each, including the component name, a brief description, a props table, usage examples, and any guidelines or constraints. The more complete these files are, the better Agent's output will be.
````
### Conecte sua skill ao Agent
Depois que a skill for criada, certifique-se de que seu `custom_instruction/instructions.md` aponta o Agent para ela:
```markdown theme={null}
# Design System
Read and follow the design system skill at `.agents/skills/your-design-system/`.
Always apply the design system when building or modifying UI.
```
Por fim, pré-preencha o `replit.md` com contexto específico do sistema de design para que o Agent entenda seus padrões visuais desde o início. Inclua uma visão geral do projeto, sua biblioteca de componentes preferida, preferências de design principais (escala de espaçamento, requisitos de acessibilidade) e a stack de arquitetura.
### Valide sua configuração
Antes de lançar seu sistema de design, verifique esses elementos essenciais:
* `custom_instruction/instructions.md` aponta o Agent para a skill do sistema de design
* `.agents/skills/` inclui a skill com referências de componentes, guias e pacotes
* `replit.md` está pré-preenchido com visão geral do projeto, preferências e arquitetura
* O arquivo de tokens de design está incluído (`tokens.css` ou equivalente)
* O pacote do sistema de design está pré-instalado em `package.json`
* Crie um novo app de teste e verifique se o Agent usa o sistema de design corretamente
### Fixe o sistema de design na sua organização
Depois que o seu sistema de design estiver pronto, fixe-o para que todos os membros da organização possam usá-lo:
1. Navegue até o app do sistema de design na sua organização
2. Abra o menu de ações do app (menu de três pontos)
3. Selecione **Fixar na caixa de entrada do Agent**
Apenas administradores da organização (membros da função `system_admins`) podem fixar e desafixar sistemas de design.
Defina o acesso dos membros como **Somente leitura** para que os membros possam ver e usar o sistema de design fixado sem poder editá-lo.
O sistema de design agora aparece como uma pílula selecionável abaixo da caixa de entrada do Agent para todos os membros da sua organização. Para removê-lo, abra o mesmo menu e selecione **Desafixar da caixa de entrada do Agent**.
## Mantenha seu sistema de design atualizado
Os sistemas de design evoluem. Mantenha o seu atualizado:
* **Atualize os arquivos de tokens** quando o seu sistema de design lançar novos valores de cores, espaçamento ou tipografia
* **Atualize as skills** quando os componentes receberem novas props, variantes ou padrões de uso
* **Atualize as instruções** quando os princípios ou padrões de design mudarem
* **Atualize as versões dos pacotes** quando novas versões do seu sistema de design forem lançadas
* **Teste regularmente** criando um novo app e verificando se o Agent produz a saída correta
## Sistemas de Design vs. Templates Personalizados
Os sistemas de design e os [templates personalizados](/teams/custom-templates) servem a propósitos diferentes:
| | Sistemas de Design | Templates Personalizados |
| ----------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| **Propósito** | Alterar a stack de frontend para a da sua equipe e utilizar seus componentes de código | Substituir completamente a stack padrão (por exemplo, Rust, Go, C++) |
| **Stack** | Funciona dentro do monorepo pnpm padrão do Replit | Define uma estrutura de projeto completamente personalizada |
| **O que fornece** | Regras de biblioteca de componentes, tokens de design, ativos de marca, skills visuais | Boilerplate completo: runtime, configuração de build, dependências, layout do projeto |
| **Aplica-se a** | Aplicativos web, aplicativos móveis, slides, artefatos — qualquer coisa que o Agent construa | Apenas apps criados a partir desse template específico |
Use um sistema de design quando quiser que o Agent siga seus padrões visuais na experiência normal do Replit. Use um template personalizado quando precisar de uma stack fundamentalmente diferente.
## Recursos relacionados
* [Templates Personalizados](/teams/custom-templates) - Configure stacks completamente personalizadas para sua organização
* [Agent Skills](/references/agent/skills) - Como as skills funcionam e como criá-las
* [Usar uma skill](/build/use-agent-skills) - Guia prático para usar skills
* [replit.md](/references/project-setup/replit-dot-md) - Personalize o comportamento do Agent com contexto do projeto
* [Visão geral Enterprise](/category/teams) - Saiba mais sobre os recursos Enterprise