Case study: a media site in one evening

An abandoned Lovable prototype became a bilingual publication with 20 stories, custom illustrations and a €5 domain. Mockups on the /design canvas, images in ChatGPT, the domain on GoDaddy — all by the agent. A step-by-step breakdown with real screenshots.

Author: Michael Kokin ·

On August 22 Anthropic's newsletter landed in my inbox: Claude Code got a `/design` command — the agent draws mockups right in the chat, on an editable canvas. I happened to have the perfect test subject: a prototype of a publication about famous entrepreneurs' failures, built in Lovable and abandoned a year and a half ago.

An evening later it was a bilingual publication with 20 stories, a custom illustration for each one and its own domain: failforward.cc. Below is the whole journey step by step, with real screenshots of the process. Spoiler: I never opened a code editor.

!The Anthropic newsletter about /design that started it all

What we started with

The abandoned prototype looked like a typical generator landing page: grey gradient, "Success is built on failure" centered. Inside — six stories of a couple of generic paragraphs each, illustrated with random stock photos: the Elon Musk story, for one, featured a husky in the snow. Last commit — March 2025.

!The old landing: template masthead and hero

!The story grid: Musk gets a husky, Jobs a stock crowd, and Gates' image never loaded

!Second row: Zuckerberg's image is broken, Huffington gets a random stock photo

!The Musk story in full: a husky in the snow and four paragraphs of generalities

I put the brief in a single line: "make it look like a real publication." That's when it got interesting.

Step 1. References: four of mine and one of its own

My entire "brief" was four references: NYT's Wirecutter (grid and typography), The New Yorker (the mix of feature formats and the illustrations), Pitchfork (illustrations) and VICE's Party Legends interview series (illustration style).

From there Claude opened a browser and dissected each layout live rather than from memory: it walked through the pages and noted the techniques — several feature formats instead of a monotonous grid, a "The Latest" column, hairline rules, serif typography. Along the way it also dropped by The Atlantic on its own — nobody asked it to.

!The agent studying Wirecutter's layout in the browser

Step 2. The /design canvas: mockups, sticky notes, iterations

`/design` opens a canvas with artboards next to the chat — like Figma, but inside Claude Code. The agent put up the homepage, the article page and the mobile version, plus yellow sticky notes alongside: the design decisions made so far and a checklist of "what we do after approval." The canvas is editable: you can drag any element and edit text by hand, and export any artboard to PDF.

!The canvas with mockups and sticky notes

!Sticky notes on the canvas: design decisions and the rollout plan

From there it was regular work with a designer — except the designer never sleeps. I gave feedback in plain text, sometimes with screenshots: "the article texts are too short," "Musk looks out of proportion in the illustration," "show me options for making it feel more modern." Each round, the agent pinned new variants to the canvas — fourteen artboards piled up, from "Homepage A" to the final one marked "D ⭐ per feedback."

!A feedback round in Claude Code: chat on the left, canvas on the right

Step 3. Choosing the illustration style

To "make it more modern" the agent didn't argue — it generated the same scene (Musk between a burning roadster and a crashed rocket) in eight different styles and pinned the board to the canvas: from duotone engraving and line art to photo collage and an acid zine. Each with a caption explaining what the style is good at and where to use it.

!Discussing styles in the chat: collages are in — but only with real photo cut-outs

!The board with illustration style options

We settled on a "colour = era" system: stories before the 1960s — pure sepia, the 1960s–80s — ink with a red accent, modern ones — a flat poster with a single brand colour of the company. Starbucks green, Ford blue, Twitter blue. The brand-colour idea was my only art-director contribution to the whole project.

!Three eras — three illustration styles

Step 4. The images: the agent works inside my ChatGPT

The illustrations were generated in ChatGPT — but I wasn't the one writing the prompts. Claude connected to my Chrome (in the browser it shows up as a green bar saying "Claude started debugging this browser"), opened a chat and wrote detailed prompts demanding real likeness — "a recognizable Zuckerberg: pale round face, short curly hair, grey t-shirt" — waited out the generation, grabbed the files at the right resolution and filed them into the project.

!The agent writing a prompt in ChatGPT in my browser

When the style switched to brand colours, the agent regenerated the old sepia versions of the modern stories with the same scheme:

!Before and after: sepia vs. brand colours

Image quality became its own lesson: the first exports were squeezed down to 1050 pixels and fell apart on retina screens. After my "everything's pixelated" it re-downloaded all twenty-one homepage illustrations at native 1536×1024 with no resampling. A rule we both remember now: never resample.

Step 5. Build and SEO

The agent ported the approved mockup into code: Vite + React + Tailwind. It set up the repository itself — connected Lovable to my GitHub and moved the project over. Along the way it:

!The FailForward favicon in a browser tab

Step 6. The domain: found, checked, bought

To "find me a decent domain and let's buy it" the agent went through options, checked availability via whois and proposed failforward.cc at €5. Then it opened GoDaddy in my browser itself, added the domain to the cart, switched off every upsell, changed "5 years" to "1 year" — and along the way cleaned out a €1,332 premium domain I had once dropped into that cart myself and forgotten. The only thing I did was type in the card's CVV: the agent doesn't touch payment credentials, by design.

After payment the DNS connected to the hosting automatically, and the agent added the site to Google Search Console, Yandex Webmaster and Bing — verification and sitemap in each.

The result

failforward.cc — a living bilingual publication: a cover story, quote features, categories, article pages with pull quotes and sources.

!Card rows on the new homepage

!The Steve Jobs quote feature

!Mobile: the homepage, stories in both languages and a category

The numbers:

My own contribution — the concept, four references and the feedback rounds: under an hour in total. While the agent worked I had time to go get a beer and walk the dog — progress shows up on my phone, and edits can be dictated by voice: "the Jobs feature needs a redo, the year repeats — fix it."

What's changed in working with Claude Code

Three things that feel like a new level:

1. The `/design` canvas. The agent used to show mockups as images in the chat — glance and forget. Now they're editable artboards with notes: you see the iterations, you can move things by hand, you can export to PDF.
2. The agent in your browser. ChatGPT, GoDaddy, search consoles — Claude works inside my logged-in services while I just watch and confirm the sensitive steps.
3. Long autonomous sessions. "Re-download all the illustrations at native resolution" is an hour of monotonous work: scrolling the chat, collecting links, downloading in batches, filing things away. The agent grinds through it in the background while I write feedback on the next question.

When I showed the site to colleagues in an AI community, the first reaction was predictable: "that can't be true — you must have done it all yourself." Fair. Which is exactly why this case study comes with screenshots of every step.

The human's role in this process is client and art director: phrase the brief as "make it a real publication," pick the references, say "Musk looks off," come up with the brand-colour idea. Everything else — including this case study and the screenshots in it — was done by the agent.