The guide · playbook
42 Claude design skills that kill AI slop.
Every vibe-coded site has the same tell: a purple-to-white gradient, Inter, four cards in a grid, one weak hover. The model ships the median, and the median is dead. These 42 skills are plain SKILL.md rules that overwrite the model's default taste before a single line of CSS gets written. Most install in one command. Don't install all 42 — stack three or four that fight slop at the source, then add eyes.
The full list of 42
🔒 Drop your email to reveal all 42
Get the full list, free.
Drop your email and the whole architecture — every skill, repo, and install line — unlocks instantly, alongside every other guide and resource in the library. One email a week, unsubscribe anytime.
Six layers of taste. Pick one base taste layer, add motion, one token system, and a feedback loop — then read the rest for the specialists. Here's the whole architecture.
Layer 01 · Frontend & UI
The anti-slop core, 10 skills. Pick one as your base taste layer (#1–#3), then add motion and a feedback loop. This is where most of the slop dies.
01 · frontend-design — by Anthropic
The floor everyone agrees on. Forces Claude to commit to one bold aesthetic direction and answer purpose/tone/constraints before any CSS — and bans the default fonts.
02 · impeccable — by Paul Bakaus
23 one-word commands (polish, critique, animate) that run a deterministic quality pass: 4px grid, OKLCH color, fluid type, AA contrast. Brand mode vs product mode.
03 · design-taste-frontend — by Leonxlnx
Three dials — variance, motion, density — that make Claude apply real taste by default: asymmetric layouts, motion, an opinionated stack. Stops asking permission.
04 · animate — by Emil Kowalski
Emil Kowalski's motion rules baked in: exits faster than entrances, transform/opacity only for 60fps, honor reduced-motion. Janky UI becomes smooth.
05 · design-motion-principles — by kylezantos
A motion auditor that blends restraint, production polish, and playfulness — weighted by context. Flags scale(0) starts, bare easing, and missing reduced-motion.
06 · theme-factory — by Composio
Generates a real token system — colors, spacing, type ramps — as CSS variables, so the agent stops inventing a one-off hex for every component.
07 · figma → code (Figma MCP) — by GLips
When the Figma file exists and you want faithful translation: production code that respects your design system, with every state generated in one pass.
08 · playwright-mcp — by Microsoft
The highest-leverage thing you can give a design agent: eyes. It screenshots each page across viewports, compares to your reference, and iterates until it matches.
09 · brandkit — by Leonxlnx
One-shot brand boards — logo directions, palette, typography, category mockups — as reference frames you then hand to Claude Code for real code.
10 · designer-skills — by Owl Listener
The process work juniors skip — research discovery, UX strategy, dev handoff specs, QA checklists. Strong on process; pair it with a taste layer (#1–#3).
Layer 02 · Image, Graphics, 3D & Video
Pixels, motion & 3D, 8 skills. Generate the assets — images, social graphics, generative art, programmatic video, 3D, and After Effects — without leaving the agent.
11 · nano-banana — by Devon Jones
Generate and edit images in the terminal via Gemini — blog headers, thumbnails, mockups, room redesigns. Multi-turn refinement, ~$0.04 an image.
12 · banana-claude — by Daniel Agrici
A smarter image wrapper: Claude interprets intent and builds the prompt for you with a five-part formula. 13 modes, plus a large prompt library to browse.
13 · canvas-design — by Anthropic
Outputs real, editable PNG/PDF graphics — carousels, quote cards, infographics — built in code so fonts, colors, and logos stay correct.
14 · algorithmic-art — by Anthropic
Code-driven generative visuals — flow fields, noise, particles — unique per render for backgrounds and hero textures. Never looks like stock.
15 · remotion-superpowers — by Dojo Coding
A full video studio in Claude Code — voiceovers, music, stock footage, captions, transitions, and a render→review→fix loop. React in, MP4 out. No timeline editor.
16 · claude-remotion (Remotion Skills) — by Remotion
The lighter on-ramp to programmatic video. Describe it in English, Claude writes the TypeScript, Remotion renders frame by frame. Best for explainers and short-form.
17 · blender-motion — by LobzyJay · ahujasid (MCP)
Drive Blender from text — objects, materials, lighting, cameras, renders — over the Blender MCP. Claude writes the bpy Python; you direct. No 3D skills required.
18 · aftereffects-motion — by LobzyJay · TheLlamainator (MCP)
Animate inside After Effects from a prompt — live MCP commands or generated JSX with ExtendScript expressions and an effects catalog. Loads when AE is the subject.
Layer 03 · Claude Design (canvas)
The product, 4 skills. Four ways to drive the design product at claude.ai/design — chat on the left, a live code-based canvas on the right, so fonts, colors, and logos stay editable. Paid plan, web only.
19 · High-fidelity mockups — by Anthropic · Claude Design
Finished web/app screens you can iterate element by element by chat — something flat image generators can't do. Best for mockups, carousels, and decks.
20 · Design systems — by Anthropic · Claude Design
Train the canvas on your brand — logo, fonts, colors — and it applies the system to everything. Hold several and switch per project. Feed it structure first.
21 · Templates — by Anthropic · Claude Design
Build one perfect version, save it as a template, then pair it with any design system. The core trick for repeatable content that looks good every time.
22 · Slide decks — by Anthropic · Claude Design
Presentations from a template and your brand colors, exportable. Hand off to Claude Code to ship as a real site, or export to Canva.
Layer 04 · AI Product Interaction
Behavior, not pixels, 8 skills. Conceptual SKILL.md files from the open Owl-Listener/ai-design-skills repo (MIT). They make Claude design the behavior of AI products.
24 · context-window-design — by Owl Listener
Treat the context window as a design material — token budgets, summarize vs. retrieve, priority ordering, and graceful degradation when it fills.
25 · conversation-patterns — by Owl Listener
Design turn-taking, repair sequences, and grounding checkpoints so a bot recovers from breakdowns instead of improvising.
26 · generative-ui — by Owl Listener
Rules for when the model should render UI components — date pickers, cards, charts — vs. plain text, and how to fall back safely.
27 · progressive-disclosure — by Owl Listener
Stage how an AI reveals its power so users aren't overwhelmed on turn 1 or underusing the tool by turn 50.
28 · multimodal-orchestration — by Owl Listener
Sequence text, image, and tool-use in one flow — when to look, when to call a tool, when to speak.
29 · mixed-initiative-flow — by Owl Listener
Define when the agent leads vs. the user, and clean handoff signals so neither side stalls.
30 · frustration-detection — by Owl Listener
Read frustration from caps, punctuation, repetition, and latency — then adapt (simplify, slow down, offer a human) before the user rage-quits.
31 · feedback-loops — by Owl Listener
Design correction and rating mechanisms — ambient signals first, explicit ratings sparingly — that actually change behavior.
Layer 05 · Prompt Architecture
The prompt is the product, 8 skills. Also from Owl-Listener/ai-design-skills — structure the system prompt and behavior so it holds across sessions and edge cases.
32 · system-prompt-structure — by Owl Listener
A clean anatomy — identity, context, rules, output spec, examples — with the important instructions first and last, where the model attends most.
33 · persona-architecture — by Owl Listener
Define a consistent character, voice, and boundaries once, so behavior holds across sessions instead of drifting per reply.
34 · tone-calibration — by Owl Listener
Per-context dials for formality, warmth, and confidence so the same model reads right in a crisis ticket and a welcome flow.
35 · emotional-design — by Owl Listener
A response map for frustration, confusion, delight, and distress — validate without amplifying, de-escalate, hand off when needed.
36 · template-design — by Owl Listener
Parameterized prompt templates with named, typed, bounded variables and conditional sections — consistent output at scale from one source.
37 · few-shot-patterns — by Owl Listener
Example sets that target the failure modes a model keeps missing — tricky cases move behavior more than ten lines of instruction.
38 · chain-of-thought-design — by Owl Listener
Deliberate reasoning chains for multi-step tasks, structured rather than left to the model to improvise.
39 · constraint-specification — by Owl Listener
Testable boundaries — format, length, tone, forbidden content — written so you can actually verify the model followed them.
Layer 06 · Trust & Safety
Ship it safely, 3 skills. The last three from Owl-Listener/ai-design-skills — trust signals, refusals, and transparency.
40 · guardrail-design — by Owl Listener
Explicit behavioral boundaries and refusal patterns — the do's and don'ts as enforceable lines, not vibes.
41 · trust-calibration — by Owl Listener
Confidence and source signals so users neither over- nor under-trust an answer — flag uncertainty instead of bluffing.
42 · transparency-patterns — by Owl Listener
Surface what the model knows, doesn't know, and how sure it is, so users can calibrate their own reliance.
Spotlight: give your agent eyes
The single highest-leverage skill here is playwright-mcp. Without it you're trusting a blind model. With it, the model opens a real browser, screenshots every page across viewports, compares to your reference, and refactors the CSS until it matches — it grades its own work.
Once it's installed, the ask is simple: open the app in headless Chrome, screenshot every layout at 1920 and 390 wide, compare to my reference, and fix the gaps.
Stack four, not forty-two
Pick one base taste layer, add motion, one token system, and the feedback loop. Same tool, completely different output.
Base tastefrontend-design / impeccable / taste-skill — pick one. This is the aesthetic floor.Motionanimate — motion that doesn't feel cheap.Tokenstheme-factory — one token system, no one-off hex values.Eyesplaywright — the feedback loop, so the model grades itself.
Skills set the aesthetic floor — they get you to senior-looking. But taste still comes from understanding the constraints, not from a blocklist of banned fonts. The judgment about which direction to commit to is still yours.
Every skill above is someone else's open-source work — the links go straight to the original creators' repos. Star the ones you use. Original roundup by Artem Novitckii; if he's miscredited anything or a better repo exists, ping him on Instagram, in the Skool community, or across his resource library, and he'll fix it.