Free setup guide

Turn Claude Into a Real Web Designer

Claude Code can design websites that look professionally made. You install five free things, paste one prompt, and describe the site you want. This page has the exact commands, in order, with the links. About ten minutes.

A dark 3D render of a designer's toolkit feeding into the Claude mark, with the Figma and Playwright logos on floating tiles and a beautiful finished webpage sliding out below, captioned CLAUDE, WEB DESIGNER with DESIGNER in coral
Get it free →

Kill the generic AI look

Out of the box, every AI page looks the same: purple gradients, centered heroes, cards in cards. These skills teach Claude real layouts, typography, spacing, and motion, so the output reads designed, not generated.

The full stack is free

All three skills are free and open source, and both connectors cost nothing. You install once and every project after that inherits the taste.

Describe it, get a real site

With the stack installed you describe the website you want in one sentence. Claude designs it, builds it, and tests it in a real browser on its own.

What's inside

  • The 3 design skills that do the heavy lifting: Emil Kowalski's design skills, Impeccable, and Taste Skill, each with its one-line install
  • The 2 connectors that close the loop: Figma MCP for design context, Playwright MCP so Claude can see and test what it built
  • The exact order to install them, so nothing conflicts
  • The starting prompt that gets you a professional page on the first try

Questions

Do I need to know how to code?

No. The skills install with one pasted command each, and from there you talk to Claude in plain English. Claude writes all the code.

Is any of this paid?

The three skills are free and open source. Figma MCP works with Figma's free tier, and Playwright MCP is free. You only need your existing Claude plan.

Does this work in Cursor or other tools?

Yes. The skills follow the open agent-skills format, so they also work in Cursor, Codex CLI, and most major AI coding tools. This guide shows the Claude Code path.

What is a skill, in plain English?

A small instruction file your AI reads before it works. These ones encode how good designers think about layout, type, spacing, and motion, so Claude applies that taste to everything it builds.

Get it free. Where should we send it?