Do zero: peça na home page
Comece aqui quando o sistema já existe na sua cabeça (ou nas diretrizes da sua marca), mas ainda não em nenhum design.1
Peça no campo de criação
Na home page da Replit, descreva o design system que você quer no campo de prompt — por exemplo: “Crie um design system para a Velocity, uma marca premium de aluguel de supercarros.”
2
Responda ao questionário
O Agent faz um pequeno conjunto de perguntas sobre o seu sistema — personalidade da marca, cores, preferências de tipografia. Você também pode apontá-lo para uma fonte: uma URL do Figma, um site, código, imagens de referência, ativos de marca ou um DESIGN.md já existente.
A partir de um mockup: extraia o design system
Comece aqui quando você já tem um design que adora — um frame gerado, um template solto — e quer que tudo o mais combine com ele.1
Selecione o mockup
No canvas, clique no mockup cujo visual você quer capturar.
2
Extraia pelo menu de três pontos
Abra o menu ⋯ (três pontos) do frame e escolha Extract design system. O Agent destila os tokens, cores e tipografia do mockup em um guia de estilo vivo — e o aplica em todo o design.
Revise e salve
De qualquer forma, revise o que foi gerado: um guia de estilo vivo com suas cores (por função — primária, destaque, neutra…), escala tipográfica e tokens (armazenados emtokens.json, que alimentam as variáveis CSS). Depois, selecione Save design system para mantê-lo no seu workspace.
