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

# Aplique um design system a um app existente

> Reconstrua um artefato existente sob seu design system — a partir do canvas ou do composer — e o que significa o aviso de tempo e créditos.

Um design system não serve só para trabalho novo: você pode aplicá-lo a um artefato existente, e o Agent reconstrói a aparência do artefato sob o sistema.

<Steps>
  <Step title="Escolha o alvo">
    Abra o projeto com o artefato que você quer reestilizar.
  </Step>

  <Step title="Aplique o sistema">
    No canvas: selecione o frame alvo, abra o menu **⋯** dele e escolha **Aplicar design system**. Ou peça isso no composer (uma reconstrução do Agent): *"aplique meu design system a este app."*

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ds-apply-menu.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=ff9f762ff7fcfbb4f43500d0f662d71d" alt="O menu de três pontos do frame com Aplicar design system destacado" width="400" height="180" data-path="images/design/replit-design/ds-apply-menu.png" />
    </Frame>
  </Step>

  <Step title="Confirme a reconstrução">
    Aplicar um sistema a um trabalho existente é uma reconstrução de verdade — você verá um **aviso de tempo e créditos** antes de começar. Isso é esperado: o Agent está regenerando a camada de estilo do artefato, não trocando uma folha de estilos.
  </Step>

  <Step title="Revise o resultado">
    Verifique as telas principais em relação ao sistema. Edições contínuas continuam usando o sistema — se você notar um desvio de volta ao estilo antigo, sinalize isso no chat.
  </Step>
</Steps>