Skip to main content

Build layouts with the Agent

Give the Agent a prompt, screenshot, website link, or Figma design, then refine the result on the canvas.

Building with the Agent is the recommended way to create a layout in Instant. Give it a prompt or visual reference, watch it build on the canvas, then use the Design panel or follow-up prompts to refine the result.

Before you start

Instant AI needs a plan that includes AI credits — Starter and up. Each build or edit uses credits from your monthly balance, and larger requests use more. Check your balance in Overview → Plan.

Set up your brand kit before an important build. The Agent uses it by default to guide the colors, typography, spacing, components, and overall direction of what it creates.

Choose how to start

You can give the Agent context in four ways:

  • Write a prompt — Describe the layout type, goal, sections, tone, and anything that must be included.

  • Attach a screenshot — Use Attach image in the Agent composer to add a visual reference.

  • Use a website link — Choose Use website link, or include a URL in your prompt, to show the Agent a page that should inspire the result.

  • Import from Figma — Choose Import From Figma and use the Instant Figma plugin's AI mode to prepare your selected frame for the Agent.

You can combine a reference with written instructions. For example, attach a screenshot and ask the Agent to follow its structure while using your brand kit.

Build a new layout

  1. Open the Instant builder for your project.

  2. Open the Agent from the left sidebar.

  3. Give the Agent a prompt, screenshot, website link, or Figma design.

  4. Add instructions about the layout's purpose and any required content.

  5. Send the message and watch the Agent build on the canvas.

  6. Review the result on desktop and mobile.

The Agent can build pages, product templates, collections, blog posts, sections, navigation, footers, and cart drawers, depending on your plan.

Work on the canvas

The Agent builds directly on the visual canvas. Use the canvas to review and refine the result:

  1. Click part of the layout on the canvas to select it.

  2. Edit supported text directly, use Ask AI for a focused request, or adjust the selection in the Design panel.

  3. Switch between desktop and mobile to review responsive behavior.

  4. Use Preview to test the layout as a shopper.

  5. Ask the Agent for broader changes, such as replacing a section, changing the layout direction, or applying your brand kit.

The Design panel for a layout built with the Agent is different from the one used with Build from scratch.

Build or replace individual sections

You do not have to generate a full layout at once. Select part of the layout on the canvas and use Ask AI, or open the Agent, to request a focused change:

  • "Add an FAQ with five questions about shipping."

  • "Replace this section with an image and a short list of benefits."

  • "Make this section more compact on mobile."

Newsletter signups the Agent builds use Shopify's own customer form, so no extra app is needed: shoppers who subscribe appear under Customers in your Shopify admin with email marketing consent and the newsletter tag, and the form confirms inline without reloading the page.

Use your brand kit

The brand kit has a direct effect on the Agent's output. When Apply brand kit is on, the Agent uses your saved brand guidance for builds and edits. Turn it off only when you intentionally want the current chat to ignore that guidance.

If the first result does not feel like your store, check that the right brand kit is applied before repeating brand instructions in each prompt. You can also ask the Agent to Apply my brand kit to an existing layout.

Credits and limits

Building pages with AI uses AI credits, and Studio image work draws from the same balance. When credits run low, upgrade your plan or buy more credits from Overview → Plan.

Publishing limits (pages, reusable sections, templates) are separate from credits and depend on your plan. See Compare plans if you hit a ceiling.

Publish when ready

Layouts built with the Agent stay in the builder until you publish them to Shopify. Review the layout, links, Shopify content, and mobile experience first. Then publish from the builder.

Related articles

Did this answer your question?