The AI web design setup

The full setup from our reel "Claude just killed web designers". Five installs, then you just describe the site you want. Checked 2026-10-24. All of these are free and open source, apart from Figma (you need a Figma account; Figma says MCP works best with a full or Dev seat).

You need: Claude Code (the terminal or the desktop app's Code tab) and Node.js (Node 22+ for Taste Skill; 18+ is enough for Playwright).

1. Emil Kowalski's design skills

What it is: skills from Emil Kowalski (the design engineer behind the Sonner and Vaul UI libraries). The main one is emil-design-eng: design-engineering rules, mostly about animation and polish (when to animate, which easing, how fast). Install:

npx skills@latest add emilkowalski/skills

Link: https://github.com/emilkowalski/skills

2. Impeccable

What it is: a design skill by Paul Bakaus: "the design language that makes your AI harness better at design". It gives Claude design vocabulary (typography, colour, spacing, motion, UX writing), commands like /audit and /polish, and rules that catch the usual "AI-made" look. Install (Claude Code):

/plugin marketplace add pbakaus/impeccable

then open /plugin and install Impeccable. Or, for any tool: npx impeccable install. Links: https://impeccable.style · https://github.com/pbakaus/impeccable

3. Taste Skill

What it is: "the anti-slop frontend framework for AI agents". Skill files built from a study of 247 curated real websites, so Claude stops shipping the generic AI landing page (same purple gradient, same three cards). Install:

npx skills add Leonxlnx/taste-skill

(Only the main skill: add --skill "design-taste-frontend".) Links: https://tasteskill.dev · https://github.com/Leonxlnx/taste-skill

4. Figma MCP server (official, by Figma)

What it is: connects Claude to your Figma files. Paste a link to a frame and Claude reads the real design (layout, styles, components) and builds from it, and it can write back to the canvas. Install (recommended, includes Figma's skills):

claude plugin install figma@claude-plugins-official

Restart Claude Code and sign in through /plugin. Or manually:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

then run /mcp, pick figma and log in. Links: https://help.figma.com/hc/en-us/articles/39888612464151 · https://www.figma.com/mcp-catalog/

5. Playwright MCP (official, by Microsoft)

What it is: lets Claude open your site in a real browser, click through it, and check that it works and looks right, so it tests its own work. Install:

claude mcp add playwright npx @playwright/mcp@latest

Links: https://github.com/microsoft/playwright-mcp · https://playwright.dev

Then use it

Start a new Claude Code session in an empty folder and describe the site, for example:

Build me a landing page for a small bakery in Austin. Warm and hand-made, not corporate. Use the Taste and Impeccable skills. Here is our Figma frame: . When it's built, open it with Playwright, check it on desktop and mobile, and fix anything that looks off.

Tips:

• Give it a real reference (a Figma frame, or two sites you like) instead of "make it modern".
• Ask it to run Impeccable's /audit and /polish at the end.
• Let Playwright check mobile width: that is where AI-built sites usually break.

Tiny AI Team · tinyaiteam.com