Generate a Beautiful SaaS Website in Seconds with Anthropic Fable 5

The fast version: generate a SaaS landing page concept you like, extract the visual system from that image, then tell your coding agent to clone the page using those exact assets. That is the step that makes an AI-built app stop looking vibe-coded.

Anthropic Fable 5 can get you to a landing page direction quickly. AgentBrush makes that direction usable inside your repo: logo, hero image, app icon, OG image, feature icons, characters, and mascot-style cut-outs that all match the same visual language. Claude Code or Cursor can then write the page and place those assets directly into the implementation.

Here is the workflow with a real Leadreach example.

Start with one landing page image

First, ask AgentBrush for a SaaS landing page mockup. You are not trying to ship the screenshot. You are trying to get a strong visual target that your agent can decompose into reusable assets.

Generate a polished SaaS landing page mockup for Leadreach,
a B2B lead outreach platform.

Hero headline: Find Leads. Reach More. Close Deals.
Clean white SaaS layout, blue and violet accent color, bold nav,
large centered headline, CTA buttons, trust badges, and a row of
friendly black-and-white illustrated characters along the bottom.

preset: flat_illustration
quality: medium
size: 1536x1024

This is already useful, but it is still just one flat image. The page is not editable. The characters cannot move. The logo is trapped in the screenshot. The next step is where AgentBrush becomes more than image generation.

Extract the visual assets from the page

Give the generated page back to your agent as a reference image, then ask it to extract the parts you want as separate PNG assets.

Use this landing page image as the reference.

Extract the Leadreach logo as a standalone PNG.
Then extract each bottom character as its own standalone walking character.
Use the same black-and-white line-art style.
For the characters, render each one as an opaque sticker with white fills
and a white contour on a perfectly flat solid #00ff00 background, then
remove only that green background.

Save the transparent PNGs into the project assets folder.

Under the hood, the agent makes two kinds of AgentBrush calls:

  • agentbrush_generate creates a clean standalone version of each asset from the reference image.
  • agentbrush_remove_background strips the white background locally and outputs a real transparent PNG at zero token cost.

The important detail is that each character becomes its own file. Do not extract the crowd as one strip if you want motion. Separate PNGs let the code layer position, stagger, scale, and animate them independently.

The extracted transparent PNG assets

The logo comes out as a clean lockup.

The characters become individual transparent assets. These can now be used like normal site artwork.

This is the part that changes the build. Your agent no longer has to imitate a screenshot with divs and CSS blobs. It has actual visual ingredients.

Tell your agent to clone the page using the assets

Now give Claude Code or Cursor a one-shot implementation prompt. Be explicit that it should use the generated assets, not redraw them.

Clone the Leadreach landing page as static HTML and CSS.

Use these generated assets:
- leadreach-logo.png for the nav logo
- leadreach-character-cap.png
- leadreach-character-bob.png
- leadreach-character-hoodie.png
- leadreach-character-glasses.png
- leadreach-character-curly.png
- leadreach-character-mustache.png
- leadreach-character-beanie.png

Keep the page close to the generated screenshot:
white background, centered hero, blue/violet CTA, trust badges,
and the character assets walking from side to side along the bottom.

Do this in one pass. Do not use placeholder boxes.

That prompt is selling the right behavior to the agent: use the generated visual system as production material. The page should feel like a coded version of the mockup, not a generic landing page with a pasted screenshot.

Assembled HTML example

Here is a minimal version of what the agent can produce. The exact stack can be React, Next.js, Astro, or plain HTML. The mechanic is the same: the transparent PNGs sit on the page as normal image assets, and CSS animates them. The embed below is live: hover the buttons, click the nav links, and watch the extracted characters walk across the page.

The visual polish is not coming from a giant front-end framework. It is coming from the fact that the agent has real art to place. The code can stay simple because the assets are doing the brand work.

Why this works better than a screenshot clone

A screenshot clone looks good for five seconds and then becomes a dead end. You cannot reuse the logo. You cannot animate the people. You cannot turn the hero into an OG image. You cannot build a pricing page with the same style unless you regenerate everything from scratch.

Extracted assets change the workflow:

  • the logo becomes a real nav asset
  • each character can move independently
  • the same style can be reused for empty states, feature cards, onboarding, and social images
  • the agent can keep writing code against files that already exist in the repo

That is the product value: AgentBrush makes AI-built apps stop looking vibe-coded. Your coding agent can generate the hero image, app icon, OG image, feature icons, and character assets directly into your repo, all matching the brand direction from the first image.

Where this breaks down

This is not magic design review. You still need to pick the best first image. If the generated landing page has weak composition, extracting assets from it will not fix the composition. Start with a visual target you would actually ship.

Text inside generated screenshots is useful for direction, but it is not the final source of truth. In production, keep real copy in HTML and use generated images for visual assets, not for the main page text.

Background removal also works best when the subject is clean and separated from the page. For opaque sticker characters, ask for a solid green chroma-key background instead of white; otherwise the white fill can become transparent and overlapping characters will show through each other. If you ask for a character inside a busy hero section and cut it out directly, the edge quality will be worse.

FAQ

Do I need Anthropic Fable 5 to use this workflow? No. The core workflow is: generate a visual target, extract assets with AgentBrush, then tell your coding agent to build with those assets. Anthropic Fable 5 is one way to get the first page direction quickly.

Why not just ask the coding agent to recreate the image in CSS? Because CSS is not an illustration tool. Let the agent write layout, spacing, responsiveness, and animation. Let AgentBrush provide the actual visual assets.

Can the characters really move independently? Yes, if each character is its own transparent PNG. That is why the extraction step matters. A single crowd image can slide around, but individual cut-outs can walk, stagger, overlap, and respond to viewport size.

Does background removal cost tokens? No. In AgentBrush, background removal runs locally and costs zero tokens. Generation uses tokens, but agentbrush_remove_background does not.

Try the one-shot version: connect AgentBrush to your agent, generate a SaaS page concept, extract the logo and characters, then tell Claude Code or Cursor to clone the page using those exact assets.

For the broader workflow, read Vibe Coding's Missing Piece. For setup, use the AgentBrush install guide.

HomeBlogDocsGetting startedFAQChangelogSecurityPrivacyTerms