Build an interactive prototype

Start with the built-in OpenDesign Landing template, make it your own, and check the real page before handing it over. You can also start a new Prototype from a brief.

Step 1 — Open the template

Open Community and choose OpenDesign Landing. Inspect the preview, then open More ways to Use and choose Remix to create an editable project from the example. Use starts from the example prompt; Remix copies the example into a project you can edit.

OpenDesign Landing in the client’s template preview.

The template is a sample design. Any versions, counts, testimonials, and links inside it are example content; check and replace them before using it for a real product.

Step 2 — Give the page a clear purpose

Open index.html from Design Files. Preview shows the page and Code shows its source. Decide what to keep from the template: its editorial type, warm paper background, collage, and section rhythm. List the product facts, calls to action, and destinations you will replace.

The editable OpenDesign Landing page with its real client toolbar.

Adapt this landing page for a fictional independent design studio. Keep the warm paper, coral accents, editorial typography, and collage. Replace the hero, services, selected work, and contact copy with clearly fictional sample content. Make navigation reach the right section; use placeholder destinations instead of real account or payment flows. Check desktop and 390px mobile. Deliver editable HTML and its referenced assets.

This is an example brief you can adapt, not a claim that the screenshots were generated from it. For a blank project, choose Prototype on Home, complete AI setup, and send your brief with references.

Step 3 — Make a small direct edit

Choose Edit, select the italic accent word in the hero, and change its Text from taste, to craft,. Choose Save. Leave editing mode and reload: the heading should still show craft,. The canvas editing guide explains typography, color, size, spacing, and undo.

Select an element to open its real text and parameter panel.

Step 4 — Check another viewport

Use the Desktop menu above the canvas to choose Mobile (390 × 844) or Tablet (820 × 1180). Check wrapping, navigation, spacing, image cropping, and touch targets. This switches the preview size; it does not automatically repair the design.

Keep the toolbar visible while checking the mobile layout.

Step 5 — Request a focused revision

Use Comment to attach a request to an element, or Mark to send a screenshot and a note. For example: “Make this accent word coral. Keep its italic font, size, and position.” Saving a comment does not run the agent. Check the selected feedback before choosing Send to chat. See feedback tools.

Step 6 — Test and hand over

Exit Edit, Comment, and Mark before testing navigation and buttons. Check each section link and destination, then use Export to choose PDF, image, ZIP, or standalone HTML as available. Preserve referenced assets and open the delivery outside the client before treating it as finished. Project files and versions and sharing cover the other handoff paths.

Export is in the file toolbar above the canvas.

If Preview is blank

Wait for the preview to load, then choose Reload Preview. Use Code to confirm that the file has content. If it remains blank, reopen it from Design Files or export the HTML and open it in a browser with its assets. Report the app version, affected file, and error if it works outside the client but fails inside.