# The Claude Web Design Killer Setup

You commented DESIGN, so here's the full 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.

Fastest way: open a terminal in your website project folder and run `bash install.sh` (in this folder). It does steps 1 to 3 for you. Needs Node 22+ and Claude Code.

## 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:

    npx skills@latest add emilkowalski/skills --skill emil-design-eng -a claude-code
    npx impeccable install --providers=claude --scope=project

They land in your skills folder:

    .claude/skills/
      emil-design-eng/        (Emil Kowalski Design)
      impeccable/             (Impeccable Design)
      design-taste-frontend/  (Taste, step 2)

Sources: github.com/emilkowalski/skills, github.com/pbakaus/impeccable

## 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:

    npx skills@latest add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend -a claude-code

If that says "No matching skills found", copy it in straight from GitHub:

    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-frontend

Source: github.com/Leonxlnx/taste-skill

## Step 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.

    claude mcp add --scope project playwright npx @playwright/mcp@latest
    claude mcp add --scope project --transport http figma https://mcp.figma.com/mcp

Then open Claude Code in the folder (`claude`), approve the project servers, and type `/mcp` to log in to Figma.

Sources: github.com/microsoft/playwright-mcp, github.com/figma/mcp-server-guide

## Step 4: The brief that gets a premium result

Don't say "build me a website". Direct it like a creative director (brief-prompt.txt):

    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 (refine-prompt.txt):

    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. "skills" needs Node 22 or newer (check with node -v). Skills not showing up? Restart Claude Code in the project folder so it reloads .claude/skills.

Rule of thumb: taste comes from the skills you install and the references you give, not from asking nicely.

## Do this in the next 10 minutes

- Install the Emil Kowalski, Impeccable Design and Taste skills
- Connect Playwright so Claude can test its own build

## Want it done for you?

Our team builds it with you. Book a call with our team: /book