Make Claude design your site like a pro designer
Three skills and two tools that give Claude Code a real designer's taste: smooth motion, a design language, art direction, your Figma designs, and testing in the browser.
① Why does your site look "AI-made"?
Because without direction Claude falls back to the same template: purple gradients, look-alike cards and plain fonts. These skills give it taste: real designers' rules, real reference sites, and an eye that reviews the work before it reaches you.
② Emil Kowalski's skill: motion and polish
From Emil Kowalski, a designer and engineer who worked at Vercel and Linear. It teaches Claude when an element should move and how fast: motion under 300 milliseconds, custom easing curves instead of the defaults, and it reviews your code and shows the mistake before and after.
npx -y skills add emilkowalski/skill --skill emil-design-eng --agent claude-code
③ Impeccable: the designers' language
From pbakaus. One command, /impeccable, with 24 sub-commands: design critique, polish before shipping, type, color, spacing and motion. It also has 62 rules that catch "AI design" tells before they ship.
npx impeccable install
Then in Claude Code type /impeccable init once. The key commands: critique to review, polish to refine, typeset for type, layout for spacing.
Skill page ↗④ Taste Skill: the strongest
Built on a study of 247 real sites. It reads your brief, gives you three art directions to choose from, builds the page with real licensed images, then opens the site in a real browser at three sizes, screenshots it, and fixes the biggest problems itself.
/plugin marketplace add Leonxlnx/taste-skill /plugin install taste-skill@taste-skill
You need Node 22+ and Chrome or Edge on your computer. No key needed.
Skill page ↗⑤ The two tools
Figma: your design becomes code
The official plugin from Figma: Claude reads your Figma design and builds it as code. Run this in the terminal:
claude plugin install figma@claude-plugins-official
Playwright: tests your site like a customer
From Microsoft: Claude opens your site in a browser, clicks, fills in forms and checks everything works. It needs Node.js:
claude mcp add playwright -- npx @playwright/mcp@latest
⑥ Try it now: ready prompts
After installing, copy any prompt and adapt it to your project:
📚 We have more than 20 other free guides
More free guides? Tap here ↗Want to learn more?
In Nadr Community we teach Claude, content creation and ads step by step, across 5 tracks we keep improving (lessons are in Arabic):