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

# Apply a design system to an existing app

> Rebuild an existing artifact under your design system — from the canvas or the composer — and what the time and credits warning means.

A design system isn't just for new work: you can apply it to an existing artifact, and Agent rebuilds the artifact's look under the system.

<Steps>
  <Step title="Choose the target">
    Open the project with the artifact you want to restyle.
  </Step>

  <Step title="Apply the system">
    From the canvas: select the target frame, open its **⋯** menu, and choose **Apply design system**. Or ask for it in the composer (an Agent rebuild): *"apply my design system to this 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="The frame's three-dot menu with Apply design system highlighted" width="400" height="180" data-path="images/design/replit-design/ds-apply-menu.png" />
    </Frame>
  </Step>

  <Step title="Confirm the rebuild">
    Applying a system to existing work is a real rebuild — you'll see a **time and credits warning** before it starts. That's expected: Agent is re-generating the artifact's styling layer, not swapping a stylesheet.
  </Step>

  <Step title="Review the result">
    Check key screens against the system. Continued edits keep using the system — if you spot drift back to old styling, flag it in the chat.
  </Step>
</Steps>