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

# Build your design

> Turn the winning frame into real software: build it as a new app, or apply its look to an app you already have.

A design frame is never just a picture, it's the spec for real software. When a frame is right, hand it to Agent: select the frame, choose **Build…** in its action bar, and pick a path:

* Build the design as a new app in the same project
* Apply the design's look to an app you already have
* Roll back safely either way, Agent makes a checkpoint before it starts

## Two paths from frame to app

The **Build…** menu on a selected Design frame covers both:

<Frame caption="The Build… menu: create a new artifact, or apply the design to an existing one.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=494228a2a81e9f943376d78e77b96417" alt="The Build menu open on a selected Design frame (APEX X1 Exact Replica) with the header 'Build or apply your designs', showing 'Build this design', which creates a new artifact, and 'Apply to an existing creation' listing the project's APEX X1 Design System and its Scroll Hero website" width="2000" height="1153" data-path="images/replitai/canvas-build-menu.png" />
</Frame>

### Build this design

Picking **Build this design** starts a new artifact from the frame. Agent builds the layout, styling, and assets into a live, running app that lands in your project's artifact list.

### Apply to an existing app

The menu also lists every artifact in the project. Picking one applies the design to it: Agent rewrites the artifact's code to match the frame, and the Design frame stays on the canvas for reference. This is how you restyle an app you've already built without starting over.

## The flow

<Steps>
  <Step title="Pick the design to build">
    Settle on the frame you want to ship. Compare candidates side by side on the canvas first — building closes this round of exploration, though Agent makes a checkpoint so you can always roll back.
  </Step>

  <Step title="Hand it to Agent">
    Select the frame, choose **Build…** in its action bar, and pick your path: a new artifact or an existing one. Agent builds the design, layout, styling, and assets, and reports its progress in the chat.
  </Step>

  <Step title="Review the build">
    Agent reports what it changed and makes a checkpoint. Open the result to see the design live, and keep chatting to adjust anything that didn't translate.
  </Step>
</Steps>

<Note>
  Building a new app from a Design frame requires Core or Pro; applying a design and every other Replit Design capability work on every plan. See [Billing](/billing/ai-billing) for plan details.
</Note>

## After you build: make it real

Building the frame gives you a running app with your design in place. The mockup only pretended to work; now Agent can add the real thing. Ask for what you need in chat:

* **Let people sign in**: add user accounts with [Replit Auth](/features/auth-and-identity/authentication), users sign in with their Replit accounts with zero setup, or bring your own provider.
* **Save real data**: store and retrieve orders, messages, and preferences with the built-in [Database](/features/data-and-storage/sql-database).
* **Charge for it**: add payments and subscriptions with [Monetization](/features/monetization/overview) integrations.
* **Connect other services**: Agent activates [integrations](/features/integrations/overview) automatically based on your prompts, from email to Slack to Google services.

## Ship it and grow it

When the app works, put it in front of people and keep improving it:

* **Publish**: ship it from the [Publishing tool](/features/publishing/overview), then see [After you publish](/features/publishing/after-you-publish) for updating the live app.
* **Get a real address**: buy or connect a [custom domain](/features/publishing/custom-domains).
* **Get found**: run the [SEO Agent](/features/publishing/seo-agent) for a technical audit with one-click fixes.
* **Hear from your visitors**: add the [feedback widget](/features/publishing/feedback-widget) so people can report issues and ideas you can send straight to Agent.
* **Keep it healthy**: track status, performance, and uptime with [published app monitoring](/features/publishing/monitoring-a-deployment).

## Next steps

* [Design vs. Build](/design/design-vs-build): when to start in each entry point.
* [Create a design system](/design/create-a-design-system): extract the design you shipped so the next one starts on brand.