Claude can build a website in minutes. But the website still looks like Claude made it.
I run Supafast, a design agency. We've built over 200 websites for funded startups, and I turned what we know into one free Claude skill. Here's what Claude built without it, what it built with it, and how to install it.
I build useful things like this with AI every week.
Subscribe on YouTubeWhy vibe-coded websites look AI-made
I gave Claude a prompt for a landing page and let it build. The result was very basic. It's what AI makes when you don't give it much context or styling to work with.
That makes sense. A lot of founders don't know exactly what good design looks like, so they can't tell Claude. But anyone can look at that page and say, "Okay, this is definitely made by AI."
What the Claude design skill does
The skill gives Claude a designer's brain before it builds anything:
- A process. Strategy first, then design direction, then the build, then responsive passes.
- 40 AI anti-patterns to avoid. Things like neon gradients, everything in a card, "Supercharge your workflow" copy, fake logos and testimonials, and "Learn more" buttons.
- A 100-point scorecard. Claude grades its own page on clarity and positioning, hierarchy, differentiation, trust and proof, the conversion path, the visual system, and responsiveness. Under 90, it's not done.
How to install the design skill in Claude Code
- Get the free skill. You'll get a zip file.
- Unzip it.
- Drag the folder into your Claude session.
- Tell Claude to use it. I said: "Based on this skill.md, improve the website to a second iteration."
That's it. No other instructions.
Before and after: the same website with the skill
I only asked for a second iteration. I also told it not to change the copy much, because copy wasn't the point of this test. Normally the skill rewrites the copy too.
Here's what changed:
- It explains the product with illustrations instead of a product screenshot nobody looks at.
- It changed the colours. Blue wasn't working for this product, so it picked a better fit.
- The problem section is clear now. You can see the problems and how the product fixes each one.
- It understands hierarchy. When the page moves on to outcomes, the colour changes so that part stands out.
- It added a clear call to action.
- The footer is 100 times better than the first version.
All of that came from a single skill. I never told it anything about the product itself.
Make it better with your own brand
The skill works on its own, but it gets better with more context. Tell Claude your branding, your positioning, the colours you want and the style you like, and it'll build all of that in.
Who it's for
It's great for a V1. If you're shipping an MVP and need to find out whether anyone wants it, this skill gets you a page that doesn't look AI-made, fast.
The skill is free. Get it here.
