Claude Design skills
51 of them run by themselves.
Loops that build and review UI on every change, with screenshots and a critic that remembers what failed.
Set up Habit: follow the instructions in https://gethabit.dev/LOOP.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3Your agent finds the right skill
Emil Design Engby Emil Kowalski · 376K installsTeaches your agent to make motion and small details feel right.↻Every screen change gets a motion review. Smoother screens and fewer small mistakes.Review Animationsby Emil Kowalski · 247K installsThe review animations skill has your agent review animation and motion code against ten strict standards and return a findings table with a Block or Approve verdict.↻Every animation earns its place.Improve Animationsby Emil Kowalski · 215K installsThe improve animations skill has your agent audit a codebase's motion code and write prioritized, self-contained fix plans that any agent can run.↻Ranked motion fixes, ready to execute.Find Animation Opportunitiesby Emil Kowalski · 200K installsFind animation opportunities is a read-only skill that searches a UI for moments that should animate, rejects the rest through a strict gate, and proposes exact motion values.↻Only motion that earns its place.
shadcnby shadcn-ui · 119K installsAdds and updates shadcn parts in your app.↻Your parts stay current and your own edits stay safe. Less manual work, fewer bugs.
Landing Page Conversion Auditby autonnel · 100K installsThe landing page conversion audit skill reviews a landing, sales or checkout page for conversion leaks and returns a short fix list ranked by expected impact.↻Conversion leaks ranked every month.
Hallmarkby Nutlope · 66K installsDesigns web pages that do not look like every other AI page.↻Each new page looks different from your last ones. A site that looks made, not copied.
Design Systemby nextlevelbuilder · 41K installsSets up colors and sizes as shared design rules.↻Wrong colors caught on every change. Your design looks the same everywhere.Designby nextlevelbuilder · 39K installsThe design skill is an all-in-one design kit for brand identity, design tokens, UI styling, logos, corporate identity mockups, HTML slides, banners, icons and social photos.↻On-brand social images for each campaign.
Better UIby jakubkrehel · 38K installsFixes small details that make screens look rough.↻Every screen change is checked for rough details. Your app looks cleaner.Better Typographyby jakubkrehel · 33K installsThe better typography skill sets and reviews how text renders: type scale, line-height, letter-spacing, font loading, wrapping, truncation, tabular numbers and punctuation.↻Text renders right on every PR.Better Colorsby jakubkrehel · 31K installsThe better colors skill builds and audits color systems: ramps, semantic token names, format conversion and measured contrast, reported by severity.↻Color tokens stay used by role.
Interface Designby Dammyjay93 · 30K installsHelps build clear, good-looking app screens.↻Every screen change follows your design rules. Your app looks better each time.Better Layoutby jakubkrehel · 30K installsThe better layout skill reviews grouping, alignment, reading order and responsive structure, then stress-tests a layout for resizing, translated text and RTL mirroring.↻Layouts survive resize, translation, RTL.Better Interfaceby jakubkrehel · 29K installsThe better interface skill runs one review across accessibility, layout, writing, typography, color and UI polish by routing to the better-* skills and merging one ranked verdict.↻One ranked verdict across six domains.
Baseline UIby ibelick · 24K installsThe baseline ui skill helps frontend developers clean up AI-generated interfaces with fixed rules for spacing, typography, components, animation, layout and design.↻UI slop gets caught on merge.
Nature Figureby yuan1z0825 · 18K installsMakes science charts ready for journals.↻Every chart is checked before it goes out. Fewer errors in your papers.
Diagram Designby cathrynlavery · 18K installsDraws clean, branded diagrams as one web page file.↻Your diagrams stay neat and on brand. Clearer docs with less drawing time.
App Store Screenshotsby ParthJadhav · 15K installsMakes store pictures that show off your app.↻Your store pictures stay fresh with every release, so more people want your app.
Flueby SFKislev · 13K installsThe flue skill lets a coding agent drive desktop software such as Blender, Photoshop, Premiere and Unity from the shell through a small bridge that returns JSON, for people who want app control without MCP servers.↻Desktop app edits, one step.
Design Motion Principlesby kylezantos · 12K installsChecks if screen animations feel right.↻Every animation change gets a review. Smoother, calmer motion in your app.
Refero Designby referodesign · 12K installsThe refero design skill gives agents a research-first method for UI, product and web design.↻Designs grounded in real references.
Nano Bananaby GargantuaX · 11K installsMakes and edits pictures from your words.↻A new picture is ready from every idea. More images with less work.
UI Animationby mblode · 10K installsThe ui animation skill helps frontend developers build, review and measure interface motion: springs, gestures, scroll effects, easing curves fitted from recordings and sparse interface sound.↻Smooth motion in every PR.
SendCutSendby earthtojake · 10K installsThe sendcutsend skill gives makers and engineers a careful preflight report for DXF and STEP uploads, measuring the file and comparing it to the current catalog, specs and ordering guide for cutting, bending and other services.↻Every part file gets preflighted.
Web Typographyby wondelai · 9K installsThe web typography skill helps an agent choose, pair and set typefaces for the web, from line length and line height to fluid sizes and font loading.↻Type stays readable on every release.iOS HIG designby wondelai · 8K installsThe ios hig design skill helps designers and developers build native iPhone and iPad interfaces with safe areas, Dynamic Type, Dark Mode, SF Symbols, accessibility and a 10-point score.↻Every screen scores toward 10/10.Improve UIby ibelick · 8K installsThe improve ui skill audits one product surface against its own design evidence, keeps only proven UI problems, and writes self-contained plans for another agent, for teams fighting design-system drift.↻Proven UI fixes, planned for handoff.
Antislopby miqdadbadjuber · 7K installsChecks your app screens for a boring, generic look.↻Your screens look made by a person, not a robot. Fewer fake buttons and numbers.
Design DNAby zanwei · 6K installsCopies the look of a design from pictures.↻New pages match your look, with colors measured. Your brand stays steady.Antislop Layout Mobileby miqdadbadjuber · 5K installsAntislop Layout Mobile is the responsive layout part of antislop: breakpoints where content breaks, mobile scale, collapsing grids, no overflow, 44px tap targets and mobile navigation, with a checklist.↻Layouts that reflow at every width.
Design Flowby julianoczkowski · 5K installsThe design flow skill runs the full design-to-build workflow as a guided sequence: grilling, design brief, information architecture, design tokens, task planning and frontend build, with review on request.↻Takes features from idea to UI.
Appllama App Design Skillby appllama · 5K installsBuilds phone screens that feel like real iPhone apps.↻Each new screen is checked until it feels native. Your app looks more polished.
Uniwindby uni-stack · 4K installsUniwind skill covers Tailwind CSS v4 styling for React Native with Uniwind: setup, Metro config, global.css themes, className and accent- props, variants, withUniwind, safe areas and troubleshooting.↻React Native styles follow Uniwind rules.
Material 3by hamen · 3K installsThe material 3 skill implements Google's Material Design 3: Jetpack Compose Material3 first, plus Flutter and limited web, covering tokens, components, adaptive layout, theming, M3 Expressive and a compliance audit.↻Your UI stays Material 3 compliant.
Layer Art Directionby layerai · 3K installsThe layer art direction skill sets a direction before volume generation on Layer: production-term style names, single-axis moodboards, palettes, framing and storyboards.↻An agreed look before volume generation.Layer Game Assetsby layerai · 3K installsThe layer game assets skill produces in-game art on Layer that fits a system: on-model character casts, rig-ready characters, parallax backgrounds and icon sets that read at small size.↻New assets that match the set.
Motion Art Directionby iart-ai · 3K installsThe motion art direction skill makes the creative calls for a motion graphics piece: tone, pacing, a motion-language spec, motion hierarchy, restraint and a consistency check across shots.↻Every shot follows one motion language.
Template Builder UIby sentdm · 3K installsThe template builder ui skill designs and audits tenant-facing Sent template editors: draft model, variable entities, validation, SMS, WhatsApp and RCS previews, lifecycle states and safe review submission.↻Template editors save valid Sent payloads.
Chakra UI Refactorby chakra-ui · 3K installsChakra ui refactor reviews, converts and improves UI code with Chakra UI v3, from plain HTML, Tailwind, CSS Modules or styled-components, checking accessibility, responsiveness, tokens and v3 API use.↻Components stay accessible and v3-correct.Animation Principlesby iart-ai · 3K installsThe animation principles skill decides how things should move: timing, easing curves, stagger, weight and rhythm, returning concrete durations, cubic-bezier values and spring settings, for designers and motion developers.↻Motion never feels stiff again.Color in Motionby iart-ai · 3K installsThe color in motion skill helps motion designers build restrained palettes, premium gradients and smooth OKLCH color transitions, and fix washed-out or gamma-shifted video renders.↻Gradients without muddy midpoints.Logo Animationby iart-ai · 3K installsThe logo animation skill helps designers and developers animate a brand mark for web, video or app splash with one clear technique, a reduced-motion path and a static fallback frame.↻Every logo reveal ships clean.
Color Systemby owl-listener · 2K installsThe color system skill helps agents build a product color system from scratch: tonal scales, neutral and semantic palettes, usage guidance and contrast rules for AA and AAA.↻Every color pair passes contrast.Dark Mode Designby owl-listener · 2K installsThe dark mode design skill helps agents adapt an existing light palette to dark mode: surface elevation, desaturated colors, off-white text, contrast rebalancing and media handling.↻Dark mode stays readable everywhere.
Layers Interaction Flowby jamiemill · 2K installsThe layers interaction flow skill helps product designers map places, affordances, edge cases and failure paths with breadboards before any visual design.↻Flows mapped with every edge case.
Blender Modelingby roble3 · 2K installsThe blender modeling skill helps 3D artists and developers create meshes in Blender through MCP: primitives, hard-surface stacks, booleans, mirror and array modifiers, and clean topology.↻Clean meshes built step by step.Layers Surfaceby jamiemill · 2K installsLayers surface is a skill for product designers that audits the surface layer against the layers below: vocabulary, object consistency, completeness, feedback and errors, hierarchy, emotional register and accessibility.↻Surface matches the model below.
Paperclip Design Guideby paperclipai · 361 installsThe Paperclip Design Guide skill covers the Paperclip UI design system: tokens, typography scale, status and priority systems, component tiers, composition patterns, layout and the /design-guide showcase page.↻Keep components and design guide synced.
UI4 Reviewby payloadcms · 78 installsThe ui4 review skill helps Payload UI developers review and auto-fix UI4 CSS migrations so components use spacing, radius, elevation and semantic color tokens instead of hardcoded values.↻CSS uses tokens, not hardcoded values.UI4by payloadcms · 9 installsThe ui4 skill helps Payload UI developers reskin components to match a Figma design: icon scan, SCSS to CSS migration, variant matrix, token-based restyle, Playwright checks and variant e2e tests.↻One component reskinned to match Figma.
Frontend Designby Anthropic · 1M installsThe frontend design skill from Anthropic guides your agent to build distinctive, production-grade interfaces instead of the usual generic look.No habit yet
Tasteby Leonxlnx · 656K installsThe taste skill gives your agent art direction for frontend work and makes it check the result in a browser, so the UI looks designed rather than generated.No habit yetUI UX Pro Maxby nextlevelbuilder · 408K installsThe ui ux pro max skill gives your agent a large library of design rules, styles and palettes to pick from when it builds an interface.No habit yet
Impeccableby Paul Bakaus · 351K installsThe impeccable skill is a design language with audit commands.No habit yetClaude Design skills, answered.
What are the best Claude design skills?
The list above starts with the ones people install most that already have a habit. Each card says what the skill does and what its habit does by itself.
What is the difference between a skill and a habit?
A skill works once, when you ask. A habit runs the skill by itself: it starts on a schedule or event, checks its own work and keeps notes.
How do I use these design skills?
Paste the setup prompt above into Claude Code, Codex or Cursor. Your agent then finds the right skill for each task.