I'm a senior frontend developer. I've been writing CSS long enough to have opinions about it. So this isn't a "I can't code, AI saved me" post — it's the opposite. This is what happens when someone who could hand-build the whole thing decides not to touch a single line.
Yesterday I shipped elserip.ai — a landing page for our AIGC anime studio elser.ai — in one day. Claude Design did the visuals. Claude Code wrote every line of frontend. Vercel hosted it. I wrote zero UI code. Only thing I touched was the data wiring to our backend.
Here's what actually happened, including the part where I picked the wrong direction and had to throw it out.
Why hand it over at all
The bottleneck on a landing page like this was never CSS for me — it was direction. What's the vibe? What does the typography say about the product? Which of the seventeen plausible layouts is right? Designers solve this. Engineers staring at a blank page.tsx don't.
So the experiment was: let Claude Design own direction and visual decisions, let Claude Code own implementation, and see what's left for me to do.
The opening prompt
Goal: replace our old onboarding site with something that funnels users into the main app. The old one had too many mocks and didn't convert. I had one asset I knew worked — a masonry gallery of community fan-art — and I wanted that to anchor the page.
My first prompt to Claude Design:
"I'm rebuilding elserip.ai as an onboarding site for elser.ai. The old version has too many mocks and doesn't drive clicks. Keep the IP fan-art masonry gallery — that's the hook. Redesign everything else around it."
I gave it the main app URL, the current site URL, and the gallery URL. That's it.
Picking wrong (and noticing in time)
First pass gave me three low-fi wireframes. I picked Editorial Magazine — "VOL.01 / ISSUE Δ" masthead, hand-drawn headline, masonry behind it as a backdrop. Looked sharp.
It survived exactly one round.
Pushed to hi-fi, the magazine vibe stopped feeling editorial and started feeling like literally a magazine — section numbers, report-style dividers, masthead heavier than the product. Audience is Gen Z anime fans, not New Yorker subscribers.
So I scrapped it. This is the part nobody mentions in AI workflow posts: AI will polish a wrong direction into oblivion if you let it. As an engineer, you'd notice your code is over-engineered. You need the same instinct for design.
Round 2: five new directions
I asked for five distinctly different vibes, same section structure. Claude Design produced them on one canvas: Neon Arcade, Sticker Board, Trading Card, Cinematic Black, Y2K Neo-Tokyo.
I picked Y2K Neo-Tokyo. Terminal type, glitched katakana, masonry of anime IPs scrolling behind a giant FAN-ART.exe headline.
Then many rounds of detail polish. Macro direction is cheap to change, expensive to commit to. Spend rounds on direction first, polish second.
The handoff
Claude Design has a handoff button. Click it, it bundles the design as a zip Claude Code can ingest directly — full TSX components, asset references, the works. I dropped it into Claude Code: "build this as a Next.js app on App Router, I need SSR for SEO."
Claude Code unzipped it, read the design's component files, reused the TSX where it could, scaffolded a Next.js app around it. I didn't write a single line of frontend code.
This is what makes the workflow different from screenshot-to-code tools. It's not eyeballing pixels — it's ingesting actual component source. The output is structurally aligned with the design, not a visual approximation of it.
The only code I touched was data wiring — masonry to our gallery API, CTAs to the right routes on the main app. As a frontend engineer, this was the first project in years where I didn't think about layout, spacing, or breakpoint behavior. I just thought about endpoints.
Why Next.js: this site exists for SEO juice into the main domain. Next.js + Vercel is the lowest-friction path to good Core Web Vitals and SSR for crawlers. I stated that constraint upfront and Claude Code picked sensible defaults — server components for static sections, client only where the masonry animates.
Deploy: git push, connect Vercel, point the domain. ~15 minutes including DNS.
What it cost
I burned through one Claude Pro account and one Max ×5 account before I was done.
The expensive phase wasn't Claude Code building the app. It was Claude Design — specifically the hi-fi iteration loops. Every "tighten this 10%" rerenders the canvas, and on a layout this dense those rerenders aren't cheap.
If I were doing this again:
- Lock the wireframe before going hi-fi. Don't let it polish a wrong direction.
- Batch micro-feedback. "Tighter spacing AND bolder type AND adjust masonry" in one shot, not three.
- Use Claude Code for tiny tweaks. A one-line CSS change is faster as a prompt to Code than another Design rerender.
I had more sections planned — pricing comparison, creator spotlight, "how it works" — but hit my weekly token ceiling. Honest tradeoff.
What ended up live
- One day, blank to deployed at elserip.ai
- Next.js on Vercel, masonry SSR'd for SEO
- Zero UI code written by me — only data wiring
- One scrapped direction, one I'd defend in court
The takeaway
The interesting result isn't "AI can build a landing page" — that's been true for a while. It's that for an engineer who can already do the work, this stack changes what you spend your time on. I didn't write CSS. I made design judgment calls. I wrote business logic. That ratio used to be inverted.
Catches:
- Pixel polish in Design is where tokens evaporate.
- AI will happily commit to a wrong direction. You have to kill it.
- Plan scope around your token budget, not your ambition.
Site's live. Next experiment: same flow on internal tools, where the design bar is "doesn't make engineers angry." Should be cheaper.
Top comments (0)