> ## 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.

# Crie um design system

> Crie um design system do zero com um prompt, ou extraia um a partir de um mockup que você já gosta — e depois salve-o no seu workspace.

Existem duas maneiras de criar um design system, dependendo de onde sua marca vive hoje.

## 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.

<Steps>
  <Step title="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."*

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-home-create.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=31621bdbda00ed2b8bf8f7a80f066ece" alt="O campo de prompt da home page com um prompt de criação de design system" width="800" height="240" data-path="images/design/replit-design/ds-home-create.png" />
    </Frame>
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Selecione o mockup">
    No canvas, clique no mockup cujo visual você quer capturar.
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-extract-menu.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=6681244a6f222276732baa817d0497f5" alt="Detalhe da barra de ações de um frame selecionado com o menu de mais opções aberto, mostrando Apply design system e Extract design system" width="958" height="320" data-path="images/design/replit-design/ds-extract-menu.png" />
    </Frame>
  </Step>
</Steps>

## 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 em `tokens.json`, que alimentam as variáveis CSS). Depois, selecione **Save design system** para mantê-lo no seu workspace.

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-review.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=947fb5e6043b6740ed93fd437bd9223d" alt="O APEX X1 Design System renderizado como um guia de estilo vivo em modo foco, com uma barra lateral de cores, fontes, layout e componentes, a paleta principal, a escala de tipos e componentes de exemplo" width="2000" height="1254" data-path="images/design/replit-design/ds-review.png" />
</Frame>

## Próximos passos

* [Aplicar a um app existente](/pt/design/apply-design-system)
* [O que há dentro de um design system](/pt/design/design-md)