Which Claude Code skill makes your website look studio-made?

What does a design skill do in Claude Code?

A skill is a folder of instructions, and sometimes scripts, that Claude Code loads when your task calls for it. Without design instructions, Claude picks what it has seen most often: a gradient, a generic typeface and three cards in a row. A design skill replaces that default with decisions.

The five skills in this guide do that in four ways, and most combine two:

• Taste rules: what Claude should avoid, and how it plans a design before it writes code.
• Checks after the build: a detector or browser check that runs over the finished page for known traits of AI design.
• A reference library: hundreds of palettes, font pairings and styles that Claude chooses from per project.
• A full direction per project: one plan with typefaces, colours, layout and motion, which Claude then builds and checks.

How do the five design skills compare?

As of 5 November 2026. Every statement about a skill comes from its own README or SKILL.md. These repositories change weekly, so check the number of rules or styles before you choose.

This guide is published by the makers of the Struq skill. Struq is a free, open-source design skill for Claude Code, Cursor, Codex and other AI coding tools: your AI settles the direction, type, colour and motion before it builds, so your site looks studio-made, not AI-made. That is why every skill below also gets a paragraph on where it beats the Struq skill.

• Frontend Design (Anthropic): taste rules plus a fixed plan in two passes. Free, Apache 2.0, installed as a Claude Code plugin.
• Impeccable: 23 commands to steer an existing design and a detector with 62 deterministic rules. Free, Apache 2.0.
• Taste Skill: deals a palette, font pairing and hero layout per page, and checks the result in a real browser. Free, MIT.
• UI/UX Pro Max: a searchable library with 192 palettes, 74 font pairings and guidelines for 22 tech stacks, among others. Basic version free, MIT, next to a Premium version.
• Struq skill: one plan per site in a fixed cinematic style, one stop for your veto, then a build checked at four screen widths. Free, MIT.

Frontend Design by Anthropic: what does it do?

• What it fixes: designs that look like a template. The skill lists five clusters of traits that AI-generated design converges on, such as a cream background with a serif and a terracotta accent, and the SaaS kit of identical rounded cards.
• How it works: Claude first writes a compact plan with four to six named hex colours, the typefaces and their roles, a layout concept and a few principles. It then reviews that plan against your brief, revises anything generic, and only then writes code. Where the environment supports it, Claude critiques its own work from screenshots.
• Motion: SKILL.md asks for restraint, saying "a single orchestrated moment [...] lands better than scattered effects".
• Licence: free, Apache 2.0.
• Install: in Claude Code, /plugin install frontend-design@claude-plugins-official.

Where it beats the Struq skill: it comes from the maker of Claude, it is short and nothing runs beside it. It imposes no style, so it also fits a quiet app or a dashboard. The Struq skill always steers towards the same cinematic approach.

Impeccable: what does it do?

• What it fixes: an existing interface that looks generic or untidy. Its own README says Impeccable is strongest on interfaces that already exist.
• How it works: you give a command, such as critique, audit, polish, bolder or quieter, and the part you want to improve. A detector with 62 deterministic rules looks for traits of AI design without a model or an API key. It can run on every file the agent edits, as a CLI in a terminal or CI, and as a Chrome extension.
• Motion: the README lists animate, which adds transitions and interaction feedback, and overdrive, which goes for shaders, spring physics and scroll-driven effects.
• Licence: free, Apache 2.0. Impeccable started from Anthropic’s Frontend Design skill.
• Install: npx impeccable install in your project folder, or in Claude Code with /plugin marketplace add pbakaus/impeccable. It works with Claude Code, Cursor, Codex CLI and others.

Where it beats the Struq skill: checking a site that is already live. The detector uses no model, so it gives the same result every time and can run in a pipeline. In live mode you pick an element in the browser and cycle through variants. The Struq skill is instructions and reference files; it has no detector of its own.

Taste Skill: what does it do?

• What it fixes: a company website that reads as a generic landing page.
• How it works: the skill first classifies the business (software, gaming, tech, product, service or place), then deals a palette, a Google Fonts pairing and one of eleven tested hero layouts, and builds from a fixed starter file. A checker script renders the page in headless Chrome at 1440, 1024, 768 and 390 pixels and prints PASS, WARN or FAIL per rule. It uses real photographs from open archives, credited, and real brand icons.
• Motion: the README keeps shader effects, creative moments and scroll scenes strictly for software, tech and gaming pages. Cafes, shops, hotels and services stay calm.
• Licence: free, MIT.
• Install: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend", or as a Claude Code or Codex plugin. It needs Node 22 or newer and Chrome, Edge or Chromium.

Where it beats the Struq skill: its browser check is a fixed script with a verdict per rule. The Struq skill relies on the browser tool your agent already has. Taste Skill also matches the motion to the business on purpose, so a cafe or a shop stays quiet.

UI/UX Pro Max: what does it do?

• What it fixes: not knowing which style, colours and typefaces suit a kind of product.
• How it works: a search script plus reasoning rules generate a design system per project, with a pattern, style, colours, typography, effects, anti-patterns and a pre-delivery checklist. The library counts 192 palettes, 74 font pairings, 51 active styles, 119 UX guidelines, 25 chart types and guidelines for 22 tech stacks, from React to SwiftUI, Flutter and Jetpack Compose.
• Motion: each reasoning rule includes key effects, the animations and interactions that suit that kind of product.
• Licence: the basic version is free and open source under MIT. A Premium version adds brand identity, logo design and more, described at uupm.cc.
• Install: in Claude Code, /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill, then /plugin install ui-ux-pro-max@ui-ux-pro-max-skill, or the ui-ux-pro-max-cli npm package. The search script needs Python 3.

Where it beats the Struq skill: breadth. UI/UX Pro Max also covers apps, dashboards with 25 chart types and mobile platforms such as SwiftUI, Flutter and Jetpack Compose. The Struq skill focuses on websites and builds with Next.js and Tailwind by default.

The Struq skill: what does it do?

• What it fixes: a site that is correct but that nobody remembers. The skill decides the direction and the motion up front, in the order a design studio would.
• How it works: the skill plans a cinematic site with one fixed motion recipe: large light display type, smooth scroll, masked reveals, full-screen page transitions and a pinned showpiece, with a 3D moment only where it earns its place. Every piece runs on one animation clock. Motion goes on in layers after a static layout: reveals, composition, showpieces, text and SVG, pointer, then 3D.
• What a brief looks like: you describe your site in a short brief. The skill writes one plan in STRUQ.md with brand, concept, two typefaces, palette, page arc, showcase recipes and transitions, and stops once for your veto. Then it builds, takes screenshots at 390, 768, 1440 and 1920 pixels and fixes what it sees. It forbids the agent to invent testimonials or stats.
• Licence: free, MIT, no account. The skill is instructions and reference files and runs no code of its own.
• Install: npx @struq/skill@latest, npx skills add struqnl/struq-design -g, or as a Claude Code plugin. Node 18 or newer. It works in Claude Code, Codex, Cursor and OpenCode, and builds with Next.js and Tailwind by default, with Vite supported.

In a blind comparison, the same model built three briefs twice each, without and with the skill. With an AI model as judge that did not know which version was which, the builds without the skill had 22 template tells and the builds with it had 8.

Where the Struq skill fits less: apps, dashboards and quiet business sites. The fixed cinematic style is made for sites that should impress, so for the rest one of the other four fits better. Its own README also says the plain builds "are less ambitious and break less".

Which design skill fits you?

If you mainly want to avoid the AI look, choose from four skills, each with its own strength:

• Frontend Design: better taste without any extra tooling.
• Impeccable: repeatable checks on a site or app that already exists.
• Taste Skill: a company site with a browser check that gives a verdict per rule.
• UI/UX Pro Max: the widest library, including apps, dashboards and mobile platforms.

Those four handle motion too. Frontend Design asks for one orchestrated moment instead of scattered effects, Impeccable has the animate and overdrive commands, Taste Skill deals scroll scenes on software, tech and gaming pages, and UI/UX Pro Max names key effects per kind of product.

If you want a site that impresses, with motion at the level of a design studio, choose the Struq skill. The difference is the plan: one motion system for the whole site, page transitions and a pinned showpiece, decided before Claude builds anything.

Can a skill get you an Awwwards-level site?

No skill guarantees an award. Awwwards publishes four criteria with fixed weights, and a jury of at least 18 members votes on each site for five days. Under each criterion is what a plain coding agent usually gets wrong:

• Design, 40 per cent. The agent picks what it has seen most: a hero with a button, three cards in a row, a gradient and a generic typeface. That is a template, and a jury recognises it within seconds.
• Usability, 30 per cent. Animations keep running for people who asked their system for reduced motion. On mobile the layout falls apart, or the motion that carried the story on desktop disappears.
• Creativity, 20 per cent. There is no single signature moment. Every section gets the same block flying in, instead of one scene that belongs to this site alone.
• Content, 10 per cent. Placeholder copy and invented facts: testimonials nobody gave, numbers with no source and text that would fit any business.

Each of these is a decision made before the first line of code. A direction set up front, with one look, reduced motion and mobile in the plan, one chosen signature moment and a ban on invented copy, removes the mistakes a jury sees first. The Struq skill writes that plan for you. In its blind comparison, with an AI model as judge, template tells went from 22 to 8. This guide claims no award for the Struq skill or for any site built with it: it names the bar, not a result.