Design Mocks

Generate multiple design mocks for a project in seconds. Describe what you want or paste a URL, and Maker will create ready-to-review mockups you can preview, remix, and turn into a full project.

---

Key Benefits

• Skip the blank canvas. Instead of starting from scratch, you get 4 fully designed page concepts to react to and build from. It's a faster way to find your direction.

• Explore more ideas, faster. Generating multiple design directions in under a minute means you can compare layouts, styles, and content approaches side by side without waiting on a design cycle.

• Desktop and mobile from the start. Every mock comes with both views, so you're evaluating responsiveness from day one instead of retrofitting it later.

• Low cost to experiment. At roughly 51 credits per batch, you can generate several rounds of concepts without burning through your monthly credits.

• Non-destructive workflow. Your original mocks are always preserved. Every change creates a new variant, so you never lose a direction you liked.

• Straight to a working project. When a mock clicks, one button turns it into a full React project inside Maker. No handoff, no rebuilding from a static file.

---

Steps

Step 1: Open Design Mocks

In the chat input, click the Tools button and select Design Mocks. You'll see a "Design mocks" tag appear in the input area to confirm the tool is active.

Step 2: Describe Your Page

Type a description of the page you want to create, or paste in a page URL for Maker to reference. The more detail you give, the more tailored the results. For example: I want to create a new homepage for my site, and I want to be have a modern aesthetic. Here's the URL- www.mysite.com

Step 3: Review Your Mocks

Maker generates 4 distinct design variants at once, each with both desktop and mobile views. Generation typically completes in under a minute and uses approximately 51 credits.

Each mock is a full-page visual you can scroll through to see the complete layout, sections, and content.

---

What You Can Do with a Mock

Once your mocks are generated, select any variant to see your options:

• Select: Click on a mock to select it. Once selected, you can ask Maker to make changes in the chat (for example, change the hero section to be more minimal). Any changes you request will create a new variant rather than editing the original.

• Preview: Opens a full-screen preview of the mock so you can see exactly how it looks on desktop and mobile.

• Remix: Generates a new set of variations inspired by the selected mock.

• Create Project: Converts the selected mock into a full React project you can continue building in Maker. This is how you go from concept to a working project.

---

Generating More Options

If the first set of mocks doesn't hit the mark, click the Generate more button at the bottom of the mock panel. This creates 4 additional design variants, each one distinct from the previous set. You can keep generating until you find a direction you like.

---

Good to Know

• Mocks are immutable. When you ask Maker to make changes to a selected mock, it creates a new variant instead of overwriting the original. Your earlier designs are always preserved.

• Desktop and mobile included. Every mock is generated with both desktop and mobile layouts, so you can evaluate responsiveness right away.

• From mock to project. When you're happy with a direction, "Create project" turns the design into a real, editable React project inside Maker. From there you can refine, add functionality, and publish.

• Credit usage. A full set of 4 mocks costs approximately 51 credits.