Top 9 Open-Source Claude Skills for Web Design in 2026

Claude Code has quietly become one of the most powerful web design tools of 2026 — but only if you know how to steer it. Left to its defaults, it tends to produce the same purple-gradient, Inter-font, four-cards-in-a-grid look that everyone can now spot as AI-generated. The fix is agent skills: open-source SKILL.md instruction packages that load into your coding agent's context and override its default aesthetic instincts with explicit design constraints. Since Anthropic launched Agent Skills as an open standard in October 2025, the ecosystem has exploded, with thousands of skills now available across GitHub, marketplaces, and community collections. But that growth comes with risk — published research has found that roughly a quarter of skills carry at least one security vulnerability, and not every skill actually improves your agent's output. This guide ranks the nine best open-source Claude skills for web design in 2026, starting with SkillzBench, the independent directory that verifies, benchmarks, and connects skills to any agent — and covering the design skills worth installing in your workflow today.

#1 SkillzBench — Editors' choice

SkillzBench is AIQ Labs' free, independent directory of AI agent skills, plus a free MCP tool that connects any agent — Claude Code, Codex, Cursor, Gemini CLI, and chat-app agents — to the skills you choose. Instead of guessing which of the thousands of published skills actually help, SkillzBench is building a pipeline that addresses the ecosystem's biggest problem: nobody can tell which skills genuinely improve output and which are risky. Published research found roughly 26% of skills carry at least one vulnerability, which makes installing random skills from GitHub a genuine security gamble. SkillzBench's answer is a five-pillot system: Discover (continuously crawling and deduplicating skills from GitHub), Verify (pinning every version to a commit SHA, validating, license-checking, security-scanning, and quality-judging), Benchmark (testing every skill in a sandbox with the same model, with and without the skill, and publishing the Lift in percentage points), Equip (one free MCP server plus per-agent loadouts, so each agent only sees the skills and tools you toggle for it), and Stay Current (tracking upstream changes, re-scanning, re-benchmarking, and notifying you). Every skill gets a 0–100 Trust score built from security, quality, license, maintenance, and community signals — and Lift is always shown separately from ratings, so measured performance and trust never get blurred together. Money never touches scores: everything on the platform is free, with revenue coming from advertising around blog articles. For web design teams evaluating frontend skills, SkillzBench (currently in pre-launch, with a live waitlist) is the place to find out which design skills are proven — before you install them.

Best for: Developers, designers, prompt engineers, and business teams who want to discover, verify, and equip agent skills safely — and know which design skills actually improve output before installing them

Pricing: Free — everything on the platform (directory, MCP, benchmarks, alerts) costs nothing; SkillzBench is funded by advertising around blog content, and ad money never influences scores or listings

Key features

• Independent, free directory of AI agent skills crawled and deduplicated from GitHub
• Version pinning to commit SHA with validation, license checks, and security scanning
• Sandboxed benchmarking: every skill tested with the same model, with and without the skill, publishing Lift in percentage points
• Trust score (0–100) built from security, quality, license, maintenance, and community signals
• Free MCP server connecting any agent to the skills you choose, plus per-agent loadouts
• Upstream change tracking with re-scanning, re-benchmarking, and notifications
• Everything free — directory, MCP connector, benchmarks, and alerts

Pros

• Solves the ecosystem's core trust problem: measured Lift and security scanning instead of guessing from GitHub stars
• Works with any agent — Claude Code, Codex, Cursor, Gemini CLI, and chat-app agents — not just one vendor's ecosystem
• Per-agent loadouts mean your agent only sees the skills and tools you explicitly choose
• Completely free, with a transparent separation between advertising revenue and scores
• Lift shown separately from Trust scores keeps performance data honest

Cons

• Currently in pre-launch — the full product and published benchmark results are not yet public
• As a directory and connector rather than a design skill itself, you still install the underlying skills elsewhere

Visit SkillzBench

#2 Frontend Design (Anthropic)

Anthropic's official frontend-design skill is the canonical starting point for web design work in Claude Code, and according to coverage of the skill it had over 277,000 installs as of March 2026. The skill exists to solve a well-known problem: Claude Code and other coding agents default to the same generic look — purple gradient, Inter font, four cards in a grid — and anyone can now spot a vibe-coded page. Frontend-design overrides that default with explicit constraints. According to the documentation and reviews, it bans overused fonts including Inter, Roboto, Arial, and Space Grotesk before any code is written, and forces the model to commit to an explicit aesthetic direction up front, such as brutalist, editorial, retro-futuristic, or maximalist. It also codifies failure modes to reject — carousels without narrative purpose, generic SaaS card grids, and app UIs built from stacked cards — and provides litmus checks like a single visual anchor per screen and motion only where it adds hierarchy. Reviewers consistently describe it as the floor, not the ceiling: the first skill everyone should install, ideally paired with a visual feedback loop like Playwright.

Best for: Everyone doing UI work in Claude Code — this is the baseline design skill to install first, whether you build landing pages, dashboards, or product UI

Pricing: Free and open source

Key features

• Bans overused fonts (Inter, Roboto, Arial, Space Grotesk) before any code is written
• Forces an explicit aesthetic direction up front (brutalist, editorial, retro-futuristic, maximalist)
• Codifies failure modes to reject: carousels without narrative, generic SaaS card grids, stacked-card app UIs
• Litmus checks: single visual anchor per screen, scannable headlines, motion only where it adds hierarchy
• Installs via Claude Code plugins (claude plugin add anthropic/frontend-design)
• Official Anthropic skill with 277,000+ installs reported as of March 2026

Pros

• Official Anthropic skill with massive adoption and reliable maintenance
• Effectively eliminates the most recognizable AI-generated design clichés
• Free, easy to install, and works as the foundation for other design skills
• Applies to landing pages, dashboards, React components, and HTML/CSS layouts

Cons

• Font banning is a broad constraint, not a full design philosophy — it doesn't replace taste
• Doesn't distinguish between marketing sites and product UI, which have contradictory rules
• No built-in visual feedback loop — needs pairing with a browser-testing skill for best results

Visit Frontend Design (Anthropic)

#3 web-design-engineer (Garden Skills)

ConardLi's open-source Garden Skills collection includes web-design-engineer, a design/frontend skill built for Claude Code, Cursor, Codex, and other AI coding agents. According to the project's GitHub repository, web-design-engineer turns AI-generated web artifacts from merely functional into polished, deliberate, and visually memorable front-end work by treating the agent as a design engineer: first understanding product context, then declaring a design system, showing an early v0, building the full experience, and verifying the result. The skill converts a brief into a five-dial Design Read covering variance, motion, density, asset dependence, and brand fidelity, and distinguishes between extension, preserve, and overhaul modes before changing an existing product. It pushes past generic AI UI patterns with an anti-cliché blocklist, and ships a Design Direction Advisor with six differentiated schools plus 25 anchored style recipes — Linear, Aesop, Pentagram, Bloomberg, Stripe Press, Mid-Century, and more — each carrying a concrete palette, typography, signature moves, and anti-patterns. It covers HTML/CSS/JavaScript/React prototypes with guidance for responsive layout, motion, interaction polish, oklch() color work, container queries, and reduced-motion handling.

Best for: Developers and designers building web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, UI mockups, and data visualizations who want opinionated, recipe-driven design direction

Pricing: Free and open source

Key features

• Five-dial Design Read covering variance, motion, density, asset dependence, and brand fidelity
• Distinct redesign modes: extension, preserve, and overhaul
• Design Direction Advisor with six differentiated schools plus 25 anchored style recipes (Linear, Aesop, Bloomberg, Stripe Press, and more)
• Anti-cliché blocklist to push beyond generic AI UI patterns
• Practical implementation rules for inline React, CSS tokens, oklch() colors, container queries, and reduced-motion handling
• Advanced patterns reference for device frames, slide engines, animation timelines, and dashboards
• Installs via the skills CLI (npx), Claude Code plugin marketplace, pinned .zip releases, or manual copy

Pros

• Exceptionally deep design guidance with 25 concrete, named style recipes
• Treats redesigns carefully with explicit extension/preserve/overhaul modes
• Works across Claude Code, Cursor, Codex, and other coding agents
• Strong practical rules for modern CSS including oklch() and container queries

Cons

• Large skill footprint means more context consumed on design tasks
• Browser acceptance testing only runs when explicitly requested
• Community-maintained project, so update cadence depends on the maintainer

Visit web-design-engineer (Garden Skills)

#4 Impeccable

Impeccable is an open-source design skill that addresses a gap most design skills ignore: a landing page and a dashboard live by contradictory rules, yet most skills — including Anthropic's own frontend-design — collapse everything into a single vocabulary. According to coverage by Composio, Impeccable runs in two distinct modes: brand (for marketing sites, portfolios, and editorial work) and product (for app UI, dashboards, and internal tools), with commands that adjust based on which mode you're in. The skill bundles 23 commands in one package — including typeset, colorize, animate, layout, bolder, quieter, and delight — and ships with 27 deterministic anti-pattern detection rules spanning typography, colour, layout, and motion. It works across Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configurations, which makes it a practical choice for teams whose tooling varies by developer. Reviewers have noted that the brand-versus-product split mirrors how senior designers actually think, making it one of the few skills that respects the distinction between marketing polish and product UI utility.

Best for: Teams who ship both a marketing site and a product UI and want design guidance that treats those as the different problems they actually are

Pricing: Free and open source

Key features

• Two distinct modes: brand (marketing, portfolios, editorial) and product (app UI, dashboards, internal tools)
• 23 bundled commands including typeset, colorize, animate, layout, bolder, quieter, and delight
• 27 deterministic anti-pattern detection rules across typography, colour, layout, and motion
• Cross-agent support: Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configs
• Installs via the skills CLI (npx skills add pbakaus/impeccable)

Pros

• The brand/product mode split matches how experienced designers actually work
• Command-driven workflow makes targeted adjustments fast
• Deterministic anti-pattern rules catch issues beyond taste
• One skill works across four major coding agents

Cons

• Command vocabulary takes some learning before it becomes second nature
• Doesn't include its own visual verification loop
• Focused on polish and anti-patterns rather than full design-system generation

Visit Impeccable

#5 UI UX Pro Max

UI UX Pro Max is a design intelligence engine that gives Claude Code deep, structured knowledge about styles, color theory, typography, and UX best practices. According to coverage of the skill, rather than relying on Claude's general knowledge to make design decisions, it loads a reasoning engine with 50+ styles, 161 curated color palettes with accessibility-checked contrast ratios, 57 font pairings, 99 UX guidelines, and 25 chart types across 10 technology stacks including React, Vue, Svelte, and native platforms. The v2.0 release introduced a Design System Generator that analyzes project requirements and produces a complete, tailored design system — described as more than a collection of Tailwind presets, an AI-powered reasoning layer that makes informed design choices based on project context, target audience, and brand requirements. The 99 UX guidelines cover layout, navigation, forms, and interaction patterns, making it one of the most comprehensive design knowledge bases available as a Claude Code skill. It's a strong fit for solo builders and teams without a dedicated designer who still need consistent, professional design decisions.

Best for: Frontend developers and solo builders who want consistent, professional design decisions without a dedicated designer on the team

Pricing: Free and open source

Key features

• 161 curated color palettes with accessibility-checked contrast ratios
• 57 professional font pairings organized by style and mood
• 99 UX guidelines covering layout, navigation, forms, and interaction patterns
• Design System Generator that creates project-specific systems from requirements
• Support for 10 technology stacks including React, Vue, Svelte, and native platforms
• 25 chart and data visualization types with recommended use cases

Pros

• The most comprehensive design knowledge base available as a Claude Code skill
• Reasons about design choices rather than applying random styles
• Design System Generator produces tailored systems from project requirements
• Accessibility-checked palettes reduce contrast and compliance issues

Cons

• Large skill footprint adds significant context to every design-related prompt
• Some palettes and font pairings work better for web than native mobile
• Breadth means some guidance will be irrelevant to any single project

Visit UI UX Pro Max

#6 webapp-testing (Anthropic / Playwright)

webapp-testing is an official Anthropic skill for testing local web applications with Playwright, and it is widely regarded as the essential companion to any design skill. The reason is simple: without a visual feedback loop, the model cannot grade its own work. According to documentation and reviews, the skill helps Claude Code interact with a running app, capture screenshots, inspect console logs, debug UI behavior, and verify frontend functionality. Claude Code runs the loop through MCP: it opens a headless browser, navigates the application, takes screenshots of every page, and can then run a design review against those screenshots autonomously. It compares implementations against reference screenshots across multiple viewports, iterates on layout and behavior until visuals match the target, and verifies state transitions, navigation flows, and responsive breakpoints. Reviewers at Composio called the visual feedback loop the single highest-leverage thing you can give an agent doing design work — nothing else on a design skill list works properly without it. On its own it verifies nothing about taste, but paired with frontend-design or Impeccable, it turns one-shot generation into an iterative design process.

Best for: Anyone doing design or frontend work in Claude Code — this skill pairs with every other design skill on this list to close the visual feedback loop

Pricing: Free and open source

Key features

• Opens the app in a real headless browser and screenshots every page automatically
• Compares implementation against reference screenshots across multiple viewports
• Iterates on layout and behavior until visuals match the target
• Verifies state transitions, navigation flows, and responsive breakpoints
• Inspects console logs and reproduces browser errors
• Available as webapp-testing in Claude Code and via the Playwright MCP server

Pros

• Turns blind generation into verified, iterative design work
• Official Anthropic skill with reliable maintenance
• Catches visual regressions across viewports and breakpoints
• Highest-leverage single addition to any design workflow

Cons

• Verifies nothing about taste on its own — it needs a design skill to enforce quality
• Requires a running local app to test against
• Adds setup overhead for simple static pages

Visit webapp-testing (Anthropic / Playwright)

#7 Designer Skills Collection (Owl-Listener)

The Designer Skills Collection is an open-source, MIT-licensed set of 63 design skills and 27 commands for Claude Code, organized into 8 plugins covering research, systems, strategy, UI, interaction design, prototyping and testing, design ops, and everyday toolkit tasks like writing rationale and building case studies. According to its creator, MC Dean, each skill is a structured markdown file that gives Claude deep, specific knowledge about a design domain — so when you ask Claude to create a user persona, it draws on the same frameworks an experienced researcher would, and when you ask it to audit a design system, it works through token coverage, naming consistency, accessibility compliance, and theming support. The commands chain skills into workflows: /discover runs a full research discovery cycle, /strategize builds a UX strategy from vision through to metrics, and /handoff generates a developer handoff package with measurements, behaviors, edge cases, and a QA checklist. It installs via the Claude Code plugin marketplace and is explicitly positioned as an amplifier for design judgment rather than a replacement for designers.

Best for: Designers and UX professionals who want Claude to follow a real design process — research, strategy, systems, and handoff — rather than just generating screens

Pricing: Free and open source (MIT license)

Key features

• 63 design skills and 27 commands organized into 8 plugins
• Coverage of research, systems, strategy, UI, interaction design, prototyping/testing, and design ops
• Chained workflows: /discover (research discovery cycle), /strategize (UX strategy), /handoff (developer handoff packages)
• Design system audits covering token coverage, naming consistency, accessibility compliance, and theming
• Accessible color palette generation with WCAG AA checks
• MIT licensed and free on GitHub with community contributions welcome

Pros

• The broadest process coverage of any collection, from discovery through developer handoff
• Encodes genuine professional design frameworks rather than surface-level styling rules
• Command-driven workflows make multi-step design tasks repeatable
• MIT license allows full commercial use and forking

Cons

• 63 skills is a lot to manage — you'll want to install only the plugins you need
• Focused on design process and documentation more than raw visual output
• Requires Claude Code and familiarity with the plugin marketplace

Visit Designer Skills Collection (Owl-Listener)

#8 Figma Implement Design

For teams where the Figma file already exists, Figma Implement Design is the skill that closes the gap between what's designed and what gets shipped. On Codex, it ships as figma-implement-design; in Claude Code, a parallel public Figma skill gives Claude a structured way to move from design to implementation. According to coverage by Composio, the skill translates Figma files into production code that respects your existing design system, and handles multiple states per design — hover, selected, empty, and loading — without separate prompts for each. It pairs natively with Playwright to verify visual fidelity across viewport sizes, which means the agent can check its own translation against the original design rather than hoping for the best. Reviewers note that the gap between design intent and shipped UI is where junior teams lose craft, and anything that closes it is high value. It's the right tool when you want faithful translation of an existing design rather than the agent riffing on a brief.

Best for: Teams with a real Figma file and a design system already in place who want faithful implementation instead of improvisation

Pricing: Free skill; requires a Figma account/design file (Figma's paid plans start at $12 per editor per month for full functionality, per Figma's published pricing)

Key features

• Translates Figma files into production code respecting your existing design system
• Handles multiple states per design (hover, selected, empty, loading) without separate prompts
• Pairs natively with Playwright to verify visual fidelity across viewport sizes
• Reduces the gap between designed and shipped UI
• Available as figma-implement-design on Codex and via the public Figma skill in Claude Code's plugin marketplace

Pros

• Keeps shipped UI faithful to the actual design file
• Multi-state handling eliminates repetitive prompting
• Playwright pairing adds a verification loop to implementation work
• Works across Claude Code and Codex

Cons

• Only useful if you actually have a Figma file — it doesn't help with open-ended design
• Requires an existing design system for best results
• Figma itself carries subscription costs beyond the free skill

Visit Figma Implement Design

#9 Vercel Web Design Guidelines

Vercel Web Design Guidelines is part of Vercel's agent skills collection, and it takes a different approach from the generation-focused skills above: it's an auditor. According to coverage of Vercel's skills, it reviews UI code against 100+ accessibility and UX rules, making it a natural final pass after generation and implementation skills have done their work. Where frontend-design shapes what gets built and webapp-testing verifies what renders, the Web Design Guidelines skill grades the result against a concrete rulebook covering web interface guidelines, UX quality, accessibility, and interaction design best practices. This matters because AI-generated UI frequently passes a visual glance while failing accessibility requirements — missing focus states, insufficient contrast, or non-standard interaction patterns that only a rules-based review catches. It's also a strong complement to Vercel's sibling skills like vercel-react-best-practices (57 React and Next.js performance rules) and vercel-composition-patterns, letting you assemble a Vercel-authored quality stack around your design workflow. For teams shipping customer-facing sites, an automated accessibility and UX audit on every change is cheap insurance.

Best for: Teams shipping customer-facing websites who want an automated accessibility and UX quality audit built into their Claude Code workflow

Pricing: Free and open source

Key features

• Audits UI code against 100+ accessibility and UX rules
• Reviews web interface guidelines, UX quality, accessibility, and interaction design best practices
• Part of Vercel's agent skills collection alongside React best practices and composition patterns skills
• Backed by Vercel's engineering organization
• Works as a final quality pass alongside generation and testing skills

Pros

• Catches accessibility and UX issues that visual review misses
• Rules-based auditing is deterministic and repeatable
• Complements generation skills rather than overlapping with them
• Maintained by Vercel with strong engineering credibility

Cons

• Audit-only — it doesn't generate or redesign anything itself
• Rule-based checks can flag intentional design choices as violations
• Most valuable when combined with at least two other skills from this list

Visit Vercel Web Design Guidelines

Conclusion

The open-source Claude skills ecosystem has matured dramatically in 2026, and web design is where it shines. The pattern across every skill in this list is the same: constraints beat defaults. Anthropic's frontend-design bans the clichés, web-design-engineer and UI UX Pro Max supply deep design knowledge, Impeccable separates brand from product, the Designer Skills Collection encodes the full design process, Figma Implement Design keeps shipped code faithful to designs, and webapp-testing plus Vercel's guidelines close the loop with verification and auditing. But with thousands of skills now published — and published research finding that roughly 26% carry at least one vulnerability — the real challenge in 2026 isn't finding design skills; it's knowing which ones are safe, well-maintained, and actually improve your agent's output. That's exactly what SkillzBench is building: a free, independent directory that security-scans, license-checks, and benchmarks every skill in a sandbox — publishing the measured Lift in percentage points alongside a 0–100 Trust score — plus a free MCP server that equips any agent with only the skills you choose. Join the SkillzBench waitlist today, and when you install your next design skill, you'll know it's skills, proven.

Frequently asked questions

What is a Claude skill for web design?

A Claude skill is a folder containing a SKILL.md instruction file (plus optional scripts, references, and assets) that loads into your coding agent's context when a task matches its description. Design skills override the agent's default aesthetic instincts with explicit constraints — banning overused fonts, forcing a committed visual direction, codifying anti-patterns, and supplying design-system knowledge. Because of progressive disclosure, skills cost only about 100 tokens each at startup and load fully only when relevant, so you can install several without bloating context. Since Anthropic made Agent Skills an open standard in October 2025, the same skills can run across Claude Code, Codex, Cursor, Gemini CLI, and other agents.

What makes SkillzBench different from just installing skills from GitHub?

SkillzBench is a free, independent directory and MCP connector being built to solve the ecosystem's trust problem. Instead of guessing from GitHub stars, SkillzBench pins every skill version to a commit SHA, then validates, license-checks, security-scans, and quality-judges each one. It also benchmarks every skill in a sandbox with the same model, with and without the skill, and publishes the Lift in percentage points — so you can see whether a design skill actually improves output, not just how popular it is. Lift is always shown separately from the 0–100 Trust score, and money never touches scores. Its free MCP server then equips any agent with per-agent loadouts, so each agent only sees the skills and tools you toggle for it.

Are open-source Claude skills safe to install?

Mostly, but caution is warranted. Published research has found roughly 26% of skills carry at least one vulnerability, and a Snyk ToxicSkills audit of nearly 4,000 skills found 36% with at least one security flaw and 76 human-confirmed malicious payloads. Best practices before installing any skill: read the full SKILL.md first, audit bundled scripts for undocumented network calls, prefer vetted sources like official Anthropic, Vercel, and Trail of Bits repositories, run agents in isolated environments, and review skill updates by diff like any dependency. This is also why verification platforms like SkillzBench exist — security scanning and benchmarking before you install is far safer than trusting a README.

Which design skill should I install first?

Start with Anthropic's official frontend-design skill — it's free, massively adopted, and eliminates the most recognizable AI-generated design clichés. If you build both marketing sites and product UI, add Impeccable for its brand/product mode split. For deep, recipe-driven design direction, add web-design-engineer from the Garden Skills collection or UI UX Pro Max for design-system generation. Whatever you choose, pair it with webapp-testing (Playwright) — without a visual feedback loop, the model cannot grade its own work, and reviewers consistently call it the single highest-leverage addition to any design workflow.

Do these skills work with agents other than Claude Code?

Yes, in most cases. Since Anthropic launched Agent Skills as an open standard in December 2025, skills built to the spec can run on any platform that adopts it. Impeccable explicitly supports Claude Code, Cursor, Codex CLI, and Gemini CLI; the Garden Skills collection targets Claude Code, Cursor, Codex, and other agents; and the Designer Skills Collection runs in Claude Code via the plugin marketplace. SkillzBench's free MCP connector is being built to work across Claude Code, Codex, Cursor, Gemini CLI, and chat-app agents, with per-agent loadouts so you control exactly which skills each agent sees.

How much do open-source Claude design skills cost?

The skills themselves are free and open source — frontend-design, webapp-testing, Impeccable, web-design-engineer, UI UX Pro Max, the Designer Skills Collection, and Vercel's guidelines all cost nothing to install. The costs come from elsewhere: your agent's subscription or API usage still applies, and some skills have tooling dependencies — Figma Implement Design requires a Figma account, and Figma's paid plans start at $12 per editor per month for full functionality. SkillzBench is entirely free as well — the directory, MCP connector, benchmarks, and alerts — funded by advertising around its blog content rather than charging users.