Design Claude Skills
2 394 design skills from 450 authors. They decide how things look — layout, type and interface behaviour. Half of them fit into 1 928 tokens or less — that is what one costs your context window when the agent loads it. 316 ship runnable scripts rather than instructions alone. 2 of them cannot work without an MCP server, most often rube. We also found 422 copies of these same skills sitting in other people's repositories — counted once here, not 422 times.
2 394 unique 450 authors 8 updated this month 195 from vendors
Framework (OSS). Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Add a new color theme to the Ontology Playground. Use when someone wants to create, author, or plug in a theme, palette, color scheme, dark mode, or light mode, or add an entry to the theme picker. Covers the appStore registration plus the CSS token block.
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.
Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.
Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes
Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.
Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.
A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.
Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.
Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.
Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.
Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.
Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.
Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.
Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.
Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.
Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section
App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.
Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.
Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.