Design on the Canvas

Canvas holds two different kinds of frames. An Artifact frame is app-backed and live: its header is labeled with an output type such as Website or Slides, and it reflects the running artifact. A Design frame is a visual mockup labeled Design. Read that header before drawing conclusions. A Design frame is safe to explore without proving behavior; an Artifact frame can exercise current development code and data. Neither proves the published production release.

Start from the critical job rather than the home page. Design the moment the user arrives, the decision they make, the action they take, and the proof they receive. A product is not a poster; every prominent visual element should help the journey or intentionally establish trust.

Open Canvas with the Canvas button at the top-left of Preview. Generate can create a new frame from a prompt. To explore an app that already exists, select its Artifact frame and choose Reimagine: Replit creates side-by-side Design variants while leaving the source Artifact unchanged. Select the specific Design you want to improve, then type into the inline Refine input beneath it. Refine changes that selected frame in place, so duplicate the frame first when the earlier version must remain available for comparison.

Use the Canvas toolbar to draw, circle, connect, or annotate evidence directly on the board, then prompt from that visual context. Request explicit mobile, tablet, or desktop versions when the hierarchy must be evaluated at different sizes. When one Design is accepted, select it and choose Build…. Choose an existing Artifact to apply the design to that app, or choose Build this design to create a new Artifact on a Core or Pro plan. Return to the Artifact or Preview and test the workflow because building a design does not prove data, permissions, or behavior.

Write the content hierarchy in plain text first: page purpose, primary action, required evidence, secondary controls, and contextual help. Then establish visual hierarchy with type, spacing, grouping, contrast, and position. Color should reinforce meaning rather than carry meaning alone.

Use realistic copy and data lengths. A card designed around 'Acme' may break when an actual organization name is forty characters. A clean empty mockup says little about a dense operational list. Design with the hardest plausible content that still belongs in the first version.

For each important view, create frames or annotations for empty, loading, success, partial data, invalid input, unauthorized access, and failure. State design answers what the user sees while work is happening and what they can do when it cannot complete.

Include confirmation and history. If an approval changes data or triggers an external action, the interface should show the new state, actor, timestamp, and next available action. A transient toast is rarely enough evidence for consequential work.

Responsive design is not shrinking a desktop canvas. Decide what remains visible on narrow screens, what stacks, what can collapse, and what requires a dedicated detail view. Tables often become cards or a horizontally constrained region; multi-column control surfaces usually become an ordered single column.

Test at content-driven breakpoints rather than targeting only a device brand. Preserve tap target size, readable line length, focus visibility, and error association. If a capability truly requires a larger screen, say so in the product rather than letting it fail silently.

When the visual direction is approved, give Agent the frames plus a behavior contract. Describe what each control does, which data it displays, who can use it, and how it responds in each state. A screenshot can communicate appearance; it cannot fully communicate permissions or side effects.

Select the accepted Design and use Build… to choose the existing Artifact that should receive it; on Core or Pro, use Build this design only when the Design should become a separate new Artifact. Then compare the working Artifact to the accepted frame and behavior contract. Use the Visual Editor for deterministic copy and spacing changes, but send data, interaction, or hidden-complexity changes through a scoped implementation prompt with tests.