Skip to main content

​
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 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 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

1

Select your frame

Click on the frame you want to turn into a real application.
2

Ask Agent to convert

Tell Agent what you want — for example, “Convert this into a web app” or “Turn this into a mobile app.”
3

Agent builds your app

Agent creates a real artifact with the design you chose. It adds the backend, database, and infrastructure your app needs.
4

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

Publish

When your app is ready, publish it. Replit handles hosting and infrastructure so your app works reliably for your audience.

​
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.
Conversion is a one-way step. The Canvas frame and the resulting artifact are separate — changes to one don’t affect the other.

​
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

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