The Complete Arturo Workflow: From AI Mockup to Production Assets in One Pass

What changed in the beta

The biggest shift is moving from "one image in, one ZIP out" to a real project workflow. You now create a project, upload multiple pages, and work inside a canvas where every detected image, logo, icon, and section gets its own box. You decide what gets generated. You decide what gets cleaned. And you decide when to export.

The four new pillars are:

• Multi-page Projects — upload a full site worth of mockups and keep everything in one place.
• Selective Generation — run only the jobs you need: Images, Fonts, Colors, or Copy.
• Smart Cleanup — one "Clean Up" bundle that removes text, UI, and overlays, plus optional transparent background and upscaling.
• Auto-named Assets — every extracted file gets a descriptive, SEO-friendly filename instead of image-7.png.

From flattened mockup to structured project

A flattened mockup — whether it comes from ChatGPT, Midjourney, Figma, or a client PDF — is a single image that looks like a website but contains no real assets. Text is baked in. Photos sit under gradients. Logos share the same background as the hero. Nothing is selectable.

Arturo's first step is detection. Upload your mockup and the AI draws boxes around every candidate asset: hero images, product shots, logos, icons, background textures, and even UI elements. You can add boxes by hand, delete false positives, and draw over existing boxes to isolate something nested inside another region.

Once the canvas matches your intent, you move to generation. This is where the new selective workflow matters.

Select the selective Generate menu

Instead of running everything at once, the Generate menu lets you check only the jobs you want. If you already generated Fonts and Colors in a previous pass, those boxes stay unchecked. You can run just Images. Or just Copy. Or everything at once when you're starting fresh.

The four jobs are:

• Images — crop, clean, upscale, and remove backgrounds for every selected box.
• Fonts — identify the closest Google Font match for text found in the mockup.
• Colors — extract the palette as hex codes, roles, and a Tailwind theme block.
• Copy — pull headlines, body text, and CTAs into editable text fields.

After you click Generate, Arturo jumps to the Assets tab so you can watch the batch run and review results as they finish.

Smart Cleanup: one toggle, multiple fixes

The old workflow forced you to choose between Remove Text, Remove UI, and Remove Overlay for every image. In practice, most designers want the same thing: a clean photo they can actually use. So we bundled those three operations into one Clean Up option.

Clean Up erases headlines, captions, buttons, badges, and gradients, then reconstructs the background behind them. It also upscales the result so the extracted image is production resolution. You can add Transparent Background separately for logos, icons, or product shots that need to float on a new layout.

The AI also applies guardrails automatically. Hero images and backgrounds get Clean Up by default. Logos and icons get Transparent Background. You can still override any box, but the starting point is now much closer to what you actually want.

Auto-named assets save more time than you'd expect

One of the most tedious parts of extracting a full mockup is renaming the output. After thirty minutes of cleanup you end up with a folder full ofimage-1.png, image-2.png, andimage-3.png. You have to open each one to remember what it is, then rename it for your asset library or CMS.

Arturo now names every extracted file based on what's in the image. A hero photo becomes mountain-lake-hero.png. A product shot becomeshiking-boot-product.png. A logo becomeswillow-pine-logo.png.

This is more than a convenience. Search engines read image filenames as ranking signals. A folder of descriptive names is instantly more useful in Figma, Webflow, WordPress, and your own file system. And when you deliver the ZIP to a client, it looks like work that was done by hand.

Review, re-run, and export

Every generated asset shows a RAW and CLEAN version side by side. If the cleanup missed a watermark or left a ghost of a button, you can re-run the job on that single box without regenerating the whole project.

When you're happy with the set, export everything as a ZIP. The package includes cleaned images, fonts, colors, and copy — all from the same mockup, all named consistently, all ready to drop into your build.

Who this workflow is for

Freelancers building client sites

You get a Figma link or an AI-generated mockup and need real assets fast. Selective generation keeps your quota focused on what's actually useful, and auto-named files make handoff cleaner.

Agencies running multiple projects

Multi-page Projects keep each site organized. Generate only what each page needs, then export a single consolidated package.

Designers working with AI mockups

ChatGPT, Midjourney, and other AI tools output beautiful flattened images. Arturo turns those images back into editable, reusable pieces.

Marketers repurposing landing pages

A campaign page is being retired but the imagery still has value. Extract the assets cleanly before the page comes down.

Try the full workflow free

Arturo is in beta. The first 15 assets are free — no signup required — so you can upload a mockup and see the complete workflow before committing to a plan. If you run out, you'll see an upgrade prompt that lets you pick the plan that fits your volume.

We'd love your feedback. There's a floating feedback icon in the bottom-right corner of the app. Use it to report bugs, suggest features, or tell us what the workflow is missing.