bergside/awesome-design-md-skills
60 skills6.1k installs131k starsGitHub
Install
npx skills add https://github.com/bergside/awesome-design-md-skillsSkills in this repo
1GlassmorphismTeaches frosted-glass UI patterns: semi-transparent panels, backdrop-filter blur, luminous borders, and layered depth for cards, navigation, modals, and hero sections while preserving legibility and accessibility.170installs2Cleanclean from awesome-design-md-skills encodes a minimalist UI direction for Claude Code frontend work, emphasizing clarity, whitespace, and restrained ornamentation. It suits SaaS products, content sites, and mobile apps that need a modern, uncluttered interface without bespoke design research.158installs3ShadcnDirects implementation of shadcn/ui with Radix and Tailwind: accessible buttons, inputs, dialogs, data tables, and theme tokens for modern React and Next.js SaaS interfaces with consistent variants.152installs4ContemporaryGuides agents to implement contemporary web UI: balanced whitespace, readable type scales, crisp components, and restrained motion suited to SaaS dashboards, marketing sites, and mobile-first product shells.139installs5MaterialApplies Google Material Design principles to frontend builds: semantic color roles, elevation layers, shaped surfaces, standard controls, and motion patterns for cohesive web and hybrid mobile experiences.136installs6EnterpriseEnterprise is a design skill that instructs the agent to author design-system guidance for a clean, high-contrast enterprise aesthetic aimed at data-driven workflows. A developer uses it while building UI so components follow consistent tokens, states, and accessibility rules. It supplies a token set (colors, Ubuntu/Oswald typography, spacing) and a required output structure covering component anatomy, accessibility acceptance criteria, and a QA checklist.125installs7MinimalMinimal is a design-system guideline authoring skill that produces implementation-ready UI rules for a stripped-back, whitespace-heavy aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors clean typography and restrained color for clarity and focus.117installs8PremiumPremium is a design-system guideline authoring skill that produces implementation-ready UI rules for an Apple-inspired refined aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors precise spacing, modern typography, and a polished visual language.116installs9EditorialA design-system guideline skill for the editorial aesthetic: a magazine-inspired layout with refined serif typography, structured grids, and elegant reading experiences. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent editorial styling guidance from a Claude agent.114installs10BrutalismThis skill makes the agent a design-system guideline author for the Brutalism style, a raw anti-design aesthetic inspired by 1950s concrete architecture with unadorned elements, jarring layouts, and functional minimalism. It supplies concrete tokens (Darker Grotesque typography, a #DD614C primary, a 4/8/12/16/24/32 spacing scale), WCAG 2.2 AA rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep a deliberately raw, unpolished UI consistent and still accessible.111installs11ColorfulA design-system guideline skill for the colorful aesthetic: vibrant, high-contrast palettes and gradients for engaging, memorable interfaces. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent vibrant styling guidance from a Claude agent.111installs12CorporateA design-system guideline skill for the corporate aesthetic: professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent enterprise styling guidance from a Claude agent.111installs13BentoThis skill makes the agent a design-system guideline author for the Bento style, a modular grid layout of card-like blocks in varying sizes for organized, scannable interfaces. It supplies concrete tokens (Inter typography, a #FAD4C0 primary, an #FFF5E6 surface, a 4/8/12/16/24/32 spacing scale), WCAG 2.2 AA accessibility rules, and a required output structure with component rules and a QA checklist. A developer uses it to build clean, scannable bento-grid layouts consistently.110installs14NeobrutalismNeobrutalism is a design-system guideline authoring skill that produces implementation-ready UI rules for a modern brutalist aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors bold borders, vivid accents, and raw high-contrast layouts on warm surfaces.110installs15DoodleA design-system guideline skill for the doodle aesthetic: a creative, playful, informal style using doodles, sketches, handwritten fonts, and imperfect lines. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent hand-drawn styling guidance from a Claude agent.109installs16CreativeA design-system guideline skill for the creative aesthetic: playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent expressive styling guidance from a Claude agent.108installs17AntThis skill makes the agent a design-system guideline author for the Ant style, a structured, enterprise-focused system emphasizing clarity, consistency, and efficiency for data-dense web applications. It supplies concrete tokens (Plus Jakarta Sans typography, a #1677ff primary, a 4/8/12/16/24/32 spacing scale), WCAG 2.2 AA accessibility rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep dense, enterprise admin UIs consistent and accessible.107installs18RefinedRefined is a Claude skill that makes the agent a design-system guideline author for a modern, minimal style with elegant serif typography (Playfair Display) and understated, sophisticated palettes. It specifies design tokens, a 12/14/16/20/24/32 type scale, and a required structure covering component rules, accessibility acceptance criteria, and a QA checklist. A developer uses it when they want a curated, minimal-but-elegant look for a product UI.107installs19BoldThis skill makes the agent a design-system guideline author for the Bold style, defined by heavyweight typography, high-contrast colors, and commanding layouts with a strong visual presence. It supplies concrete tokens (Archivo Black display typography, a #0077BC primary, a dark #111111 surface, a 4/8/12/16/24/32 spacing scale), WCAG 2.2 AA rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep a high-impact, heavyweight UI consistent and accessible.106installs20CosmicA design-system guideline skill for the cosmic aesthetic: a futuristic, sci-fi-inspired style with dark themes, vibrant neon accents, and immersive spatial elements. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent sci-fi styling guidance from a Claude agent.106installs21NeumorphismNeumorphism is a design-system guideline authoring skill that produces implementation-ready UI rules for a soft, tactile extruded aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It relies on inner and outer shadows on monochromatic surfaces for an embedded look.106installs22SleekSleek is a Claude skill that turns the agent into a design-system guideline author for a modern, minimalist 'less is more' aesthetic focused on clean lines, high functionality, and reduced cognitive load. It uses a limited, intentional palette (the 60-30-10 rule), subtle interactions, an 8pt baseline grid, and Inter typography. A developer invokes it when they want a clean, low-cognitive-load minimalist product UI.106installs23ProfessionalProfessional is a design-system guideline authoring skill that produces implementation-ready UI rules for a polished, business-ready aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors modern typography, structured layouts, and a trustworthy visual identity.105installs24ArtisticThis skill makes the agent a design-system guideline author for the Artistic style, a high-contrast, expressive look with creative typography and bold color for visually striking interfaces. It supplies concrete tokens (Limelight display typography, a #3B82F6 primary, a 12/14/16/18/24/30/36 type scale), full WCAG 2.2 AA accessibility rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep an expressive, striking UI consistent and accessible.104installs25FlatFlat is a design skill that instructs the agent to author design-system guidance for a two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects like shadows or gradients. A developer uses it while building fast, functional UI that favors clarity over ornamentation. It supplies Inter typography and color tokens plus a required output structure covering component rules, empty/loading/error states, accessibility, and a QA checklist.104installs26FuturisticFuturistic is a design skill that instructs the agent to author design-system guidance for a forward-looking aesthetic with tech-inspired typography, modern layouts, and a sleek, innovation-driven look. A developer uses it while building modern product UI that needs consistent tokens and components. It supplies color and Roboto/Audiowide typography tokens plus a required output structure covering component rules, accessibility criteria, and a QA checklist.104installs27NeonNeon is a design-system guideline authoring skill that produces implementation-ready UI rules for an electric, glow-driven aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors high-contrast color pairings for bold, attention-grabbing interfaces.104installs28AgenticThis skill turns the agent into a design-system guideline author for the Agentic style, a conversational AI-first interface with minimal controls and delegated task flows. It supplies concrete tokens (Playfair Display typography, an #FF5701 primary, an 8pt baseline grid), accessibility rules to WCAG 2.2 AA, and a required output structure covering tokens, component rules, and a QA checklist. A developer uses it to keep an AI-first UI consistent, accessible, and token-driven.103installs29ClaymorphismA design-system guideline skill for the claymorphism aesthetic: soft, rounded, 3D-like puffy shapes that mimic malleable colorful clay. It has an agent author implementation-ready UI rules, design tokens, and component states from a fixed foundation. A developer uses it when they want a Claude agent to produce consistent styling guidance for a claymorphism-styled interface.103installs30GradientGradient is a design skill that instructs the agent to author design-system guidance for a modern, playful aesthetic built on smooth color transitions and gradient-rich surfaces for visual depth. A developer uses it while building interfaces that need consistent gradient tokens and components. It supplies color and Montserrat/Space Grotesk typography tokens plus a required output structure covering component rules, expanded accessibility criteria, and a QA checklist.103installs31ModernModern is a design-system guideline authoring skill that produces implementation-ready UI rules for a contemporary editorial aesthetic with serif typography. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It pairs editorial serif type with minimal palettes and clean layouts.103installs32StorytellingStorytelling is a Claude skill that turns the agent into a design-system guideline author for a narrative-driven style that uses visuals, copy, and interaction to guide users through cohesive, emotionally resonant journeys. It sets design tokens (Inter primary, Abril Fatface display) and a required output structure covering component rules, accessibility criteria, and a QA checklist. A developer invokes it when building UI meant to feel like a guided, memorable narrative experience.103installs33VibrantVibrant is a design-system guideline skill from typeui.sh for a lively, colorful UI with bold playful typography. It provides a purple/warm-accent color palette, a defined type scale, an 8-point spacing scale, and a required output structure plus QA checklist for authoring design-system docs. A developer uses it when generating consistent, accessible design guidance for an energetic brand.103installs34VintageVintage is a design-system guideline skill from typeui.sh that revives a 1950s-1990s aesthetic with skeuomorphic touches, grainy textures, and pixel-style typography. It supplies a teal/silver retro palette, a Silkscreen pixel font, a fixed type and spacing scale, and an authoring workflow with accessibility acceptance criteria. A developer uses it to generate retro design-system documentation.103installs35CafeThis skill makes the agent a design-system guideline author for the Cafe style, a cozy cafe-inspired interface blending warm tones, soft typography, and clean layouts for a relaxed browsing experience. It supplies concrete tokens (Poppins typography, a #5D4432 brown primary, an #F9F7F5 surface, a 2/4/8/12/16/24/32/48 spacing scale), WCAG 2.2 AA rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep a warm, relaxed interface consistent and accessible.102installs36DitheredA design-system guideline skill for the dithered aesthetic: a dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent retro styling guidance from a Claude agent.102installs37PaperPaper is a design-system guideline authoring skill that produces implementation-ready UI rules for a print-inspired, paper-textured aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors minimal color and clean serif/sans typography with tactile surface qualities.102installs38RetroRetro is a Claude skill that turns the agent into a design-system guideline author for a throwback, vintage-inspired style with high-contrast palettes and nostalgic visual elements. It sets design tokens, a Macondo display typeface, and a required output structure covering component rules, accessibility criteria, and a QA checklist. A developer invokes it when they want a nostalgic, high-contrast retro aesthetic for a UI.102installs39MonoMono is a design-system guideline authoring skill that produces implementation-ready UI rules for a monospace-driven, matrix-inspired aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors high-contrast, compact-density layouts with a hacker-chic feel.101installs40SpaciousSpacious is a Claude skill that makes the agent a design-system guideline author for a whitespace-first style using generous white space, consistent padding, and a 4- or 8-point grid to create clean, readable interfaces. It sets design tokens (Open Sans primary, Montserrat display, IBM Plex Mono) and a required output structure covering component rules, accessibility criteria, and a QA checklist. A developer invokes it when they want breathing-room, grid-based layouts.101installs41TetrisTetris is a design-system guideline skill from typeui.sh that hands an agent a fixed set of visual tokens for a playful, block-game inspired UI. It supplies primary/secondary/success color tokens, the Bangers display font, a compact spacing density, and do/don't authoring rules. A developer uses it when generating implementation-ready design-system documentation for a bold, high-energy interface.101installs42DramaticA design-system guideline skill for the dramatic aesthetic: high-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent bold, attention-grabbing styling guidance from a Claude agent.100installs43FantasyFantasy is a design skill that instructs the agent to author design-system guidance for a game-inspired fantasy aesthetic with bold, premium visuals and rich color palettes. A developer uses it when building game or immersive-themed UI that needs consistent tokens and components. It supplies color and New Rocker typography tokens plus a required output structure covering component rules, accessibility criteria, and a QA checklist.100installs44FriendlyFriendly is a design skill that instructs the agent to author design-system guidance for an approachable, intuitive aesthetic with rounded elements, ample whitespace, and soft pastel color palettes. A developer uses it while building welcoming, engaging UI that needs consistent tokens and components. It supplies color and Noto Serif Display typography tokens plus a required output structure covering component rules, accessibility criteria, and a QA checklist.100installs45LingoLingo is a design skill that instructs the agent to author design-system guidance for a Duolingo-inspired aesthetic combining minimal layouts with bright colors, rounded shapes, tactile 3D-like borders, and friendly illustrations. A developer uses it while building approachable, gamified UI that needs consistent tokens and components. It supplies Nunito typography and color tokens plus a required output structure covering component rules, accessibility, and a QA checklist.100installs46SkeumorphismSkeumorphism is a Claude skill that makes the agent a design-system guideline author for a skeuomorphic UI/UX approach that mimics real-world textures, materials, and 3D functionality to make interfaces feel intuitive and familiar. It sets design tokens (Roboto primary, Germania One display, #FA3C00 primary) and a required output structure covering component rules, accessibility criteria, and a QA checklist. A developer invokes it when they want textured, physical-metaphor UI surfaces.100installs47ExpressiveExpressive is a design skill that instructs the agent to author design-system guidance for a vibrant, personality-driven aesthetic with bold colors, playful graphics, and dynamic layouts. A developer uses it while building UI that needs a strong personality without losing structure. It supplies color and IBM Plex Mono typography tokens plus a required output structure covering component rules, accessibility criteria, and a QA checklist.99installs48LevelsLevels is a design skill that instructs the agent to author design-system guidance for a conversion-focused aesthetic that removes friction, builds trust, and guides users toward a specific action through clarity and speed. A developer uses it while building landing or conversion UI that needs consistent tokens and components. It supplies Inter typography and color tokens plus a required output structure covering component rules, accessibility, and a QA checklist.99installs49PacmanPacman is a design-system guideline authoring skill that produces implementation-ready UI rules for a retro arcade aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It favors pixel fonts, dotted borders, and playful high-contrast 8-bit visuals.99installs50PerspectivePerspective is a design-system guideline authoring skill that produces implementation-ready UI rules for a spatial-depth aesthetic. A developer uses it to convert a design intent into design tokens, component anatomy, interaction states, and accessibility criteria. It uses isometric views, vanishing points, and layered elements to create a sense of 3D-like realism.99installs51ClaudeThis skill makes the agent a design-system guideline author for the Claude style, a research-journal aesthetic on warm ivory parchment with near-black slate ink, a single earthy clay accent, and typography-driven emphasis. It supplies concrete tokens (Anthropic Sans typography, a 12/14/16/20/24/32 type scale, hard-edged contrast, zero shadows, flat 0px-corner buttons), WCAG 2.2 AA rules, and a required output structure with component rules and a QA checklist. A developer uses it to keep an editorial, almost achromatic interface consistent.65installs52CodexA design-system guideline skill for the 'codex' aesthetic: a radically minimal, edge-to-edge blank-canvas interface where typography carries the visual weight and black is the only filled color and divider. It has an agent author implementation-ready UI rules, tokens, and component states. A developer uses it to get consistent minimalist styling guidance from a Claude agent.62installs53ImpeccableImpeccable is a design skill that instructs the agent to author design-system guidance for a modern, graphic, editorial-poster aesthetic built on alternating cream and burnt-orange sections with an amber brand color. A developer uses it while building editorial or marketing UI that needs consistent tokens and components. It supplies color and Chakra Petch typography tokens plus a required output structure covering component rules, accessibility, and a QA checklist.62installs54SegaSega is a Claude skill that turns the agent into a design-system guideline author for a playful, arcade-inspired game interface. It is built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that press into solid offset blocks, and cards wrapped in rainbow-ringed shadows that read like cabinet trim. A developer invokes it when building a retro-arcade or game-style UI.62installs55FictionFiction is a design skill that instructs the agent to author design-system guidance for a playful, cartoonesque interface inspired by children's-book illustrations with warm cream backgrounds, thick black outlines, and rounded shapes. A developer uses it when building storybook-styled UI that needs consistent tokens and components. It supplies color and Cossette Texte typography tokens plus a required output structure covering component rules, accessibility, and a QA checklist.61installs56ImmersiveImmersive is a design skill that instructs the agent to author design-system guidance for an interactive, exhibit-style interface that blends storytelling, animation, and gamified elements on a single continuous brand-colored canvas. A developer uses it when building experience-driven UI that needs consistent tokens and components. It supplies color and Oswald typography tokens plus a required output structure covering component rules, accessibility, and a QA checklist.61installs57MatrixMatrix is a design-system guideline authoring skill that produces implementation-ready UI rules for a dark, terminal-inspired Matrix aesthetic. A developer uses it to turn a visual intent into concrete design tokens, component anatomy, interaction states, and accessibility acceptance criteria. It defines a mono typography scale, a single green accent, and hairline-bordered dense layouts.61installs58RisoRiso is a Claude skill that makes the agent a design-system guideline author for a playful two-color risograph print aesthetic. It builds on a warm off-white paper surface, a fluorescent pink (#F237A1) as the sole interaction driver, and a federal-blue (#2C40A7) secondary carrying headings and an offset print-shadow, all set in Space Grotesk. A developer invokes it when they want a printed-zine, risograph look for a UI.61installs59SketchSketch is a Claude skill that turns the agent into a design-system guideline author for a friendly, hand-drawn interface inspired by pencil illustrations on warm cream paper. It uses soft teal (#1DAD97) accents, hand-written display headings in Delicious Handrawn, rounded pill controls, dashed card outlines, and chunky pencil-drawn offset shadows. A developer invokes it when they want a tactile, illustrated, hand-drawn feel for a UI.61installs60TerracottaTerracotta is a Claude skill that makes the agent a design-system guideline author for a sun-baked, clay-toned editorial style built on warm cream surfaces, ink-brown DM Serif Display headlines, and a single terracotta (#C56A3C) accent. It is content-first and tuned for long-form reading, blogs, and storytelling layouts where readability and visual rhythm matter. A developer invokes it when building earthy, editorial, reading-focused interfaces.61installs