How I used Claude to design a $10,000 website in an afternoon.

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:

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.

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.

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.

The principles behind prompting Claude for design work

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.