# Create from Image

***

{% embed url="<https://vimeo.com/1113137586?share=copy#t=0>" %}

### What is Create from Image?

This feature is for anyone with a visual starting point—just upload an **image** of your design (screenshot or exported PNG/JPG). Whether it’s a mockup, an inspiration image, or an **image export** from your design tool (e.g., Figma or Photoshop), Maker converts the image into structured sections and components that match your brand styles.

The result is:

* A page that visually matches your reference image
* Editable blocks and sections, not just a static copy
* A faster way to turn designs into live pages

***

### How to Use Create from Image

{% stepper %}
{% step %}
In Maker, click the **plus button** to add a new page.
{% endstep %}

{% step %}
Select **Upload image**.
{% endstep %}

{% step %}
Choose an image from your computer (e.g., a screenshot or image export from a design tool like Figma).
{% endstep %}

{% step %}
Add a **prompt** to describe the page or guide the layout.
{% endstep %}

{% step %}
Click **Start**.
{% endstep %}

{% step %}
Maker will analyze the image, generate a page plan, and build the layout.
{% endstep %}

{% step %}
Select **Continue and implement the plan** to create the editable page.
{% endstep %}
{% endstepper %}

***

### Exploring the Results

Once the process is complete, you’ll have a new page that reflects the structure and aesthetic of your uploaded image.

* **Layout Accuracy**: Maker rebuilds the page with sections and spacing similar to your mockup.
* **Editable Content**: Every block is customizable — text, images, and styles can be adjusted.
* **Brand Alignment**: The design adapts to your brand tokens and styling.
* **Fast Publishing**: Review in full screen and publish immediately if it looks good.

***

### Example

For instance, uploading a Figma frame and adding a short prompt will generate a page that mirrors the original design. Within seconds, you’ll see a custom layout that looks and feels like your mockup — but is fully editable inside Maker.

***

### Tips

* For best results, upload a screenshot or image export of the specific section/module—rather than the entire layout—and keep adding images of additional sections/modules to build the full page.
* Use high-quality images with clear layouts for more accurate reconstruction.
* Add descriptive prompts (e.g., “landing page for summer campaign”) to guide the structure.
* After generation, fine-tune sections using Maker’s editor to ensure everything matches your intent.

***

### Next Steps

👉 Try **Create from Image** with your latest mockup or screenshot.\
👉 Explore Prompt to Page for building new pages from scratch with just a prompt.


---

# 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/create-from-image.md?ask=<question>
```

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.