If your coding agent keeps shipping the same templated interface, start with three skills: Anthropic's frontend-design for direction, Vercel's web-design-guidelines for review, and the framework skill that matches your stack. This page ranks those and seven more, chosen by reading each skill's SKILL.md and weighing install counts from the skills.sh registry.
Design is where agent output fails most visibly. The models default to their statistical center, so every generated page arrives with the same gradient hero, the same fonts, the same rounded cards. The skills below counter that from four sides: design direction, framework discipline, design system tooling, and the review pass that catches what generation missed.
How this list was picked
Read at the source. We pulled each skill's SKILL.md from its repository and wrote every description from what the skill actually instructs an agent to do.
Adoption-weighted. Install counts are a July 2026 snapshot from the skills.sh registry, the same registry the LazySkills TUI searches.
Named maintainers matter. Anthropic, Vercel, shadcn, Google Labs, Emil Kowalski, and Addy Osmani are flagged, because in design guidance the author's taste is the product.
One job per pick. Direction, frameworks, tokens, and review each get their own entries. We dropped candidates that duplicated a stronger pick, including one that moved to its repo's deprecated folder.
Install counts from the skills.sh registry, snapshot taken July 2026.
Design Direction and Taste
The core complaint about AI-built UI is that everything looks the same: the identical fonts, the gradient hero, the rounded cards. These two skills attack that directly by forcing the agent to make deliberate, subject-specific design decisions before it writes a line of markup.
frontend-design
650.5K installs Anthropic
Best for: Making any new interface look intentional instead of templated
The most installed design skill in the registry, and the second most installed skill overall. Anthropic's frontend-design tells the agent to approach every brief as the design lead at a studio whose clients have already rejected templated proposals. It demands deliberate choices about palette, typography, and layout that are specific to the brief, plus one real aesthetic risk the agent can justify.
The instructions are unusually concrete about what generic looks like. The hero must work as a thesis for the page instead of the stock big-number-plus-gradient pattern, typography has to carry personality rather than deliver content neutrally, and structural devices like numbered markers are only allowed when the content genuinely is a sequence. If the brief is vague, the skill makes the agent pin down the subject, audience, and the page's single job before designing anything.
Official Anthropic skill, 650K installs at snapshot
Forces subject-grounded palette, type, and layout decisions
Explicitly bans the template answers, like gradient stat heroes
Works for new builds and reshaping existing interfaces
Best for: Landing pages, portfolios, and redesigns that need a premium feel
The community's favorite anti-slop skill, and at nearly 13,000 words of instructions, the deepest design framework in this list. Its scope is deliberately narrow: landing pages, portfolios, and redesigns. Dashboards and multi-step product UI are explicitly out. Every rule is contextual; the agent reads the brief first and pulls only what fits.
Its signature move is the Design Read: before generating anything, the agent must state in one line how it interprets the brief, for example a B2B SaaS landing for technical buyers with a Linear-style minimalist language. The skill covers vibe words, reference URLs, audience analysis, and quiet constraints like regulated industries that override aesthetics. Redesigns start with an audit of existing brand assets before anything gets replaced.
Brief inference first: the agent states its Design Read up front
Contextual rule system spanning almost 13K words
Audit-first process for redesigns, preserving brand assets
Scoped honestly: landing pages and portfolios, never dashboards
Direction sets the look; these skills make the implementation hold up. Framework-specific rules for React and Next.js performance, disciplined shadcn/ui composition, and Tailwind v4 design systems.
vercel-react-best-practices
542.8K installs Vercel
Best for: Writing and reviewing React or Next.js code that stays fast
Vercel Engineering's performance rulebook for React and Next.js, packaged as a skill: 70 rules across 8 categories, each with a stable ID and ordered by impact so the agent fixes what matters first. Eliminating request waterfalls and bundle size sit at the top as critical, ahead of server-side performance, data fetching, and re-render optimization.
The rules are specific enough to act on mechanically: run independent awaits through Promise.all, import directly instead of through barrel files, defer analytics until after hydration, start promises early and await late in API routes. For teams on Next.js, this is the closest thing to having Vercel's own review checklist run on every generated component.
Maintained by Vercel, 543K installs at snapshot
70 rules with stable IDs, ordered by performance impact
Waterfall elimination and bundle size treated as critical
Useful for generation, review, and refactoring alike
Best for: Projects built on shadcn/ui and component registries
The official skill from the shadcn/ui project. It wires the agent into the shadcn CLI: pulling live project context with the info command, searching component registries before writing any custom UI, fetching docs per component, and composing pages from existing parts, so a settings page becomes Tabs plus Card plus form controls rather than bespoke markup.
Its enforced style rules read like a lint config for taste: className is for layout only, flex with gap replaces space-x utilities, semantic tokens like bg-primary replace raw color values, and overlay components keep their own stacking so nobody hand-writes z-index. It detects the project's package runner and adapts commands for npm, pnpm, or bun.
Official skill from the shadcn/ui project itself
Registry search first, custom components as a last resort
Enforced styling rules with correct and incorrect code pairs
Best for: Building token-based design systems on Tailwind v4
A focused guide to doing design systems the Tailwind v4 way. The centerpiece is v4's CSS-first configuration: theme tokens defined in an @theme block instead of tailwind.config.ts, OKLCH color values for better perceptual consistency, dark mode through a custom variant, and entry animations with native @starting-style.
It includes a straight migration table from v3 patterns to their v4 equivalents, which matters because agents trained on years of v3 code will happily generate configuration that no longer applies. If your project is on Tailwind 4 and the agent keeps reaching for tailwind.config.ts, this skill is the correction.
Two skills for when the design language already exists somewhere else: one extracts tokens from any public website, the other turns a Stitch project into a reusable design spec.
extract-design-system
125.2K installs arvindrk
Best for: Bootstrapping a project with an existing site's design language
Point it at a public website and it reverse-engineers the design primitives: likely primary and accent colors, detected fonts, and spacing, radius, and shadow scales. Under the hood it drives a Playwright-based CLI, then normalizes the raw extraction into starter token files, tokens.json and tokens.css, ready to drop into a project.
The SKILL.md is refreshingly honest about limits, and instructs the agent to be too: results initialize a design system rather than reproduce one pixel-perfectly, a single page is never proof of a whole product's design language, and nothing overwrites existing styles without confirmation. That candor is why it earns its 125K installs.
Extracts colors, fonts, spacing, radius, and shadow scales
Generates starter tokens.json and tokens.css files
Explicit safety boundaries against overwriting existing styles
Useful for matching a client or competitor visual language
Best for: Teams designing screens in Google's Stitch
Part of Google Labs' skill suite for Stitch, their AI design tool. The agent analyzes an existing Stitch project through the Stitch MCP server, pulls screen metadata, HTML source, and theme information, and synthesizes a semantic design system into a DESIGN.md file: the visual language written down as prose and color values.
That file becomes the source of truth for prompting Stitch to generate new screens that match the existing design language, which addresses the consistency problem every AI design tool has across sessions. It requires the Stitch MCP server, so treat it as a specialist pick for Stitch users, sitting alongside sibling skills for design generation and React component export.
Official Google Labs skill for the Stitch design tool
Turns designed screens into a reusable DESIGN.md spec
Solves cross-session design consistency for generated screens
Part of a suite covering generation, export, and theming
The polish layer. An audit skill that checks generated UI against Vercel's interface guidelines, a motion glossary from one of the most respected animation engineers on the web, and a WCAG 2.2 playbook from a Chrome engineering leader.
web-design-guidelines
455.0K installs Vercel
Best for: Reviewing generated UI before it ships
The review counterpart to the design skills above. Ask the agent to review your UI and it audits the specified files against Vercel's Web Interface Guidelines, a large rulebook spanning accessibility, UX patterns, forms, typography, and performance, reporting findings in a terse file and line format you can work through like lint output.
A clever detail: the skill fetches the latest guidelines from the source repository on every run instead of baking rules into the SKILL.md. Reviews always use the current rulebook, and the skill itself stays tiny. With 455K installs it is the standard closing step for agent-built frontends.
Audit-style output as file:line findings
Fetches the newest guidelines fresh on every run
Covers accessibility, UX, forms, and typography together
Pairs naturally with any generation skill on this page
Best for: Naming the exact animation you want before you prompt for it
A different kind of skill from Emil Kowalski, the design engineer behind the Sonner and Vaul libraries. Describe a motion effect loosely, the bouncy thing when a popover opens, the iOS rubber-band scroll, and it returns the precise term: pop in, rubber-banding, stagger, origin-aware animation. Vocabulary first, because you cannot prompt well for an effect you cannot name.
The glossary is authoritative and the skill quotes it verbatim, disambiguating close pairs like morph versus crossfade versus shared element transition. Install counts are modest, but it comes from one of the most respected voices in web motion, and its sibling skills in the same repo, review-animations and improve-animations, extend the same expertise to critiquing and fixing motion.
Turns vague motion descriptions into precise terminology
Written by the creator of Sonner and Vaul
Disambiguates close terms so prompts land correctly
Sibling skills review and improve existing animations
Best for: Making agent-built UI genuinely accessible
A WCAG 2.2 playbook from Addy Osmani, engineering leader on the Chrome team. It is organized around the POUR principles with clear conformance targets: level A must pass, AA should pass since it is a legal requirement in many jurisdictions, AAA where it is practical. Agents get incorrect and correct code side by side for every pattern.
Coverage runs from alt text and accessible names for icon buttons through contrast ratio tables, keyboard navigation, focus management, and assistive technology support. Accessibility is the single most common failure of AI-generated UI, and this skill turns it from an afterthought into checkable rules the agent applies while writing markup.
Based on WCAG 2.2 with A, AA, and AAA targets
Written by a Chrome team engineering leader
Incorrect and correct code pairs for every rule
Covers contrast, keyboard, focus, and screen readers
A working stack is three skills: one for direction, one for your framework, one for review. Install frontend-design first; a single skill that moves every build away from the template look. Add web-design-guidelines so finished UI gets audited against a current rulebook. Then match your stack: vercel-react-best-practices on Next.js, shadcn if your components come from a registry, tailwind-design-system when you are on Tailwind v4.
The rest are situational. design-taste-frontend earns its install when the deliverable is a landing page or portfolio that has to feel premium. extract-design-system saves hours when a design language already exists on some site and you need it as tokens. accessibility belongs in every stack that ships to the public, and animation-vocabulary is the cheapest way to stop describing motion effects as the bouncy thing. design-md only makes sense if you design in Stitch.
Keep them under control with LazySkills
A design stack means several skills from several sources, and the next problem is knowing what is installed where and which of your agents can see each one. LazySkills is a terminal UI that answers exactly that. It scans your machine, shows every installed skill with per-agent visibility, diagnoses broken configurations, and searches the same registry this page is built on.
curl -fsSL https://lazyskills.sh/install | sh
Frequently asked questions
Do these design skills trigger automatically?
They trigger when your request matches the skill's description, so asking an agent to build a landing page will activate frontend-design or design-taste-frontend without being named. Audit skills like web-design-guidelines usually want an explicit ask, like review my UI. If a skill never fires, check its visibility with LazySkills and name it directly in the prompt as a test.
Can I stack several design skills together?
Yes, and the common stack is one direction skill, one framework skill, and one audit skill: for example frontend-design for the aesthetic, vercel-react-best-practices for the implementation, and web-design-guidelines for review. Avoid installing two direction skills at once, since frontend-design and design-taste-frontend both want to steer the same decisions and the agent has to arbitrate between them.
Why does AI-generated UI all look the same?
Left alone, models converge on their statistical center: the same font choices, gradient heroes, purple accents, and rounded cards that dominate their training data. Direction skills exist to break that pull. Anthropic's frontend-design literally instructs the agent to treat the templated answer as already rejected, and taste-skill makes it state a specific design interpretation before writing code.
Do these work outside React and Next.js?
The direction, audit, and accessibility skills are framework agnostic; they shape decisions and review output regardless of stack. vercel-react-best-practices is React and Next.js specific, shadcn expects a project with components.json, and tailwind-design-system assumes Tailwind v4. Pick the framework layer that matches your stack and the rest travels with you.
Will they respect my existing brand and design system?
The better ones are explicit about it. design-taste-frontend treats existing brand assets as starting material and audits before replacing anything in a redesign. extract-design-system can turn your existing site into token files the agent then builds with. shadcn pushes all styling through your project's semantic tokens, which keeps generated components inside your theme.
Which one should I install first?
Start with anthropics frontend-design; it has the broadest effect for a single install. Add web-design-guidelines so every build gets an audit pass. Then add the framework skill that matches your stack, and reach for taste-skill when the job is specifically a landing page or portfolio that has to feel premium.
