Skip to main content
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 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

Um sistema de design salvo com cores, tipografia, 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. Com o contexto do projeto e a direção visual definidos, explore como criar ativos, como imagens, áudio, vídeo e SVGs.