The tools people currently duct-tape together
Ask a designer or a WordPress freelancer how they get from a flattened mockup to a ship-ready site and the honest answer is a chain of six tools:
- Photoshop or Figma to crop each image by hand.
- Remove.bg or Photoroom for the isolated subjects.
- An AI upscaler for the small ones.
- WhatFontIs or Fontspring Matcherator for typography.
- An eyedropper extension for the palette.
- OCR (or retyping) to recover the copy.
Every one of those tools works on one thing at a time. The context-switching, waiting, exporting, and renaming is what eats the day, not the AI.
The one-pass alternative
- Upload the flattened mockup as-is. No slicing, no prep.
- Draw a box around every asset you want out — hero photo, product shots, icons, logo, feature illustrations, headlines you want extracted as copy, sections you want font-matched.
- Per box, toggle what you want done: remove background, remove text, remove overlay, transparent PNG. Upscale and sharpen are on by default.
- Submit once. Every box runs in parallel. Fonts, colors, and copy are extracted from the whole mockup alongside the images.
- Download the package: named PNGs, a Google Fonts snippet, a palette (hex + CSS variables), and the raw copy.
What "every asset" actually means
- Images. Hero photography, product renders, team headshots, testimonials, feature illustrations — each pulled clean, upscaled, and cropped to the box you drew.
- Logos and marks. Transparent PNGs with the halo and jagged edges cleaned up.
- Fonts. Identified for headline and body, mapped to a ready-to-paste Google Fonts snippet where a match exists.
- Colors. A real palette with roles (primary/accent/background/text), hex codes, and CSS variables — not just an eyedropper dump.
- Copy. Headlines, subheads, and body copy as selectable text, not screenshots.
Why "flattened" is the whole point
AI website generators (Lovable, v0, Framer AI, Galileo, Midjourney website prompts) all output a flattened image. Client PDFs and brand decks are flattened. Figma files that were exported and re-imported are effectively flattened. There is a huge and growing gap between "here's what the site should look like" and "here are the files you need to build it" — and no tool built before AI mockups existed was designed to close that gap.
Use cases we see most
- Web freelancers building from AI mockups.Client generates a mockup in an AI tool and hands it over. Getting real assets out of it used to kill the margin on the project.
- Agencies with client PDFs. Brand decks with dozens of placed images across pages become a folder of clean, upscaled PNGs.
- WordPress builds. Elementor, Divi, Bricks, Gutenberg — they all need real files. This is how you get them.
- Pitch decks and case studies. Pulling clean assets off a screenshot for a portfolio without opening Illustrator.
Common questions
How is this different from Photoshop generative fill?
Generative fill is one selection at a time, one prompt at a time, and it re-imagines the subject. Arturo runs a targeted cleanup on every box in parallel — same subject, cleaner file.
Does it work on multi-page PDFs?
Yes. Upload the PDF and every page becomes part of one long canvas you can box across. One submit for the whole deck.
What if I only want the copy, not the images?
That's fine — copy, fonts, and colors extract from the whole mockup automatically. You only draw boxes for the images you want.
Turn a mockup into an asset package
First 25 assets are free — no signup required. Drop your mockup in, box every asset, submit once.