Saltar para o conteúdo principal

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.

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

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 <nome-do-seu-sistema-de-design> pelo nome do seu sistema de design: 
Create a `<nome-do-seu-sistema-de-design>` 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: 
# 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
Menu de ações do app mostrando a opção 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. Diálogo de convite mostrando o acesso dos membros definido como Somente leitura 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. Sistema de design aparecendo como uma pílula selecionável na 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 servem a propósitos diferentes:
Sistemas de DesignTemplates Personalizados
PropósitoAlterar a stack de frontend para a da sua equipe e utilizar seus componentes de códigoSubstituir completamente a stack padrão (por exemplo, Rust, Go, C++)
StackFunciona dentro do monorepo pnpm padrão do ReplitDefine uma estrutura de projeto completamente personalizada
O que forneceRegras de biblioteca de componentes, tokens de design, ativos de marca, skills visuaisBoilerplate completo: runtime, configuração de build, dependências, layout do projeto
Aplica-se aAplicativos web, aplicativos móveis, slides, artefatos — qualquer coisa que o Agent construaApenas 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