01Frontend & UI10 skills
Gated resource · 42 skillsClaude CodeCursorCodex
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.
How the 42 skills stack.
Don't install all 42. Stack three or four that fight slop at the source, then add eyes. Here's the whole architecture — the full list, repos, and install lines are one email away.
02Image, Graphics, 3D & Video8 skills
03Claude Design (canvas)4 skills
04AI Product Interaction8 skills
05Prompt Architecture8 skills
06Trust & Safety3 skills
Frontend & UI
Pick one as your base taste layer (#1–#3), then add motion and a feedback loop. This is where most of the slop dies.
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.
npx skills add anthropics/skills --skill frontend-design
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.
npx impeccable install # then /impeccable init
by Leonxlnx
Three dials — variance, motion, density — that make Claude apply real taste by default: asymmetric layouts, motion, an opinionated stack. Stops asking permission.
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
04animate
by Emil KowalskiEmil Kowalski's motion rules baked in: exits faster than entrances, transform/opacity only for 60fps, honor reduced-motion. Janky UI becomes smooth.
npx skills add delphi-ai/animate-skill --skill animate
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.
npx skills add kylezantos/design-motion-principles
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.
/plugin marketplace add ComposioHQ/awesome-codex-skills
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.
claude mcp add figma -- npx figma-developer-mcp --stdio
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.
claude mcp add playwright -s user -- npx @playwright/mcp@latest
09brandkit
by LeonxlnxOne-shot brand boards — logo directions, palette, typography, category mockups — as reference frames you then hand to Claude Code for real code.
npx skills add Leonxlnx/taste-skill --skill brandkit
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).
/plugin marketplace add Owl-Listener/designer-skills
Image, Graphics, 3D & Video
Generate the assets — images, social graphics, generative art, programmatic video, 3D, and After Effects — without leaving the agent.
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.
/plugin install nano-banana@devon-claude-skills
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.
/plugin marketplace add AgriciDaniel/banana-claude
by Anthropic
Outputs real, editable PNG/PDF graphics — carousels, quote cards, infographics — built in code so fonts, colors, and logos stay correct.
npx skills add anthropics/skills --skill canvas-design
by Anthropic
Code-driven generative visuals — flow fields, noise, particles — unique per render for backgrounds and hero textures. Never looks like stock.
npx skills add anthropics/skills --skill algorithmic-art
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.
/plugin marketplace add DojoCodingLabs/remotion-superpowers
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.
npx create-video@latest # Blank template, install Skills
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.
npx skills add LobzyJay/motion-design-with-claude --skill blender-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.
npx skills add LobzyJay/motion-design-with-claude --skill aftereffects-motion
Claude Design (canvas)
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.
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.
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.
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.
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.
AI Product Interaction
Conceptual SKILL.md files from the open Owl-Listener/ai-design-skills repo (MIT). They make Claude design the behavior of AI products.
by Owl Listener
Treat the context window as a design material — token budgets, summarize vs. retrieve, priority ordering, and graceful degradation when it fills.
npx skills add Owl-Listener/ai-design-skills --skill context-window-design
by Owl Listener
Design turn-taking, repair sequences, and grounding checkpoints so a bot recovers from breakdowns instead of improvising.
npx skills add Owl-Listener/ai-design-skills --skill conversation-patterns
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.
npx skills add Owl-Listener/ai-design-skills --skill generative-ui
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.
npx skills add Owl-Listener/ai-design-skills --skill progressive-disclosure
by Owl Listener
Sequence text, image, and tool-use in one flow — when to look, when to call a tool, when to speak.
npx skills add Owl-Listener/ai-design-skills --skill multimodal-orchestration
by Owl Listener
Define when the agent leads vs. the user, and clean handoff signals so neither side stalls.
npx skills add Owl-Listener/ai-design-skills --skill mixed-initiative-flow
by Owl Listener
Read frustration from caps, punctuation, repetition, and latency — then adapt (simplify, slow down, offer a human) before the user rage-quits.
npx skills add Owl-Listener/ai-design-skills --skill frustration-detection
by Owl Listener
Design correction and rating mechanisms — ambient signals first, explicit ratings sparingly — that actually change behavior.
npx skills add Owl-Listener/ai-design-skills --skill feedback-loops
Prompt Architecture
Also from Owl-Listener/ai-design-skills — structure the system prompt and behavior so it holds across sessions and edge cases.
by Owl Listener
A clean anatomy — identity, context, rules, output spec, examples — with the important instructions first and last, where the model attends most.
npx skills add Owl-Listener/ai-design-skills --skill system-prompt-structure
by Owl Listener
Define a consistent character, voice, and boundaries once, so behavior holds across sessions instead of drifting per reply.
npx skills add Owl-Listener/ai-design-skills --skill persona-architecture
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.
npx skills add Owl-Listener/ai-design-skills --skill tone-calibration
by Owl Listener
A response map for frustration, confusion, delight, and distress — validate without amplifying, de-escalate, hand off when needed.
npx skills add Owl-Listener/ai-design-skills --skill emotional-design
by Owl Listener
Parameterized prompt templates with named, typed, bounded variables and conditional sections — consistent output at scale from one source.
npx skills add Owl-Listener/ai-design-skills --skill template-design
by Owl Listener
Example sets that target the failure modes a model keeps missing — tricky cases move behavior more than ten lines of instruction.
npx skills add Owl-Listener/ai-design-skills --skill few-shot-patterns
by Owl Listener
Deliberate reasoning chains for multi-step tasks, structured rather than left to the model to improvise.
npx skills add Owl-Listener/ai-design-skills --skill chain-of-thought-design
by Owl Listener
Testable boundaries — format, length, tone, forbidden content — written so you can actually verify the model followed them.
npx skills add Owl-Listener/ai-design-skills --skill constraint-specification
Trust & Safety
The last three from Owl-Listener/ai-design-skills — trust signals, refusals, and transparency.
by Owl Listener
Explicit behavioral boundaries and refusal patterns — the do's and don'ts as enforceable lines, not vibes.
npx skills add Owl-Listener/ai-design-skills --skill guardrail-design
by Owl Listener
Confidence and source signals so users neither over- nor under-trust an answer — flag uncertainty instead of bluffing.
npx skills add Owl-Listener/ai-design-skills --skill trust-calibration
by Owl Listener
Surface what the model knows, doesn't know, and how sure it is, so users can calibrate their own reliance.
npx skills add Owl-Listener/ai-design-skills --skill transparency-patterns
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.
claude mcp add playwright \ -s user -- npx @playwright/mcp@latest › 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.
Get all 42 skills — free
Drop your email and the full directory unlocks instantly — every skill's GitHub repo, install line, and creator. Plus every other resource in the library. One email a week, unsubscribe anytime.
Kill the slop
Give your agent taste.
Stack three or four of these and the same prompt that produced generic slop starts shipping senior-looking work. Free — the whole directory, every repo, every install line.