bergside/awesome-design-skills
60 skills26.6k installs131k starsGitHub
Install
npx skills add https://github.com/bergside/awesome-design-skillsSkills in this repo
1Glassmorphismglassmorphism is a Design & UI/UX skill from bergside/awesome-design-skills for building frosted-glass panels that layer translucent surfaces over gradients or photography. The skill targets modern dashboards, AI copilot shells, media players, and premium mobile settings screens where depth and hierarchy come from blur, opacity, and backdrop filters rather than flat cards. Developers reach for glassmorphism when a React, Vue, or native UI needs a polished glass surface treatment with readable contrast, border highlights, and layered depth without rebuilding the entire design system from scratch.570installs2Premiumpremium is a universal design-system skill in bergside/awesome-design-skills authored by typeui.sh with an Apple-inspired visual language and MIT license. The skill defines a typography scale at 12, 14, 16, 18, 24, 30, and 36 pixels using Inter and JetBrains Mono across nine font weights, a semantic color palette with primary, neutral, success, warning, and danger tokens, and a spacing scale of 4, 8, 12, 16, 24, and 32 pixels. Developers reach for premium when implementing pricing pages, checkout experiences, or SaaS dashboards that need restrained palettes, generous whitespace, subtle gradients, and WCAG 2.2 AA keyboard-first interactions with visible focus states. The skill requires outputs covering tokens, component anatomy, interaction states, anti-patterns, and a code-review QA checklist anchored to concrete thresholds rather than vague adjectives.537installs3Editorialeditorial is a design-system skill from bergside/awesome-design-skills for magazine-inspired layouts with refined serif typography and structured reading experiences. It defines a typography scale at 14, 16, 18, 24, 32, and 40 pixels using Gelasio for primary and display type plus Ubuntu Mono for code, nine font weights, and an 8pt baseline spacing grid with semantic color tokens such as primary #111111 and surface #FFFFFF. Accessibility requirements target WCAG 2.2 AA, keyboard-first interactions, 44px or larger touch targets, reduced-motion support, and testable acceptance criteria in a required output structure for engineers. Use editorial when content is the primary conversion surface and you need column grids, pull quotes, and typographic hierarchy rather than dashboard component patterns.502installs4Minimalminimal is a bergside/awesome-design-skills recipe for building interfaces that communicate without visual noise. The skill steers palette restraint, whitespace rhythm, and typography hierarchy when scaffolding SaaS dashboards, marketing landers, or mobile screens. Developers reach for minimal when AI-generated UI drafts feel cluttered, over-colored, or decoration-heavy and they want a calm, readable baseline before adding brand accents. minimal favors layout clarity and readable type scales over ornamental components, making it a fast pass for early frontend mocks and design-system alignment.488installs5Neobrutalismneobrutalism is a bergside/awesome-design-skills design-system skill for modern brutalist interfaces with bold borders, vivid accents, and raw high-contrast layouts on warm surfaces. Install via npx typeui.sh pull neobrutalism into agent skill paths. Foundations specify a six-step typography scale (13/15/17/21/27/35), Inter and JetBrains Mono fonts, nine weights, a six-value spacing scale (4/8/12/16/24/32), and semantic color tokens including primary #FDC800 and surface #FBFBF9. WCAG 2.2 AA accessibility, keyboard-first interactions, and visible focus states are required. The seven-section required output structure covers context, tokens, component rules, accessibility criteria, content tone, anti-patterns, and a QA checklist. A six-step guideline authoring workflow restates intent, defines tokens before components, specifies anatomy and states, and ends with reviewable acceptance criteria. Developers reach for neobrutalism when shipping marketing sites, SaaS landings, or browser-extension UIs that need thick borders, hard shadows, and playful offset blocks instead of generic corporate styling.483installs6Enterpriseenterprise is an MIT-licensed universal design-system skill from typeui.sh that produces implementation-ready guidance for dark cloud-platform dashboards inspired by Heroku, Vercel, and GitHub aesthetics. Style foundations specify IBM Plex Sans typography at scales 12/14/16/20/24/32, an 8pt baseline grid, glass-like panels, and semantic color tokens including primary #0C5CAB on surface #09090b. Accessibility targets WCAG 2.2 AA with keyboard-first interactions, 44px+ touch targets, reduced-motion support, and testable acceptance criteria. The required output structure spans seven sections from context and tokens through anti-patterns and a code-review QA checklist. Developers reach for enterprise when scaffolding admin consoles, data-dense tables, role-aware navigation, or audit-friendly forms that must feel reliable to B2B SaaS buyers without improvising tokens ad hoc.481installs7Neumorphismneumorphism is a Claude Code agent skill from bergside/awesome-design-skills that teaches developers how to build soft neumorphic interface elements using subtle inset and outset box shadows. The skill targets dashboards, mobile app screens, and browser plugin UIs that benefit from gentle tactile depth while staying flatter than classic skeuomorphic design. Developers reach for neumorphism when cards, buttons, and panels should feel pressable and dimensional against a monochromatic or near-monochromatic background. The skill focuses on shadow pairing, highlight placement, and contrast constraints that keep neumorphic controls readable and accessible. Use it during frontend implementation when a utilitarian flat UI needs physical affordance without ornate textures or realistic materials.478installs8Futuristicfuturistic is an MIT-licensed universal design-system skill from typeui.sh for forward-looking interfaces on AI tools, developer platforms, and hardware-adjacent products. Style foundations use a desktop-first expressive typography scale with Roboto as primary, Audiowide for display, and Anonymous Pro for monospace accents. Color tokens include primary #3B82F6, secondary #8B5CF6, and surface #FFFFFF with spacing at 4/8/12/16/24/32. Accessibility targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Like its sibling skills, futuristic follows a six-step authoring workflow and required seven-section output covering tokens, component states, anti-patterns, and a QA checklist. Developers reach for futuristic when products need glass, glow, monospace accents, and sci-fi dashboard cues without sacrificing testable accessibility criteria.470installs9Bentobento is a bergside/awesome-design-skills design-system skill that teaches agents how to author implementation-ready bento grid guidance for marketing and product UI. The SKILL.md defines a modern clean visual style with a 12/14/16/20/24/32 typography scale using Inter and JetBrains Mono, a 4/8/12/16/24/32 spacing scale, and semantic color tokens such as primary #FAD4C0 and surface #FFF5E6. Developers reach for bento when feature grids, pricing highlights, or dashboard widgets need asymmetric card blocks with clear hierarchy and soft spacing instead of uniform card rows. The skill mandates WCAG 2.2 AA acceptance criteria, keyboard-first interaction states, and a six-step guideline workflow ending in a code-review QA checklist. Required output structure covers tokens, component anatomy, accessibility requirements, anti-patterns, and migration notes so engineers receive concrete rules rather than vague aesthetic adjectives.469installs10RefinedRefined from bergside/awesome-design-skills delivers an elegant editorial aesthetic—muted tones, serif-sans balance, fine borders, and calm spacing—for portfolios, boutiques, and content-led SaaS that need understated sophistication.464installs11Cleanclean is a design-system skill from bergside/awesome-design-skills (MIT license, author typeui.sh) that guides simplicity-focused UI with ample whitespace, legible typography, and restrained color palettes to reduce visual clutter. Style foundations specify a typography scale of 12/14/16/20/24/32 using Roboto primary, Poppins display, and Inconsolata mono across nine weights, plus semantic color tokens including primary #3B82F6 and surface #FFFFFF on an 8pt baseline spacing grid. Accessibility targets WCAG 2.2 AA with keyboard-first interactions, visible focus states, 44px+ touch targets, and reduced-motion support. Developers reach for clean when building landing pages, dashboards, or SaaS product screens that need agent-authored implementation-ready design rules instead of ad hoc styling. Required output structure covers tokens, component anatomy, states, accessibility acceptance criteria, anti-patterns, and a code-review QA checklist. The skill enforces semantic tokens over raw values and explicit interaction states for default, hover, focus-visible, active, disabled, loading, and error variants.460installs12Claymorphismclaymorphism is a design skill from bergside/awesome-design-skills that teaches agents to craft soft, tactile interface elements—cards, buttons, and panels—with rounded surfaces and layered shadows. The approach delivers friendly depth for apps, dashboards, and mobile screens while avoiding ornate skeuomorphic chrome. Developers reach for claymorphism when a product needs warmer, approachable UI polish beyond flat design but lighter than neumorphism or photoreal textures. The skill guides shadow stacks, border radii, color layering, and component recipes agents can translate into CSS, Tailwind, or design-system tokens.457installs13Corporatecorporate is a design agent skill from bergside/awesome-design-skills that implements professional, trust-forward visual systems for B2B and enterprise-facing products. The skill guides typography hierarchy, restrained color palettes, spacing rhythm, and layout patterns suited to SaaS dashboards, B2B landing pages, and executive-ready marketing sites. Developers reach for corporate when a product must signal credibility—financial tools, HR platforms, compliance software, or any interface reviewed by non-technical stakeholders. Output emphasizes clean data presentation, consistent component styling, and conservative accent usage over playful gradients. The skill fits React, Next.js, and component-library frontend workflows during dashboard and marketing page build-out.457installs14Professionalprofessional is a bergside awesome-design-skills module for enterprise-trustworthy interfaces. The skill shapes corporate dashboards, documentation portals, and B2B marketing pages using neutral palettes, clear typographic hierarchy, accessible contrast ratios, and conservative component patterns that read credible in stakeholder reviews. It prioritizes predictable grids, restrained color, and familiar UI conventions over experimental visuals. Developers reach for professional when building admin consoles, customer-facing docs hubs, or marketing pages where design must signal reliability to engineering leads, product managers, and procurement reviewers. The module complements sibling awesome-design-skills entries when a product needs both polished corporate tone and specialized layout patterns like publications or full app chrome.456installs15Shadcnshadcn is a bergside/awesome-design-skills design-system skill that teaches agents to produce shadcn/ui-inspired implementation guidance for minimal, clean interfaces. The SKILL.md sets a monochrome palette with primary #000000, surface #FFFFFF, Geist and Fira Code fonts, and the same 12/14/16/20/24/32 typography scale and 4/8/12/16/24/32 spacing rhythm used across awesome-design-skills entries. Developers reach for shadcn when dashboards, forms, or marketing pages need utility-first component patterns with explicit hover, focus-visible, disabled, loading, and error states. The skill follows a six-step authoring workflow, requires seven structured output sections from tokens through QA checklists, and enforces WCAG 2.2 AA keyboard-first accessibility gates. It pairs conceptually with React implementation skills when agents must align component code to shadcn design tokens and anatomy rules.456installs16Gradientgradient is a design agent skill from bergside/awesome-design-skills that implements cohesive multi-stop gradient systems across common UI surfaces. The skill guides color-stop selection, direction, blending, and consistent application to heroes, buttons, cards, and page backgrounds. Developers reach for gradient when a product needs visual depth and color energy but lacks budget or time for custom illustrations. Output produces harmonized gradient tokens and CSS or Tailwind implementations that scale across a component library. The skill fits SaaS marketing pages, mobile app shells, and content sites during frontend theming. It complements sibling skills like colorful and cosmic but focuses narrowly on gradient craft rather than full brand atmosphere.452installs17Modernmodern is a design-system skill from bergside/awesome-design-skills (MIT license, author typeui.sh) branded around shipping software peacefully with a modern, minimal, clean editorial visual style. Style foundations use a 12/14/16/20/24/32 typography scale with IBM Plex Serif for both primary and display text and JetBrains Mono for code, plus color tokens primary #553F83, secondary #111111, and surface #553F83 with white text. Spacing follows a 4/8/12/16/24/32 scale with WCAG 2.2 AA keyboard-first and visible focus requirements. Developers reach for modern when SaaS apps, mobile flows, or developer-facing surfaces need agent-authored design rules with concrete tokens instead of generic trendy styling advice. Output structure mirrors the clean skill: tokens, component anatomy, states, accessibility criteria, content tone, anti-patterns, and a code-review QA checklist. Rules require semantic tokens over raw values, preserved visual hierarchy, and explicit interaction states across default, hover, focus-visible, active, disabled, loading, and error variants.451installs18SleekSleek from bergside/awesome-design-skills prescribes a modern minimalist look—tight grids, flat or glass surfaces, crisp icons, and lean spacing—for mobile apps, browser extensions, and SaaS dashboards targeting a contemporary dev-tool feel.450installs19StorytellingStorytelling from bergside/awesome-design-skills guides narrative landing design—problem framing, proof sections, payoff CTAs, and scroll chaptering—to validate messaging and conversion for SaaS, ecommerce, and content offers before full build-out.450installs20Colorfulcolorful is a design agent skill from bergside/awesome-design-skills that guides implementation of vibrant, multi-hue visual systems across heroes, cards, buttons, and backgrounds. The skill balances playful color energy with baseline contrast discipline so consumer-facing interfaces stay readable. Developers reach for colorful when a product needs energetic branding—campaign landing pages, youth-oriented apps, or marketing surfaces that should feel lively rather than corporate-minimal. The skill outputs cohesive gradient treatments, accent color pairings, and background patterns without relying on heavy illustration assets. It fits Tailwind, CSS, and component-library frontend workflows during initial UI theming.449installs21BrutalismBuilds brutalist web UI with stark typography, exposed structure, thick borders, and minimal ornamentation for memorable portfolios, zines, and technical brands that reject glossy defaults.447installs22Cosmiccosmic is a design agent skill from bergside/awesome-design-skills that implements dark, space-inspired visual systems for AI products, gaming interfaces, and futuristic brands. The skill guides gradient-rich hero sections, glow effects, depth layering, and celestial motif placement across landing pages and app shells. Developers reach for cosmic when a product needs dramatic atmosphere—LLM tool dashboards, sci-fi games, crypto or AI startups seeking immersive first impressions. Output emphasizes dark backgrounds, neon accent glows, and gradient depth without flat corporate minimalism. The skill fits React, Tailwind, and CSS frontend workflows during hero and dark-theme build-out phases.446installs23DramaticAwesome-design skill for dramatic frontend aesthetics: prescribes high-contrast color drama, large display typography, layered depth, cinematic heroes, and assertive motion for launch pages and premium product shells.445installs24FlatFlat design skill instructs agents to produce minimalist, two-dimensional interfaces with clear hierarchy, simple icon sets, tokenized colors, and grid discipline suited to SaaS tools, mobile apps, and browser extensions.445installs25ArtisticGuides Claude to craft artistic, non-template UI aesthetics: bold typography, cohesive color stories, illustrative tone, and expressive layouts for content sites, mobile apps, and SaaS marketing surfaces that feel intentionally designed.444installs26CreativeAwesome-design skill for creative frontend treatment: encourages expressive typography, vivid palettes, unconventional layouts, and memorable visual motifs when building marketing pages, apps, or branded content experiences.443installs27FriendlyThe friendly skill guides Claude Code to produce approachable, human-centered interfaces with soft shapes, warm palettes, and reassuring patterns ideal for consumer SaaS, mobile apps, ecommerce, and family-oriented products.443installs28MaterialThe material skill steers Claude Code to build interfaces aligned with Google Material Design 3—tokens, components, elevation, motion, and state layers—for Android-consistent web, mobile, and extension experiences.443installs29PaperPaper design skill teaching Claude Code to implement tactile, stationery-inspired UI with textures, grain, soft shadows, and editorial typography for content sites, note products, and ecommerce lookbooks that feel physical and handcrafted.443installs30ContemporaryThe contemporary skill applies widely accepted modern web design norms: airy layouts, rounded inputs and buttons, balanced sans-serif stacks, and light motion so SaaS and content products feel current, credible, and conversion-ready at launch.442installs31BoldGuides agents to implement bold UI aesthetics from bergside/awesome-design-skills: strong display type, vivid accents, and confident layout rhythm for pages that need immediate visual impact while staying readable and on-brand.441installs32VintageVintage from bergside/awesome-design-skills supplies a heritage visual kit—sepia tones, paper textures, distressed borders, and classic type—for ecommerce, blogs, and SaaS campaigns that want authentic retro brand storytelling.441installs33DitheredDithered design skill teaches agents to implement retro halftone and pixel-art aesthetics using constrained palettes, patterned fills, and crisp scaling rules for distinctive creative sites, indie games, and editorial experiences.440installs34DoodleDoodle is a design-oriented skill for generating informal, hand-sketched visuals that make products feel friendly and explorable. It helps teams add character to heroes, empty states, tutorials, and social creatives when polished illustration is too heavy but stock assets feel generic.440installs35NeonNeon design skill from bergside/awesome-design-skills helps agents craft bold, luminous interfaces with glowing accents, dark bases, gradient highlights, and cyberpunk-inspired component patterns for SaaS, content, and game-adjacent experiences.440installs36SkeumorphismHelps agents craft skeuomorphic interfaces that mimic real materials and objects through layered shadows, textures, and dimensional controls—ideal for settings panels, creative tools, and mobile apps prioritizing tactile familiarity.440installs37LevelsThe levels skill guides Claude Code to implement consistent elevation hierarchies—shadow tiers, z-index discipline, and layered surfaces—for dashboards, modals, and mobile UI where depth clarifies structure and focus.439installs38FantasyA design-discovery skill from awesome-design-skills that helps teams define fantasy-themed UI direction, including color systems, typography, motifs, and component styling before frontend build begins.438installs39RetroRetro design skill instructing Claude Code to build nostalgic interfaces with pixel typography, neon palettes, CRT-style overlays, and chunky arcade UI patterns for content sites, game promos, and extensions seeking playful 80s–90s character.438installs40Agenticagentic from awesome-design-skills helps Claude Code design usable agent experiences with clear tool boundaries, progress visibility, and trustworthy human oversight. It supports agent, SaaS, and API products where poor interaction design causes confusion, unsafe automation, or abandoned AI workflows.437installs41AntThe ant skill encodes Ant Design–style enterprise UI conventions for agent-assisted frontend builds: structured forms, data-dense tables, sidebar navigation, and restrained neutral palettes suited to B2B SaaS and admin consoles.437installs42CafeThe cafe skill delivers a warm, hospitality-oriented visual language—cream and espresso tones, soft shadows, serif display type, and intimate card layouts—for lifestyle brands, local businesses, and content sites seeking approachable charm.436installs43ExpressiveThe expressive skill helps Claude Code craft personality-rich UIs with bold typography, editorial layouts, and art-directed sections suited to portfolios, media sites, creator tools, and brand-led SaaS storytelling.436installs44SpaciousSpacious design skill from bergside/awesome-design-skills guides agents to create airy, low-density interfaces with generous margins, wide gutters, calm vertical rhythm, and breathable section spacing for SaaS, editorial, and ecommerce experiences.436installs45MonoMono design skill instructing Claude Code to build monochromatic interfaces using one hue family, neutral grays, and saturation-based emphasis for SaaS dashboards, content sites, and CLI-style web tools with cohesive, disciplined color.434installs46PerspectivePerspective skill from awesome-design-skills directing Claude Code to code 3D-tilted cards, isometric layouts, vanishing-point heroes, and pointer-driven depth for SaaS demos, content showcases, and game-adjacent sites with spatial visual drama.433installs47LingoLingo design skill helps agents standardize product language, microcopy tone, and interface terminology during prototyping so SaaS tools, content products, and agent experiences speak with one clear, on-brand voice before build.432installs48VibrantTeaches agents to deliver vibrant, high-energy interfaces with saturated gradients, neon accents, and bold display type—optimized for creator platforms, consumer apps, and launch pages that must stand out instantly.432installs49PacmanPacman from bergside/awesome-design-skills encodes a retro arcade visual language—bold primaries, pixel edges, maze iconography—for quickly theming games, marketing pages, and SaaS surfaces that need playful 80s nostalgia.431installs50TetrisGuides agents to build Tetris-inspired interfaces using rigid block grids, saturated arcade colors, pixel type, and stacking motifs—effective for casual games, playful developer tools, and nostalgic promotional experiences.430installs51ImmersiveClaude Code skill from bergside/awesome-design-skills that instructs agents to build immersive web interfaces—deep layering, parallax, cinematic sections, and spatial hierarchy—for SaaS landings, portfolios, and content sites that feel three-dimensional instead of flat.408installs52ImpeccableImpeccable design skill equips agents to perform rigorous pre-launch UI quality reviews, enforcing alignment, spacing rhythm, typographic discipline, and complete interaction states so customer-facing surfaces feel meticulously crafted.405installs53ClaudeApplies a Claude-inspired design language: warm neutrals, soft contrast, conversational layouts, and trustworthy typography for AI chat shells, help centers, and product marketing tied to assistant experiences.402installs54SketchDirects agents to produce sketch-style interfaces with imperfect strokes, paper backgrounds, and casual typography—useful for prototypes, creative portfolios, and approachable products that signal work-in-progress authenticity.396installs55CodexThe codex skill targets developer-centric interfaces: documentation portals, API explorers, and technical dashboards with monospace accents, structured reference layouts, and restrained dark-or-light schemes that prioritize clarity for builders.394installs56FictionFiction design skill orients agents toward narrative-rich visual direction for story platforms, literary products, and immersive campaigns, defining atmospheric palettes, editorial rhythms, and metaphorical UI patterns before implementation.394installs57MatrixThe matrix skill helps Claude Code produce data-dense, grid-aligned interfaces—admin tables, analytics matrices, and terminal-style dashboards—with strict alignment, monospace fields, and scannable high-density layouts.390installs58RisoGuides agents to implement risograph-inspired visual design: muted spot colors, paper grain, halftone textures, and imperfect registration for authentic retro print aesthetics in web and mobile interfaces.387installs59TerracottaInstructs agents to implement terracotta-inspired design systems with warm clay hues, muted neutrals, organic shapes, and artisanal textures suited to lifestyle, food, wellness, and boutique ecommerce experiences.387installs60SegaSega design skill from bergside/awesome-design-skills helps agents build retro arcade-inspired interfaces with bold blues, angular chrome, energetic CTAs, and nostalgic typography for game promos, content hubs, and playful branded microsites.386installs