Free setup
The Claude Web Design Killer Setup
The exact skills, the connect steps, and the prompt that gets a professional site instead of a generic one.
This is how you get Claude to build a site that looks like a design studio made it, not a template. Here’s the stack and the order.
Want our team to build it? See the done for you version
What you get
The files
- install.shSteps 1 to 3 in one command. Run it in your website project folder.
- brief-prompt.txtThe creative director brief from step 4.
- refine-prompt.txtThe refine prompt from step 5.
- 00-README.mdThis whole guide as one file.
Every file, with a download and a copy button, is in the full setup below.
Fastest way: the install script in the full setup below does steps 1 to 3 in one command. You need Node 22 or newer and Claude Code (opens in a new tab).
The setup
The stack and the order
Step 1
Install the design skills
Start with the Emil Kowalski Design and Impeccable Design skills. They teach Claude modern layout, typography, spacing and animation, so it stops making that flat AI website look. Run these from your project root:
Terminal, in your project folder npx skills@latest add emilkowalski/skills --skill emil-design-eng -a claude-code npx impeccable install --providers=claude --scope=projectThey land in your skills folder:
.claude/skills/ .claude/skills/ emil-design-eng/ (Emil Kowalski Design) impeccable/ (Impeccable Design) design-taste-frontend/ (Taste, step 2)Sources: emilkowalski/skills (opens in a new tab), pbakaus/impeccable (opens in a new tab)
Step 2
Add the Taste skill (this is the difference-maker)
The Taste skill lets Claude pull structure and feel from real, high end sites instead of inventing bland layouts. It’s the line between "looks like a template" and "looks like a studio made it". Install it alongside the others:
Terminal npx skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -a claude-codeIf that says "No matching skills found", copy it in straight from GitHub:
Terminal (fallback) git clone --depth 1 https://github.com/Leonxlnx/taste-skill /tmp/taste-skill cp -R /tmp/taste-skill/skills/taste-skill .claude/skills/design-taste-frontendStep 3
Connect the build and test tools
Hook Claude up so it can design, build and check its own work:
- Figma MCP for the design side.
- Playwright so it opens the site in a real browser, screenshots it, and fixes what's broken before you ever see it.
Terminal claude mcp add --scope project playwright npx @playwright/mcp@latest claude mcp add --scope project --transport http figma https://mcp.figma.com/mcpThen open Claude Code in the folder (
claude), approve the project servers, and type/mcpto log in to Figma.Sources: microsoft/playwright-mcp (opens in a new tab), figma/mcp-server-guide (opens in a new tab)
Continue the setup
Unlock the full guide
Get every setup step, prompt, checklist, and local download.
By unlocking, you agree to get emails from QWave Labs about new free tools, tips and offers. Unsubscribe anytime. Privacy policy
Step 4
The brief that gets a premium result
Don’t say "build me a website". Direct it like a creative director:
The creative director briefbrief-prompt.txtDownload Build a marketing site for [business]. Use the design and taste skills. Audience: [who]. Feeling: [e.g. clean, premium, trustworthy]. Reference the feel of sites like [1 or 2 you admire]. Pages: home, services, about, contact. Home sections: hero with one clear promise, 3 benefits, proof, FAQ, one CTA. Brand: colors [hex], fonts [names]. Build it, then use Playwright to screenshot desktop and mobile and fix any spacing, overflow, or alignment issues before showing me.Step 5
Refine like a designer
The first pass is 80%. Push on specifics, not vibes:
The refine promptrefine-prompt.txtDownload Tighten the hero: more whitespace, larger headline, one button not two. Make section spacing consistent at 96px. Fix the mobile nav overflow. Show me before and after screenshots.
When it looks generic
The fixes
- Still looks like AI. You skipped the Taste skill or gave no reference. Add both.
- Cramped or misaligned. Give exact spacing numbers and "make it fully responsive", then have Playwright verify on mobile.
- Images look fake. Generate real custom images instead of stock AI heroes, then have it rebuild around them.
- Fonts render wrong live. Tell it "wire the web fonts properly for production", not just in preview.
- Install errors. The skills installer needs Node 22 or newer (check with node -v). Skills not showing up? Restart Claude Code in the project folder.
Rule of thumb: taste comes from the skills you install and the references you give, not from asking nicely.
Rather skip the setup and get the finished site? Book a call with our team
Do this now
The next 10 minutes
- Install the Emil Kowalski, Impeccable Design and Taste skills.
- Connect Playwright so Claude can test its own build.
One command
The install script
Everything in steps 1 to 3, in one file. Read it before you run it, like any script from the internet.
#!/usr/bin/env bash
# The Claude Web Design Killer Setup: installs the 3 design skills and the 2 build-and-test tools
# into the current project folder. Run it from your website project's root: bash install.sh
# Needs Node 22+ (node -v). Claude Code for step 3 (https://claude.com/claude-code).
set -euo pipefail
major=$(node -p 'process.versions.node.split(".")[0]' 2>/dev/null || echo 0)
if [ "$major" -lt 22 ]; then
echo "Node 22 or newer is needed (you have $(node -v 2>/dev/null || echo none)). Install it from nodejs.org, then rerun."; exit 1
fi
mkdir -p .claude/skills
echo "1/5 Emil Kowalski design skill (emil-design-eng)"
npx -y skills@latest add emilkowalski/skills --skill emil-design-eng -a claude-code -y
echo "2/5 Impeccable"
npx -y impeccable install --providers=claude --scope=project
echo "3/5 Taste skill (design-taste-frontend)"
if ! npx -y skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -a claude-code -y 2>&1 | tee /tmp/taste-install.log | grep -q "Done"; then
echo " skills CLI could not load it, copying it straight from GitHub instead"
tmp=$(mktemp -d)
git clone -q --depth 1 https://github.com/Leonxlnx/taste-skill "$tmp/taste-skill"
rm -rf .claude/skills/design-taste-frontend
cp -R "$tmp/taste-skill/skills/taste-skill" .claude/skills/design-taste-frontend
rm -rf "$tmp"
fi
if command -v claude >/dev/null 2>&1; then
echo "4/5 Playwright MCP (Claude opens, screenshots and checks the site)"
claude mcp add --scope project playwright npx @playwright/mcp@latest || echo " (already added)"
echo "5/5 Figma MCP (design side; you log in to Figma the first time Claude uses it)"
claude mcp add --scope project --transport http figma https://mcp.figma.com/mcp || echo " (already added)"
else
echo "4-5/5 Claude Code not found. Install it, then run:"
echo " claude mcp add --scope project playwright npx @playwright/mcp@latest"
echo " claude mcp add --scope project --transport http figma https://mcp.figma.com/mcp"
fi
echo
echo "Installed skills:"; ls .claude/skills
echo "Done. Open Claude Code here (claude), type /mcp to log in to Figma, then paste the brief prompt."
Done for you
Want it done for you?
Our team builds it with you: your site, your brand, and the AI setup behind it.
Book a call with our teamWho it’s for
Founders, creators and small teams who want a site that looks like a studio made it, without spending weekends prompting and fixing.
What you get
- Your site designed and built around your brand and your offer
- Every page checked on desktop and mobile before you see it
- The same Claude design setup installed for you, so you can keep editing
- A walkthrough so you know exactly how to run it
What happens on the call
We look at what you have today and what the site needs to do, and we tell you what we'd build first. If it's a fit, we map out the build. If it's not, you still leave with the plan.