{[0, 1, 2, 3].map(swatch => )}

{["78%", "56%", "88%"].map((width, index) => )}

{[0, 1, 2, 3].map(component => )}

{[0, 1, 2].map(node => )}

{[0, 1, 2].map(dot => )}

; Um sistema de design dá ao Replit uma direção visual reutilizável. Ele pode capturar tokens de cor, tipografia, espaçamento, componentes de exemplo, logotipos e ativos de marca para que novos designs permaneçam consistentes. Na caixa de prompt, selecione o menu **mais (+)** e depois **Usar um sistema de design** quando um sistema salvo deve guiar o que você cria. ## Quando um sistema de design ajuda * **Criar de forma consistente:** Mantenha cores, tipografia, espaçamento e componentes alinhados em novos trabalhos. * **Dar à equipe uma direção compartilhada:** Use um sistema salvo como referência visual para vários Projects. * **Reestilizar um trabalho existente:** Aplique um sistema quando um artefato precisar seguir uma linguagem visual diferente. Nomeie o sistema salvo e o resultado de que você precisa. Adicione outro contexto relevante, como um briefing, um frame do Figma, uma captura de tela ou requisitos de conteúdo, quando essas fontes definirem o que o trabalho deve alcançar. Por exemplo: “Use o sistema de design Acme salvo para criar uma tela de onboarding para dispositivos móveis. Mantenha a escala tipográfica e os estilos de botão existentes, e mostre duas direções de layout.” Um sistema de design molda o trabalho visual. Uma [Skill](/pt/chat/agent-skills) fornece instruções reutilizáveis ou uma abordagem para uma tarefa. Sistema de design APEX X1 mostrando sua paleta de cores, escala tipográfica, espaçamento e componentes de exemplo

Sistema de design APEX X1 mostrando sua paleta de cores, escala tipográfica, espaçamento e componentes de exemplo

## Siga os fluxos de trabalho de sistemas de design no Design Os guias de Design explicam o que um sistema contém, como criar ou extrair um, e como aplicar um a um trabalho existente.

Sistemas de design, explicados

Saiba o que um sistema de design contém e quando ele ajuda.

Saiba mais →

Criar um sistema de design

Crie um a partir de um prompt ou extraia-o de um design existente.

Abrir o guia de Design →

Para trabalhos existentes, siga [Aplicar um sistema de design](/pt/design/apply-design-system). Com o contexto do projeto e a direção visual definidos, explore como [criar ativos](/pt/chat/create-assets), como imagens, áudio, vídeo e SVGs.