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

# From Design to App

> Learn how to turn Design Canvas mockups into real, working applications — from exploration to published app.

## What is this workflow?

The Design Canvas is for exploration — your app lives in the Preview. This page walks you through the full journey of turning a visual direction into a published application.

Key concepts:

* **Canvas = scratchpad**: Frames are static HTML mockups for exploring ideas
* **Artifacts = publishable outputs**: Converting a frame creates a buildable, publishable artifact
* **One-way flow**: There's no live link between the Canvas and your app — you convert when ready
* **Any artifact type**: Convert to web apps, mobile apps, slide decks, data visualizations, and more

## How to go from design to app

### Start on the Canvas

Open the [Design Canvas](/replitai/canvas) and explore your idea. Ask Agent for mockups, generate variants, and compare directions side by side.

**Example prompts:**

* "Design a landing page for my SaaS product"
* "Show me five variations of a dashboard layout"
* "Sketch the full sign-up flow for my app"

### Refine with the Visual Editor

Use the [Visual Editor](/replitai/visual-editor) to make hands-on adjustments directly on your frames — change text, tweak colors, adjust spacing — without going through an Agent loop or consuming AI credits.

### Pick a direction

Compare your frames and choose the one that best matches your vision. You don't need to get it perfect — you can continue refining after conversion.

### Convert to an artifact

<Steps>
  <Step title="Select your frame">
    Click on the frame you want to turn into a real application.
  </Step>

  <Step title="Ask Agent to convert">
    Tell Agent what you want — for example, "Convert this into a web app" or "Turn this into a mobile app."
  </Step>

  <Step title="Agent builds your app">
    Agent creates a real artifact with the design you chose. It adds the backend, database, and infrastructure your app needs.
  </Step>

  <Step title="Refine in Preview">
    Switch to the Preview to see your running application. Continue using the Visual Editor or chat with Agent to add features, fix details, and polish.
  </Step>

  <Step title="Publish">
    When your app is ready, publish it. Replit handles hosting and infrastructure so your app works reliably for your audience.
  </Step>
</Steps>

### What carries over

When you convert a frame to an artifact, Agent uses the design as a reference to build a real application. The visual layout, colors, typography, and structure carry over. Agent adds the functionality — data storage, user accounts, API connections — on top.

<Note>
  Conversion is a one-way step. The Canvas frame and the resulting artifact are separate — changes to one don't affect the other.
</Note>

## What you can build

* **Static site → full-stack app**: Start with a landing page design, then convert and add a contact form, payments, or a blog backend
* **Dashboard mockup → live data visualization**: Design the layout on the Canvas, convert to an artifact, and connect real data sources
* **Mobile app concept → native app**: Explore the UI on the Canvas, then convert to a mobile artifact with real navigation and data
* **Pitch deck + product**: Design your app and a slide deck in the same project — both start as Canvas explorations, both become real artifacts

## Frequently asked questions

<Accordion title="Do I have to start on the Canvas?">
  No. You can skip the Canvas entirely and build directly in App mode. The Canvas is for exploration — use it when you want to try visual directions before committing.
</Accordion>

<Accordion title="What's the difference between a frame and an artifact?">
  A frame is a static HTML mockup on the Canvas — it has no server, database, or backend. An artifact is a real, buildable application that you can publish. Converting a frame creates an artifact.
</Accordion>

<Accordion title="Can I convert the same frame into multiple artifact types?">
  Yes. You can convert a single frame into a web app, then separately convert it into a mobile app or slide deck. Each conversion creates a new artifact.
</Accordion>

<Accordion title="Can I go back to the Canvas after converting?">
  The Canvas is always available. You can continue designing new frames, but the converted artifact and the original frame are independent — editing one doesn't change the other.
</Accordion>

<Accordion title="Will my design look exactly the same after conversion?">
  Agent uses your design as a reference, so the layout, colors, and structure carry over closely. Some details may shift as Agent adds real functionality — you can refine in the Preview after conversion.
</Accordion>