A good agency in San Francisco or Bangalore will charge you $8,000 to $15,000 for a homepage redesign. That includes discovery, wireframes, visual design, copywriting, and handoff. You are paying for time, expertise, and the process of extracting clarity from your own head.
Claude can do most of that. Not because it replaces creative judgment, but because the bottleneck was never the execution. It was always the brief.
Last month I used Claude to completely redesign the Masonry homepage. New brand positioning, new visual direction, WebGL animations, interactive cards, an aspirational hero. The kind of work that would have taken a design team two to three weeks.
It took an afternoon. Here is exactly what I did.
The context
Masonry had been positioned as a general "AI creative workspace." The product had evolved — we were increasingly doing production-grade AI video work for brands, and our agency work was the strongest signal of what the product could actually do.
The homepage did not reflect that. It felt like a features page, not a proof of capability. We needed to reposition as an AI-native video production studio, move the product features under a dedicated section, and let the work speak first.
I had a clear direction in my head. What I needed was someone to execute it at high quality, fast, with production-ready code. That is exactly what Claude is good at.
The prompt
Most people prompt AI tools the way they order fast food. "Give me a homepage design." You get generic. What you need to do is prompt like you are briefing a senior designer — give them context, constraints, specific directions, and room to ask questions.
Here is the exact prompt I used:
I want to create a new brand positioning for Masonry as an AI Native Video Production Studio positioning which should showcase our work. All our work is visible on https://masonry.so/ai-video-agency and then our whole product should be moved under AI Playground in the header.
In case you are not able to access the webpage — in the masonry-ai-frontend repo you will be able to get the agency page design.
Basically I want you to re-think the homepage of our website with new brand positioning. Showcase model capabilities. Have nice interactive cards and have a very aspirational hero section. Use webGL or three.js to make great animations that resonate with our product and revised branding. Ask me if you have any questions.
That is it. 120 words. But look at what is packed into it.
Breaking down what made it work
1. A clear positioning statement, not a vague direction
"AI Native Video Production Studio" is not a description of features. It is a brand position. It tells Claude exactly what kind of company we are claiming to be, and from that, every design decision — tone, imagery, hierarchy, copy — has an anchor.
If I had said "make the homepage feel more premium," Claude would have guessed. By giving it a positioning statement, I gave it a lens to evaluate every decision it made.
2. A concrete reference point for existing work
I pointed Claude to the agency page URL and to the codebase. This is important for two reasons. First, Claude can read the page and understand the visual language, content structure, and existing work before it starts designing. Second, if the URL is inaccessible, I gave a fallback: the frontend repo.
Most people skip the references. They assume Claude knows what they want. It does not. Give it something to look at.
3. Specific component-level directives
Three things I named explicitly:
- 01Showcase model capabilities — this tells Claude that the design should be functional evidence, not just marketing copy. Cards should demonstrate, not describe.
- 02Interactive cards — a design pattern, not an aesthetic preference. Claude knows what interactive cards are and can execute them in production-ready HTML, CSS, and JS.
- 03Aspirational hero with WebGL or Three.js — I gave Claude a technology direction for the most important section of the page. This saved a full back-and-forth cycle about what kind of animation to use.
4. Permission to ask questions
The last sentence — "Ask me if you have any questions" — is not filler. It is a signal. It tells Claude that you want collaboration, not a single output it has to guess at. Claude will surface assumptions, ask about constraints, and flag ambiguities rather than just plowing forward with defaults.
The rule I follow: If the prompt would make sense to a junior designer who had never heard of your company, it is not specific enough. Rewrite it until a smart person with no context could execute it well.
What Claude produced
Claude asked three clarifying questions before writing a line of code. What brand colors should carry over from the existing site? Should the product section ("AI Playground") link to the same app, or is this a navigation restructure? Is the Three.js animation meant to be an abstract representation of the video production process, or something more literal?
Those questions saved at least two revision cycles. After I answered them, Claude produced:
- 01A full homepage in production-ready HTML, CSS, and JavaScript — no framework dependencies, deployable as a static file.
- 02A Three.js particle animation in the hero that visualizes frames compositing — directly resonant with the product concept.
- 03Interactive model capability cards with hover states, animated data visualizations, and modal-style deep dives for each model.
- 04A restructured navigation with the product moved under "AI Playground" exactly as briefed.
- 05Copy for every section — positioned for the new brand, not just placeholder text.
The first output needed two revision passes. One to tighten the hero copy and increase the visual weight of the work showcase section. One to adjust the animation performance on mobile. Total time from prompt to final code: about four hours, including the back-and-forth.
See it for yourself
Below is the actual website Claude produced. Click to open it in full view.
Claude-generated prototype · Placeholder videos and content · Requires update before production use
What this actually costs a traditional agency
Here is a rough breakdown of the work Claude did, priced at market rates for a mid-tier US design agency:
- —Brand positioning workshop and brief: $1,500
- —Wireframes and information architecture: $1,200
- —Visual design (2 concepts, 1 revision): $3,500
- —Copywriting: $1,200
- —Front-end development with animations: $3,000
- —Total: ~$10,400
My cost: one Claude Pro subscription and an afternoon.
I want to be precise about what I am claiming. Claude does not replace design judgment. I still had to know that we needed to reposition, know what direction to go, and know when the output was right. That clarity is what I contributed. Claude executed it. That is the correct division of labor.
A second example: a cinematic launch page
The Masonry redesign was a SaaS homepage — structured, conversion-focused, on-brand. To prove the method is not tied to one aesthetic, here is a second brief I ran through Claude: a cinematic, motion-heavy launch page for a fictional luxury space-travel brand. No SaaS conventions, no dashboard energy. It should feel like a film.
This brief is longer than the Masonry one — and that is the point. A cinematic page with custom WebGL, seven distinct sections, and its own component system needs more specification than a conventional homepage. But the structure is identical: positioning first, then build constraints, then the components, then a section-by-section walkthrough, then motion and copy direction — and permission to ask at the end. Detail scales with ambition; the structure stays the same. Here is the full prompt, exactly as it was given:
Context & positioning. I want to build a landing page for a fictional luxury space-travel brand called Aeon Aerospace. Positioning: premium, cinematic, aspirational — the Rolex of space tourism. The whole page should feel like a film trailer, not a SaaS site. Mood: dark, atmospheric, calm and confident.
Build constraints. Build it as a single, self-contained HTML file. React 18, Tailwind, Framer Motion and Three.js all loaded via CDN with Babel standalone — no build step, no npm — so it opens in a browser instantly. Headings in an italic serif (Instrument Serif), body in a clean sans (Barlow). Pure black background throughout. One technical rule: wrap every Babel script block in an IIFE and expose components on the window object, so top-level declarations don't collide across script tags.
The signature surface — "liquid glass". Every card, pill, nav and button uses a frosted-glass treatment: near-transparent fill, backdrop-blur, no hard border — instead a gradient-masked inner highlight and a soft inset glow. Two variants: a light blur for small elements and a heavy blur for primary surfaces. Everything is pill-shaped or has large rounded corners, and display type gets tight negative letter-spacing.
Reusable pieces to build first. A FadingVideo component — autoplay, muted, looping background video that fades in once on load (no fade-out at the loop point) and plays at 0.75x speed for a calm slow-motion feel. A BlurText component — headlines that reveal word-by-word with a blur-to-sharp animation when they scroll into view. A Planet component — a real 3D sphere in Three.js with a procedural noise surface shader and a glowing atmosphere shell, slowly rotating, with a prop to control its apparent size. A ShaderBackground component — a full-screen WebGL fragment shader with three variants: an aurora, a soft gradient flow, and a cosmic nebula.
Seven full-screen sections, top to bottom — and every section gets its OWN distinct background, never reuse one.
1. Hero — looping video background. A floating glass navbar (logo, centre nav pill, white "Claim a Spot" button). Centred: a "New" badge, a large BlurText headline, a sub-paragraph, two CTAs, two glass stat cards, and a partner logo row.
2. Capabilities — a different looping video. Kicker "// Capabilities", a huge italic heading, three glass cards with icons and tag pills, revealing on scroll.
3. Voyages — looping video with a top-and-bottom black fade. Three mission cards (name, status dot, stats grid, reserve button) with a subtle 3D mouse-tilt on hover.
4. Worlds — the cosmic shader plus a full-bleed 3D planet filling the whole section. Tabs (Mars / Europa / Titan) crossfade the planet's colour palette and a horizontal info bar — tagline and name left, description centre, stat grid right.
5. Innovation — the aurora shader. Three cards with large italic stat numbers.
6. Plan Launch — looping video. Three pricing tiers, the middle one featured ("Most Popular", stronger glass, slightly scaled up), each with check-list features.
7. Footer — the gradient shader. A big closing headline, a glass email-capture input with a button, logo, and a link row.
Motion. Entrances everywhere use the same recipe: blur-in, plus fade, plus a small upward slide — roughly 0.8s ease-out, staggered per item, fired when the element enters the viewport. Keep it calm and cinematic — slow and deliberate — never flashy or bouncy.
Copy. Write all the copy yourself in a confident, aspirational aerospace-luxury voice. Section kickers as short "// label" comments. Display headlines in italic serif, broken across two lines.
Ask me anything before you start.
It looks like a lot, but every line is doing a job. The positioning statement ("the Rolex of space tourism") sets the lens. The build constraints ("one self-contained file, no build step") fix the deliverable. Naming the components — FadingVideo, BlurText, Planet, ShaderBackground — tells Claude exactly what to build before the section list describes where each one goes. The "never reuse a background" rule and the motion philosophy ("calm and cinematic, not flashy") close off the two places an AI most often drifts. Every sentence removed a guess — and a guess removed is a revision cycle saved.
What it produced: a seven-section page with looping video and live WebGL shader backgrounds, a procedurally-shaded 3D planet you can switch between worlds, blur-reveal headlines, scroll-triggered cards, and a frosted "liquid glass" component system — all in a single HTML file with no build step. Same prompting structure as the SaaS brief, completely different result.
See the cinematic page
This is the actual output. Click to open it full-screen.
Claude-generated cinematic demo · Fictional brand · Best viewed full-screen on desktop
The principles behind prompting Claude for design work
Start with positioning, not aesthetics
Tell Claude what the company is claiming to be before you describe what the site should look like. Everything else follows from that.
Give references, not vibes
URLs, repo names, screenshots. Claude can read them. Vague adjectives like "premium" or "modern" are noise without anchors.
Name the components explicitly
Interactive cards, sticky nav, hero animation, modal. Use the design vocabulary. Claude knows what these are and will execute them correctly.
Specify the technology for animations
WebGL, Three.js, GSAP, CSS-only. If you leave this open, Claude will make a choice that may not be right for your performance or stack constraints.
Invite questions before output
The single sentence "Ask me if you have any questions" is the highest-leverage addition to any design prompt.
Iterate on the right layer
If the positioning is wrong, fix the brief. If the layout is wrong, describe the specific section. Vague "make it better" prompts produce vague results.
Try it yourself
The prompt I shared above is a template. Replace the product name, the positioning statement, the reference URLs, and the specific component requests. Keep the structure: context first, position second, specific directives third, permission to ask at the end.
You do not need design skills to get excellent output from Claude. You need clarity about what you are building and who it is for. If you have that, Claude will do the rest.
The websites that will define the next generation of AI companies are being built this way right now. The cost barrier to great design is not money anymore. It is clarity of thinking.
Want to see the Masonry redesign in context?
The live site is at masonry.so. If you want to talk through applying this approach to your own product, reach out on LinkedIn.
Connect on LinkedIn