Verdict: AI coding agents produce recognizable, generic-looking websites because every model has a default visual pattern. Claude design skills, which are portable folders of expert design instructions in the open Agent Skills format, break that pattern by giving the agent concrete rules for typography, animation, layout, and color instead of vibes. The highest-leverage setup is a three-skill stack: one skill that defines the visual system, one that polishes small functional details, and one that reviews the result against real criteria.
At a glance
- Last verified: 2026-08-25
- Skills are plain Markdown
SKILL.mdfiles; they load in Claude Code, Claude Design, and 30+ other agents that follow the Agent Skills standard. (agentskills.io)- Claude Design is Anthropic's visual workspace, launched April 2026 under Anthropic Labs. (Anthropic)
- The most referenced design skill set is Emil Kowalski's
emilkowalski/skillrepo. (emilkowal.ski)- Tastemaker extracts colors from real reference pixels and runs WCAG contrast math instead of guessing. (GitHub)
- Cost: the skills themselves are free and open source; you pay only your normal agent usage.
Why do AI-generated websites all look the same?
Every large model learns a statistical center of gravity for "what a website looks like," and it returns to that center unless you pull it away. That is why default agent output clusters on the same hero layout, the same purple-blue gradients, the same safe font pairings, and the same animation easing. Prompting harder does not fix this, because "make it look premium" is no more precise to the model than it was the first time.
What actually fixes it is the same thing that fixes it for human developers: curated, specific design knowledge applied consistently across the whole build. A skill that says "ease-out for exits, 150 to 250 milliseconds, never animate width, always support prefers-reduced-motion" changes the output more than any amount of adjectives in a prompt. In Emil Kowalski's words, as quoted in coverage of his skill set, "agents don't have great taste," and taste is exactly what a skill encodes. (AI Engineering, Medium, July 2026)
What exactly is a "skill" in Claude?
A skill is a folder containing a SKILL.md instruction file plus optional reference files and scripts. It follows the open Agent Skills specification, so the same folder works in Claude Code, the Claude apps, Claude Design, and other agents such as Cursor and OpenAI Codex. (agentskills.io)
Two mechanics matter in practice:
-
Progressive disclosure. The agent reads the short
SKILL.mdfirst and only opens the heavy reference files when the task needs them, so skills add capability without eating your context window. This structure is visible in community examples such as the Claude Design skill adapted from the product's own design prompt. (GitHub: jiji262/claude-design-skill) -
Personal vs project scope. Dropping a folder into
~/.claude/skills/makes it available in every project;.claude/skills/inside a repo shares it with your team. Many skill repos can also be installed with a one-liner likenpx skills add <owner>/<repo>. (emilkowal.ski/skill)
The same skills work in Claude Design, Anthropic's visual product launched under Anthropic Labs in April 2026, which lets you generate and iterate on web pages, prototypes, slides, and other visual artifacts with Claude, including design systems inferred from your uploaded codebase and files. (Anthropic)
Which Claude design skills are worth installing?
Not every skill earns its context. The ones that measurably change output quality fall into four jobs, and you want at least one skill per job.
| Job | What it fixes | Example skill(s) | Source |
|---|---|---|---|
| Define the visual system | Generic, vibe-less first drafts |
claude-design-skill (forces context gathering, a declared visual system, and multiple variations before shipping) |
GitHub |
| Design engineering + motion | Easing, timing, layout shift, accessibility of animations | Kowalski's emil-design-eng, animate, review-animations, animation-vocabulary, apple-design
|
emilkowal.ski/skill |
| Grounded color and consistency | Random colors, low-contrast text, style drift between pages | Tastemaker (pixel-extracted palettes, WCAG contrast matrix, persistent per-project style lock) | GitHub |
| Review and audit | "Looks fine to me" is not a review |
review-animations and audit-style skills that score a design against explicit criteria |
GitHub: emilkowalski/skill |
Emil Kowalski's design engineering skills
This is the reference set most people start with. Kowalski is a design engineer (formerly at Vercel and Linear, now running animations.dev), and the repo packages his working rules into skills such as emil-design-eng (the core animation and UI polish guidance), animate (build an animation from scratch with the correct curve, duration, and properties), review-animations and improve-animations (audit and prioritize fixes across a codebase), animation-vocabulary (turn vague motion requests into exact terminology), and apple-design (17 principles distilled from Apple's WWDC design talks and translated for the web). (emilkowal.ski/skill; AI Engineering, Medium, July 2026)
The honest caveat from hands-on reports: scroll-driven landing-page animation is already what models do best, so the visible delta there is smaller. The bigger payoff is in the functional details of an app, things like form submission feedback, hover states, and transition timing, where default model output is weakest.
Tastemaker: pixel-grounded instead of prompt-grounded
Most "match this reference" workflows degrade because the agent converts your reference screenshot into a text summary, then rebuilds from the summary and loses the details. Tastemaker takes a different route: small local scripts extract real color and contrast tokens from the actual pixels of your reference images, compute a full WCAG contrast matrix that states which color pairings may legally carry text, and write a persistent style lock into your repo so later screens cannot drift from earlier decisions. (GitHub: codeswithroh/tastemaker) It runs entirely locally with no hosted service or API key, and supports Claude Code, Cursor, and Windsurf. (tastemaker-skill.online)
The adapted Claude Design system prompt
The jiji262/claude-design-skill repo restructures the approach used by the Claude Design product itself into a portable skill: fact verification for named products, gathering real context (codebase, brand assets, references) before designing, declaring a visual system before placing pixels, shipping conservative-to-novel variations, and checking the result in a real browser. If you only install one skill, this is the best single candidate for first drafts. (GitHub)
How do you stack design skills into a working workflow?
One skill per job, run in order. Stacking five overlapping skills mostly duplicates instructions and burns context; a deliberate three-stage pipeline is what produces consistent results.
- Foundation pass. Write your brief, then invoke the skill that defines the visual system (colors, type scale, spacing, motion principles). Answer its intake questions properly; this is where "generic" gets killed or locked in.
- Detail pass. Once the layout exists, run the animation and interaction skill over the components people actually touch: forms, buttons, hover states, transitions between views. Target functional motion, not decorative scroll effects.
- Review pass. Run a review or audit skill against the finished build and fix its findings in priority order: contrast failures and accessibility gaps first, then timing and layout shift, then pure aesthetics.
If you are comparing agents for this kind of build work in the first place, our GPT Codex vs Claude Code comparison covers which coding agent fits which team, and the same stacking logic applies to non-design work, as we showed in our guide to building reusable Claude marketing skills.
What does this mean for you?
If you run a small business or build products with AI agents, design skills are the cheapest quality upgrade available right now. They are free, open source, work with the agent setup you already have, and the difference between a generic AI site and a credible brand presence increasingly decides whether visitors trust you. Install one system-defining skill and one motion skill this week, rebuild one page with them, and compare it side by side with your current output. If you are newer to AI-assisted building, our piece on the practical line between vibe coding and agentic engineering is a good companion read, and teams letting agents build customer-facing sites should see how to build an AI agent that finds customers and builds websites.
FAQ
Q: What are Claude design skills?
A: Claude design skills are folders of expert-written instructions (a SKILL.md file plus references and scripts) in the open Agent Skills format. When installed, they steer Claude, or any compatible coding agent, toward specific design rules for layout, typography, color, and animation instead of the model's generic defaults.
Q: Are Claude design skills free?
A: Yes. The skills covered here are free and open source on GitHub. Installation typically means copying a folder into ~/.claude/skills/ or running npx skills add <owner>/<repo>. You only pay your normal AI agent usage costs.
Q: Do Claude design skills work outside Claude Code?
A: Mostly yes. Skills follow the open Agent Skills standard, so they also load in Claude Design, Cursor, Codex, Windsurf, and other agents that support the format, though skill-specific features like GitHub-connected review can depend on the host tool.
Q: What is the difference between a skill and a prompt?
A: A prompt is a one-off instruction that disappears with the conversation. A skill persists on disk, loads its expert rules whenever a matching task appears, and can include scripts that compute real values (such as pixel-extracted color palettes and WCAG contrast checks) instead of leaving everything to improvisation.
Q: Which Claude design skill should I install first?
A: Start with a skill that defines a complete visual system before any code is written. That single change has the largest effect on whether an AI-built page looks generic. Add a motion and polish skill second, and a review skill third.
Q: Can design skills make my site fully accessible?
A: They help significantly. Skills such as Kowalski's encode rules for reduced motion, keyboard navigation, and tap target sizes, and Tastemaker runs real WCAG contrast math on your palette. They are a strong baseline, not a substitute for a final human accessibility audit.
Sources
- Anthropic - Introducing Claude Design by Anthropic Labs (April 2026)
- Emil Kowalski - AI Skills for Design Engineers and the emilkowalski/skill repository
- AI Engineering (Medium) - apple-design: Skills Forged From Apple WWDC's Best Design Insights (July 2026)
- Tastemaker repository (codeswithroh/tastemaker) and project site
- Claude Design Skill repository (jiji262/claude-design-skill)
- Agent Skills open standard
Updates & Corrections
- 2026-08-25 - Initial publication. Verified skill installation commands, skill folder scope, Claude Design launch framing, and Tastemaker's capabilities against the primary sources linked above.
Researched and drafted with AI agents; reviewed and fact-checked under human editorial oversight. See how we work.
Top comments (1)
The pixel-grounded point is the one I'd push hardest. The failure we see most isn't page one looking generic, it's page five drifting from page one: a new gray, a second border radius, a button 2px taller. A style lock in the repo fixes that better than any per-page instruction. One addition to the review pass: check empty, loading and error states, not just the happy page. That's where "looks AI-built" shows up most, because nobody screenshotted those states when they wrote the prompt. (I work on Mythex, an AI app builder, so I see a lot of generated UIs.)