Skills for DesignBest Claude skills for visual direction
11 of these were scored on one shared brief, a Tally budgeting-app landing page. 7 are listed without a score, because they fit the task.
Listings
frontend-design (Anthropic)
The biggest jump in the set: the generic purple SaaS template became a page built around one idea (a stack of kraft envelopes), with characterful type, a plain feature list and a comparison table instead of card grids. Its anti-default checklist visibly removed every gradient, emoji and 'Most Popular' tell from the baseline.
Impeccable
Threw out the gradient-and-emoji template for a warm paper 'ledger' world: the hero is a working envelope budget (labelled as sample data), features become one lead argument plus a ruled row, and pricing leads with a dark Plus plan. Distinctive and honest with copy. We followed its written rules but not its full workflow (launcher, question round, reviewer subagent), so a real run could differ.
Hallmark
Turned the centered hero-plus-cards template into a document-style page with a side rail, a real envelope ledger and hairline rules, using its Cobalt theme tokens. Clean and credible, though the result is quieter and less memorable than the strongest entries.
nothing-design-skill
Produces a strongly recognisable result: OLED black, a dot-matrix hero number, mono caps labels and a single red over-budget dot. Faithful and striking, but the style is fixed, so every page made with it will look like a Nothing product regardless of brand.
claude-design-system-prompt
The aesthetic-direction and slop-check skills produced a calm, coherent fintech page: a real product panel in the hero, a bento feature block with one lead cell, and borders instead of shadows. It also renders a visible design-system summary, as the skill requires, which some will see as clutter.
oil-ui
Its 'one protagonist per screen' rule gave the page a memorable hero: a full-width paycheck bar split into colour-coded envelopes, with the palette taken from it. The rest is restrained to the point of sparseness, and we skipped its usual three-direction user check.
web-designer
Its mandatory six-line brief (direction, mood, palette, type, layout, signature) pushed the page into a warm editorial ledger: Fraunces on paper, one tomato accent, hand-drawn tally marks as the signature and alternating paper/ink sections. One of the most distinctive results in the set. The weak spot is its full-viewport section habit, which leaves big empty bands on a short page.
UI UX Pro Max
We ran its own design-system generator on the brief. It picked a 'Vibrant & Block-based' style, blue/purple/pink and Russo One with Chakra Petch, a pairing it tags for gaming and esports, and a testimonials-led layout we had no real quotes for. Following it gave a bold, accessible block layout with SVG icons and visible focus states, but the look doesn't fit a calm budgeting app. Good rules and checklists; the auto-picked direction needs a designer's veto.
baoyu-design
Following its landing-page rules gave the page a clear single CTA, objection-led sections and honest placeholders for photos and testimonials instead of invented proof. Structurally better than the baseline, but without real photography the screenshot is dominated by striped image slots.
emilkowalski/skills
We applied its main emil-design-eng skill to the baseline. The page picked up specific transitions, a strong custom ease-out, press feedback, hover gated to real pointers, staggered entrances, and a soft ring instead of a hard border. The advice is good. Almost all of it is motion and interaction, so the static page looks nearly identical. It polishes a page rather than designing one.
design-for-ai
We tested the prototype skill on the brief by itself. With no DESIGN.md it falls back to a greyscale wireframe with placeholder labels, which it does exactly as documented: semantic HTML, 44px targets, and a reduced-motion rule. It is useful for structure. You get no visual design until you run its token workflow first, so this score only reflects what you get out of the box.
alchaincyf/huashu-design An HTML-native design skill for Claude Code.
Huashu Design
An HTML-native design skill for Claude Code.
google-labs-code/stitch-skills Google Labs agent skills for the Stitch MCP server.
Stitch Skills
Google Labs agent skills for the Stitch MCP server.
rohitg00/awesome-claude-design Claude Design prompts in DESIGN.md files, grouped by aesthetic, plus skills and teardowns.
awesome-claude-design
Claude Design prompts in DESIGN.md files, grouped by aesthetic, plus skills and teardowns.
styleseed
A design-method engine with 23 agent skills.
superdesigndev/superdesign-skill A design skill for coding agents, aimed at UI that doesn't look like a default AI template.
superdesign-skill
A design skill for coding agents, aimed at UI that doesn't look like a default AI template.
LibreUIUX
A UI and UX system for Claude Code: 71 plugins, 93 agents, and 74 skills.
Sumi
UX and UI guidance for Claude Code: 43 skills, 168 references, and 37 commands.
Questions
How is "Claude skills for visual direction" ranked?
Tested tools come first, ordered by the editorial score from one standard brief, a Tally budgeting-app landing page, then by GitHub stars. Tools we did not score follow, ordered by stars. A listing is on this page because it has this task tag.
Does every tool on this page have a score?
11 of 18 listings were scored on that brief. The others are included because they fit the task, not because they were scored.