Three skills and two tools give Claude the design rules and website references it needs to build pages that actually look good. Setup takes about ten minutes.
Claude has a taste problem. Ask it to build a website and you get something functional. The spacing is off. The typography is flat. The layout looks like every other AI output you have seen. The client can tell.
The fix is not a better prompt. The fix is better inputs before Claude writes a single line of code.
This skill package solves it in three installs.
The Problem: No Aesthetic Starting Point
Claude knows HTML and CSS. What it does not know is why some websites look worth ten thousand dollars and others look like templates from 2018.
Design taste is learned from exposure. Without reference material, Claude defaults to what it has seen most often: centered layouts, safe typefaces, generic choices. You can write "make it beautiful" in every prompt and get the same output every time.
Three skill files change that. They give Claude rules to follow and references to pull from. The output starts looking like a human made decisions, because the skills told Claude what a good decision looks like.
The Setup
Three skills, two connections. Do them once.
Step 1: Add the Emil Kowalski Design Skills
Emil Kowalski is a designer at Vercel. His design principles have been packaged as Claude skill files. The package includes two:
The Emil Kowalski Design Skill gives Claude concrete rules for typography, spacing, layout structure, and animation timing. Not suggestions. Rules with numbers: minimum spacing values, maximum line lengths, when to use weight changes versus color changes to create hierarchy.
The Impeccable Skill adds quality thresholds. It tells Claude when a detail is good enough to ship and when it needs another pass. Without it, Claude picks the first solution that works. With it, Claude picks the solution that looks right.
Drop both files into your Claude project as attached knowledge. Claude reads them automatically on every conversation. No changes to your prompt.
Step 2: Add the Taste Skill
Generic AI output looks generic because the model references generic examples.
The taste skill gives Claude a curated list of real websites to reference when making design decisions. When Claude picks a layout approach, it has specific examples to compare against. When it chooses spacing, it is measuring against pages that actually impressed people. The output stops looking generated and starts looking considered.
Add the taste skill file the same way: attached knowledge in your project.
Step 3: Connect Figma MCP and Playwright
The skills give Claude rules. The MCPs give it hands.
Figma MCP lets Claude create and edit Figma designs directly, not just write code. Claude can mock up a layout and iterate on spacing before touching HTML. The final code is built from an actual design, not from approximations.
Playwright lets Claude open a real browser, load what it built, take a screenshot, and check whether the result matches the intention. Claude sees the live page. When something looks wrong, it can fix it without you explaining what is off.
To connect both:
Copy this.
claude mcp add figma-developer-mcp -- npx figma-developer-mcp claude mcp add playwright -- npx @playwright/mcp@latest
Done. The skill is installed.
How to Use It
Open a new Claude conversation. Describe the website: the audience, the goal, one or two reference sites you like. Claude reads the design skills, checks the taste references, builds the Figma layout, generates the code, opens it in a browser, and sends you a screenshot.
If something looks wrong, say what. Claude is looking at the same page.
What You Get Back
- A working page that passes an experienced designer's eye test on the first build
- Typography and spacing decisions that are reasoned against real references, not random
- A Figma file you can hand to a client or developer without redesigning from scratch
- A screenshot of the live result before anything goes to production
- Claude's choices are defensible. The skill files give it reasons.
What This Does Not Replace
This setup does not replace a designer on a complex brand project. A fifty-page design system with custom illustration requires more than three skill files.
What it does replace: the revision rounds on a landing page, a portfolio site, or a client micro-site where you know what good looks like but cannot get Claude to produce it. For those, you do not need a designer. You need ten minutes and this skill.
The One Thing That Makes This Fail
Do not skip the taste skill.
The Emil Kowalski rules give Claude constraints. The taste skill gives Claude references. Without references, Claude applies the rules in the most average way. The output improves but stays generic.
Both files are required. Install both.
The Mistake That Makes It Fail
Describing the website too vaguely.
"Build me a clean, modern landing page" gives Claude nothing to anchor its decisions to. "Build a landing page for a B2B SaaS that handles payroll. The audience is CFOs. Look at the Rippling homepage for tone, Vercel for typography density" gives Claude three constraints it can actually use.
The more specific your description, the less the skill has to guess.
One Thing to Do This Week
Pick a landing page you have been putting off. Write a two-sentence brief: what it does and who it is for. Add two reference URLs. Run it with this skill active.
Check the screenshot before you say anything. If the first draft needs work, type what looks off. Claude sees the same page you do.