Best Design Skills for Claude Code (2026)

The best design skills for Claude Code right now are Impeccable, Hallmark, Taste Skill and Anthropic's own frontend-design. Pick Impeccable if you want to fix and polish a UI you already have, Hallmark if you want a new landing page built from a theme and checked hard before it ships, Taste Skill if you want a slow, art directed marketing page with real photographs, and frontend-design if you want a free, lightweight default that adds no scripts. All four are free and open source, and all four also work in Codex, Cursor and other agents that read SKILL.md files.

Design skills became one of the busiest corners of GitHub this week. On the morning of October 25, Hallmark (1,359 new stars that day) and Impeccable (1,113) both sat in GitHub's daily trending list. We installed all four into a test project on our box and ran each tool's own checker against the same deliberately generic page.

What a design skill does

A design skill is an Agent Skill: a folder with a SKILL.md file of instructions, plus optional reference files and scripts. When you ask Claude Code to build or restyle a page, the agent loads the skill and follows its rules instead of its own defaults.

Those defaults are the problem these skills attack. Models trained on the same SaaS templates keep producing the same tells: Inter for every font, purple to blue gradients, cards nested inside cards, a small uppercase label above every heading, gray text on a colored background, and an arrow glued to the end of every button. Each skill names these patterns and tells the agent to avoid them. The bigger skills also ship scripts that scan the finished code and fail it when a tell slips through.

Best design skills for Claude Code at a glance

Star counts come from the GitHub API on October 25. They measure attention, not quality.

Impeccable: best for fixing UI you already have

Impeccable describes itself as one skill with 24 commands and 62 deterministic detector rules. Its README says it started from Anthropic's frontend-design and grew from there. You run everything through one entry point, /impeccable, followed by a command such as audit, critique, polish, distill, typeset, layout or harden. The first run is /impeccable init, which asks about your product and writes a PRODUCT.md file so later commands know the audience and voice.

What sets it apart is the checker. npx impeccable detect runs the rules with no model and no API key, so you can put it in CI or run it on any folder or URL. The installer also adds hooks: in our test project it wrote a .claude/settings.local.json that runs the detector after every Edit or Write on a UI file and a deeper pass when the agent stops. It also added four Claude Code subagents.

Two things to know. The npm release we installed was 4.7.0; the repo merged a 4.7.1 release on October 23 that had not reached npm when we tested. And the CLI reports anonymous telemetry as on by default for its roll requests; impeccable telemetry off, DO_NOT_TRACK=1 or IMPECCABLE_NO_TELEMETRY=1 turns it off, and the privacy page lists what is sent.

Hallmark: best for new pages with a hard quality floor

Hallmark is made by Together AI and reached version 2.0.0 this month. It works from a catalog of 48 themes. Each theme is a material (paper, type, palette, surfaces and texture) rather than a page plan, so two prompts in one theme still produce different layouts. A build deals three themes that fit your prompt, builds the hero alone and reviews it, then builds the rest and lints it. Say "custom" and it skips the themes and designs from your prompt under the same rules.

Its checks come in tiers. Floor problems (contrast, focus, reduced motion, invented facts, a broken phone layout) never ship. Reflex problems are the defaults a model falls into, which a build may overrule with a stated reason. Finish checks are craft details that never block. It asks for your real photos and numbers instead of inventing them.

By default the skill never touches an existing design. You have to name it: /hallmark redesign ./src/app rebuilds while keeping content and wiring, and /hallmark audit ./index.html only reports.

Taste Skill: best for art directed marketing pages

Taste Skill is the most starred of the community skills. The repo now holds one skill, installed as design-taste-frontend, at version 2.1.5 (released October 24). Its README says the rules come from a study of 247 curated sites. A build deals three of 20 researched directions, finds one idea tied to the client's own material, builds with credited pictures from open collections, checks the page in Chrome at three widths, and then fixes the top three problems from its own screenshots, up to three rounds. Since v2.1 it also has a separate route for dashboards and app screens.

The cost is time. The README estimates 30 to 45 minutes and a few hundred thousand tokens per build, and its scripts need Node 22 or newer plus Chrome, Edge or Chromium.

Anthropic's frontend design skill: the free default

Anthropic's frontend-design is a single SKILL.md with no scripts. It tells the agent to ground the design in the subject matter, plan a small token system (four to six named colors, typefaces, a layout concept), review that plan against the brief, and only then write code. It lists the looks that currently read as generated, including the warm cream page with a terracotta accent, the near black page with one acid green accent, and the identical rounded card kit, and asks the agent not to spend free choices on them.

In Claude Code you can install it from Anthropic's official plugin marketplace as frontend-design@claude-plugins-official. Choose it when you want better defaults without hooks, scripts or extra tokens. It cannot check its own output, so pair it with one of the checkers above if you want enforcement.

What we tested

We built one small landing page on purpose to look generated: Inter on a near black page, a purple to blue gradient hero, an uppercase eyebrow over the headline, one colored word in the headline, three equal icon cards with "01 · Speed" style labels, a card nested in a card, gray text on blue, a bouncy transition: all button with an arrow, and an email form at the end. Then we ran each checker on the same file on Linux.

• Hallmark sloplint.mjs, static only: 26 FAIL, 4 REFLEX and 7 WARN. With --render in headless Chrome (after installing puppeteer-core): 34 FAIL, 12 REFLEX and 8 WARN, adding layout problems such as a hero that ends at 407 pixels on a 900 pixel screen and a page that closes on an email signup. It also flagged our "10,000+ teams" claim as a number to confirm.
• Impeccable detect (4.7.0): 11 anti patterns plus 3 advisory notes in about 1.5 seconds. It caught the purple palette, Inter, the nested card, the skipped heading level and several contrast failures with exact ratios.
• Taste Skill lint.mjs: 10 FAIL and 3 WARN, including the eyebrow labels, the gradients, the violet colors, the resting shadow, and "all in one" as stock marketing copy.
• frontend-design has no checker, so there was nothing to run.

Every checker caught the gradient, the nested or shadowed cards and the eyebrow pattern. Hallmark was the strictest by far, partly because it also fails color values that live outside a token block and pages without its own stamp comment, so expect noise if you lint code it did not build.

Installs: npx skills add nutlope/hallmark -a claude-code -y and the Taste Skill command both copied the skill into .claude/skills/, and npx impeccable install --providers=claude --scope=project installed its skill, hooks and subagents. One catch: the current skills CLI (1.7.4) requires Node 22.20 or newer and crashed on our Node 20, even though Hallmark's README still says Node 18. We ran it under Node 24.

What we did not test: we did not run a full design build with any skill, because that needs a signed in agent and a model budget. So we make no claim here about which skill produces the nicest page. Treat the checker results as evidence of what each tool enforces, not as a beauty contest.

Which design skill should you use?

• You have an app and want it to look less generic: Impeccable. Its commands are built around improving what exists, and the detector plus hooks keep the agent honest on every edit.
• You need a new landing page this afternoon: Hallmark. Themes give the agent a direction fast, and the Floor tier stops the worst mistakes.
• You want the most designed marketing page and can spend the tokens: Taste Skill.
• You want no scripts at all: frontend-design.

You can install more than one, but avoid running two of them on the same task. Each one has its own house rules, and they disagree on details such as shadows and section labels. A practical mix is frontend-design or Hallmark for the build and npx impeccable detect as a check in CI.

Skills run with your agent's full permissions, and the install CLI says so. Read a skill's scripts before you install it. Our Claude Code mods guide covers how to vet code that runs inside your agent. For another skill that pairs instructions with scripted checks, see our Cloudflare security audit skill guide, and for picking the agent itself, our best AI coding assistant roundup.

FAQ

Impeccable vs Hallmark: which is better?

They aim at different jobs. Impeccable is stronger for improving an existing codebase, with 24 commands and a fast detector you can run in CI. Hallmark is stronger for building a new page from scratch, with 48 themes and a strict tiered linter. It refuses to redesign existing work unless you name it.

How do I install the Hallmark skill in Claude Code?

Run npx skills add nutlope/hallmark -g for every project, or leave off -g for the current one, then call /hallmark with a prompt. You can also add it as a Claude Code plugin with /plugin marketplace add nutlope/hallmark. The browser checks need puppeteer-core and Chrome.

Does the Impeccable skill work with Codex and Cursor?

Yes. The installer supports Claude Code, Codex, Cursor, Gemini CLI and more, and adds native edit hooks for Claude Code, Codex, Cursor, GitHub Copilot and Grok Build. Codex users approve the project hook under /hooks.

What is the frontend design skill?

It is Anthropic's official design skill, a single Apache 2.0 licensed SKILL.md in the anthropics/skills repo. It pushes the agent to plan a distinctive direction before coding and lists the looks that read as generated. It has no scripts or checker.

Are design skills free?

All four skills here are free and open source. You still pay for the model tokens your agent uses, and Taste Skill estimates a few hundred thousand tokens per full build.

Do design skills work with OpenCode?

Hallmark and Impeccable both list OpenCode as supported, and any agent that reads SKILL.md folders can load these skills, including Codex and Cursor.