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

Several skills now help Claude Code make better design decisions. They do not solve the same problem. This guide puts five side by side: what each one fixes, how it works, its licence, how to install it and where it beats the Struq skill.

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.

As of 5 November 2026. Every statement about another 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, one stop for your approval, then a build from 44 admitted blocks that a check script tests until it passes. Free, MIT.

• 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: inside Claude Code.

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.

• 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: 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: working on an interface that already exists, one element at a time. In live mode you pick an element in the browser and cycle through variants, and the detector runs in a pipeline and as a browser extension, giving the same result every time. The Struq skill has /struq audit, which changes nothing and returns what makes a page look AI-made with a fix for each, and /struq redesign, which swaps in blocks where a page is weakest. It has no live mode and no extension.

• 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: with the skills CLI, 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 checker renders the page in a browser it starts itself and gives a verdict per rule. The Struq skill’s check script reads the code; to look at the rendered page it 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.

• 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: inside Claude Code, add the marketplace, then install the plugin. The ui-ux-pro-max-cli npm package is the other route. 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.

• 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: you give a brief, one line is enough. The skill plans the site as one film: a motion language, one idea, one motif and a storyboard of scenes, then a palette, a type pairing and a photo pack. All of it lands in one plan, STRUQ.md, which must pass its own check, and the agent stops once for your approval. Then it builds from 44 admitted blocks, each installed as real files with everything it imports.
• Motion: the hard parts arrive as files, not as instructions: preloaders, page transitions, pinned showpieces and WebGL backgrounds. The blocks carry the timing, so nothing is left to a guessed easing curve. Motion runs on GSAP, and every plugin it uses is free on npm.
• The check: a script looks for the AI look (eyebrows, pills, gradients, glow, monospace, Inter, default purple, numbered steps, icon grids, dashes) and for what a page owes its blocks, and runs until it passes. With a browser tool the agent also looks at the page at phone and desktop width and fixes what it sees. It returns findings, never a score, and it never invents testimonials, clients or numbers.
• Licence: free, MIT, no account. The skill is instructions, the block files and five small Node scripts that run in your project.
• Install: one command finds the AI tools on your machine and installs the skill into each. Node 18 or newer. It is tested in Claude Code, Cursor, Codex and OpenCode, and the installer also covers Gemini CLI, GitHub Copilot and Windsurf. It builds on Next.js App Router with Tailwind v4, and on Vite by hand. It also installs as a Claude Code plugin, or with npx skills add struqapp/struq-design -g.

The skill needs nothing else. If you want the catalogue live in your agent, the Struq MCP at https://struq.app/api/mcp serves the same four jobs: the direction, the block list, a block as files and the check. Those four tools are free, with a free account. The palettes and type pairings it draws from are open to browse in the library, free as well.

Where the Struq skill fits less: apps, dashboards and quiet business sites. Its cinematic approach is made for sites that should impress, so for the rest one of the other four fits better. An ambitious page also has more that can break than a plain one: a reveal can still come out empty on a first build. The check catches most of it, and each release works on the rest.

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 makes an impression, with motion at the level of a design studio, choose the Struq skill. The difference is the plan: one motion language for the whole site, page transitions and a pinned showpiece, decided before Claude builds anything, and the blocks that carry them shipped as files. The showcase has sites directed that way, each with how it was made.

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. This guide claims no award for the Struq skill or for any site built with it: it names the bar, not a result.

Read the criteria at the source:

• Awwwards evaluation system: the four criteria, their weights and how the jury votes.
• Submit a site to Awwwards: submission options and prices.