Create from Image

Turn any screenshot, mockup, or design frame into a live, editable page. Upload an image, and Maker instantly analyzes it to generate a matching layout you can customize

---

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

1

In Maker, click the plus button to add a new page.

2

Select Upload image.

3

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

4

Add a prompt to describe the page or guide the layout.

5

Click Start.

6

Maker will analyze the image, generate a page plan, and build the layout.

7

Select Continue and implement the plan to create the editable page.

---

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.