How a 6x CSS Design Award winner builds websites with Claude

Bapusaheb PatilHead of AI & Design Engineering

View SyllabusFri, Jun 5 · 7 PM IST

How a 6x CSS Design Award winner builds websites with Claude

Your AI-built site looks AI-built. Build the operating model that fixes it.

Overview

Every AI-built indie site shares the same five tells: a gradient hero, three feature cards, 'we leverage' copy, default Inter, and a footer that gave up. You can spot one in two seconds. Worse, your own site is starting to look like one — you've redone the hero three times in Tailwind and it still reads 'vibe-coded default.'

More Claude credits don't fix this. A new UI kit doesn't fix this. Watching another Tailwind tutorial doesn't fix this. The reason your AI-built site looks AI-built isn't the tool — it's that the entire output is averaged-out, voiceless, and missing the corners. AI gives you a default. Five layers deep, you're still on default.

Bapusaheb Patil shipped two sites with Claude that won six CSS Design Awards between them — by delegating every layer of execution except one: taste. The method is a 6-phase pipeline (brand → voice → IA → illustration → motion → microcopy), each with a clear delegate-to-Claude / keep-human split. The load-bearing artifact is a one-page voice doc. With it, Claude can write in your voice for the next six months. Without it, every other phase produces averaged-out output.

This is a 3.5-hour live build sprint, not a Claude tutorial. Bapusaheb walks pete-site and petu-site line by line, then you write your own voice doc, palette, section order, illustration constraint system, and corners list — live, against your own product. You leave with a runnable kit and a voice doc you can paste into Claude on Monday.

Agenda

The Slop Crisis & the Operating Model

The five tells of an AI-built site: gradient hero, three feature cards, 'we leverage' copy, default Inter, footer that gave up
Why more Claude credits, new UI kits, and Tailwind tutorials don't fix it
The delegate-to-Claude / keep-human split: the one principle behind the whole pipeline
Introducing the 6-phase pipeline as an operating model, not a checklist

Live Case Study — pete-site + petu-site

Line-by-line walkthrough of pete-site (8-bit deadpan) and petu-site (pastel kawaii)
How the same pipeline produced two radically different brand outputs
The donate-modal teardown: what AI wrote vs. what taste rewrote
Spotting the corners: where each site refused the default

Brand, Voice & Information Architecture (Phases 1–3)

Phase 1 — Brand identity: palette tokens and type pairings as a constraint system
Phase 2 — Building the voice doc live, against your own product
Three sample lines drafted in your voice: a headline, a modal body, a CTA
Phase 3 — Section order: why most AI-built sites pick the wrong six sections

Illustration, Motion & the Corners (Phases 4–6)

Phase 4 — Illustration constraint systems that keep AI output coherent
Phase 5 — Motion vocabulary: when motion earns its place and when it's slop
Phase 6 — The corners worksheet: close buttons, empty states, footer disclaimers
Anti-slop principles, Q&A, and the 7-day implementation challenge

Who this is for

For the people who ship, not the ones who pontificate.

Indie founders and solopreneurs who design and ship their own product sites — and want a system, not another template, the next time they redesign.

Builders shipping with AI assistance who can immediately tell their own site looks AI-built, and are tired of redoing the hero a fourth time.

Operators, PMs, and consultants who write code with Claude and need their landing pages, internal tools, and microsites to read like craft, not output.

Designers and design-curious developers who want the operating model behind sites that win CSS Design Awards with AI as the execution layer.

What's included

Voice Doc Template

A one-page artifact that lets Claude write in your brand voice for the next six months. Filled out live during the session.

Anti-Slop Prompt Library

Six phase-by-phase prompts (palette, voice, IA, illustration, motion, microcopy), formatted as a Claude project you can clone.

6-Phase Pipeline Cheatsheet

A single printable page showing the delegate / keep-human split for every phase, plus the universal rejection prompt.

Three Sample Lines in Your Voice

A headline, a modal body, and a CTA — drafted live, in your own voice, against your own product.

Constraint System Specs

Templates for palette tokens, type pairings, illustration constraint systems, and motion vocabulary.

The Corners Worksheet

A guided checklist for close-button labels, empty states, footer disclaimers — the layer where AI-built sites give themselves away.

Session Recording

Delivered within 24 hours of the live session. Yours to keep, ungated.

7-Day Implementation Challenge

Day-by-day deliverables in a private Discord thread, with feedback from Bapusaheb and Harshit.

Prerequisites & tools

Prerequisites

A product or project you'd seriously consider redesigning
Comfort pasting prompts into Claude and tweaking the output

Tools required

Claude.ai account (Pro recommended)
Code editor of your choice
Zoom client

Recommended (optional)

Review the voice-doc template (emailed 48h before the session)
Skim one landing page you've shipped that you'd consider redoing

One thing to know

DO NOT pre-write your voice doc — we write it together, live, during the session. Bring your product, not your draft.

Logistics

Format

Live online build sprint (single track, demo + co-build)

Duration

3 hours 30 minutes (two 10-minute breaks)

Pre-work

48-hour brief + voice-doc template (~30 minutes review). Do NOT pre-write the voice doc.

Recording

Yes — delivered within 24 hours of the live session, ungated, yours to keep.

Tools

Claude.ai (Pro recommended), code editor of your choice, Zoom client

Instructor

Bapusaheb Patil

Head of AI & Design Engineering

FAQ

Is this stack-agnostic? I don't use Tailwind or Next.js.

Yes. The 6-phase pipeline is a thinking model, not a stack. Every artifact you leave with — voice doc, palette tokens, section order, illustration constraint system, corners worksheet — is technology-neutral. Paste it into Claude with any framework and the output adapts. Bapusaheb's two case-study sites themselves use different stacks.

I'm not a designer. Will this be over my head?

No. The whole premise is that you delegate design execution to Claude — what you bring is taste, not technique. If you've ever looked at your own site and known something was off without being able to name it, you have enough taste to do this workshop. The pipeline gives you the vocabulary to act on what you already see.

Is this live or pre-recorded? How does the format actually work?

Fully live. 3.5 hours, single track, with two 10-minute breaks. Bapusaheb walks pete-site and petu-site line by line, then you co-build against your own product — writing your voice doc, palette, section order, and corners list in real time. It's a build sprint, not a lecture series.

What should I bring to the session?

A product or project you'd seriously consider redesigning, your code editor, and a Claude.ai account (Pro recommended). You'll also receive a voice-doc template and a short brief 48 hours before — skim it, but DO NOT pre-write the voice doc. We write it together, live. Bring your product, not your draft.

I already use Claude every day. What will I actually learn?

Using Claude isn't the same as having an operating model for Claude. Most builders prompt phase-by-phase with no anchoring artifact, which is why their output averages out five layers deep. You'll leave with a one-page voice doc Claude can write in for six months, a phase-by-phase prompt library, and the delegate-to-Claude / keep-human split for every layer of the design. The tool is the same; the leverage changes.

I don't have a product yet — should I wait for a future cohort?

You'll get more out of the live co-build if you bring a real product, even a half-finished one. If you're pre-product, you can still attend and apply the pipeline to a side project, a personal site, or a pitch page — but expect to spend more time afterward retrofitting the artifacts to whatever you build next. The recording and 7-day challenge will still be useful.

Will the recording be available? For how long?

Yes. The full session recording is delivered within 24 hours of the live workshop in your account. You can rewatch any phase while you're implementing the 7-day challenge.

What's the refund policy?

Full refund up to 24 hours before the session starts — no questions, no forms. After that, your seat is held, the recording is yours, and you will not be eligible for refund.

Refund policy: Refund requests are eligible only if submitted at least 24 hours before the start time of the first workshop of the cohort. For example, if the first workshop begins on the 24th at 7:00 PM, refund requests must be submitted by the 23rd at 7:00 PM. No refunds will be issued after this deadline.

…

Fri, Jun 5 · 7 PM IST