# Design Mocks {% embed url="" %} *** ### K**ey 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](http://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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.maker.co/features/design-mocks.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.