Use the canvas

Every project opens on a canvas you can pan and zoom. Your agent writes pages onto it, and you compare them, change them, and pick the one to build.

Pages

Every page on the canvas is HTML that your agent wrote. Each one has a desktop or mobile frame, and you edit it directly on the canvas.

Compare directions

Ask your agent for several layouts of one screen. They land next to each other as they are written. To look closer, open a page's menu and pick Compare. You can see two pages side by side, overlaid, or as a difference where everything that matches turns black.

Edit by hand

  • Click any element to change its text, colors, size, spacing, radius, and shadow.
  • Drag to reorder, drag the handles to resize, and double-click text to type into it.
  • Moves snap to nearby edges and centers. Hold Alt to see distances.
  • Open a page in the pages panel to see its layers. You can hide, nest, duplicate, and delete them there.
  • The frame, square, circle, and text tools add new elements. Cmd+Z undoes any change.
  • The pen tool draws on any page and edits shapes on vector pages.
  • A page's history lists earlier versions you can go back to.

Send one element to your agent

Pick an element and copy its link. Paste the link into your agent with the change you want. The agent edits that element and leaves the rest of the page alone.

If you changed a page by hand, your agent can ask what changed since it last wrote the page, so it does not overwrite your edits.

Build a prototype

Link pages together by hand or ask your agent to do it. Press Play to click through them, or present them full screen.

Collect feedback

Press C and click any element to pin a comment. Send a review link so other people can pin comments too. They sign in to Wirely to open it. Ask your agent to fix the comments on a project, and it reads and resolves each one.

Use your own images

Upload images to the project's Assets folder, or ask your agent to upload one from your disk.

Check the build against the design

After your agent builds a page in your codebase, it can capture that page from your running app. Wirely sends back what differs from the design: missing or reworded copy, fonts, sizes, colors, and the areas whose pixels differ most. The agent fixes them and checks again. Security explains what the capture script does on your machine.

Export

Copy a page as an image, HTML, or SVG. Download it as a PNG at 2x or 3x, or as a PDF.