Free setup guide
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.

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