bergside/awesome-design-skills
67 skills13.5k installsGitHub
Install
npx skills add https://github.com/bergside/awesome-design-skillsSkills in this repo
1LuxuryLuxury design skill from bergside/awesome-design-skills guides agents to build premium, high-end interfaces with refined typography, restrained palettes, generous whitespace, and polished component treatments suited to upscale SaaS, ecommerce, and editorial sites.265installs2GlassmorphismGlassmorphism design skill guides agents to implement frosted translucent UI with controlled blur, luminous borders, layered depth, and accessible contrast for premium dashboards, AI interfaces, and contemporary mobile experiences.248installs3DashboardAwesome-design skill focused on dashboard UI: defines card grids, chart zones, filter toolbars, dense tables, and navigation shells for SaaS admin panels and agent analytics consoles that must stay scannable under load.240installs4PremiumPremium from bergside/awesome-design-skills defines a luxury visual system—restrained color, airy spacing, refined type, and subtle depth—for ecommerce, SaaS, and content sites that must signal quality and justify higher price points.236installs5EditorialThe editorial skill structures content-heavy experiences like magazines and blogs: disciplined typographic hierarchy, column layouts, pull quotes, and generous margins that elevate long-form reading and brand storytelling on the web.225installs6MinimalMinimal design skill guiding Claude Code to produce restrained, whitespace-forward interfaces with tight typography systems and limited color for SaaS dashboards, mobile apps, and content sites where clarity and calm reduce cognitive load.225installs7ElegantThe elegant skill imparts a polished, premium frontend aesthetic: careful typographic pairing, muted palettes, precise spacing, and understated ornamentation for SaaS, ecommerce, and services brands that must communicate quality and discretion.219installs8NeobrutalismNeobrutalism skill from bergside/awesome-design-skills guiding Claude Code to code bold UI with thick borders, hard shadows, flat high-contrast fills, and offset blocks for indie SaaS, content landings, and extensions that reject bland corporate polish.218installs9NeumorphismNeumorphism skill from bergside/awesome-design-skills instructs agents to build soft, tactile interfaces using subtle dual shadows, rounded surfaces, and monochromatic palettes for SaaS dashboards, mobile screens, and extension UIs.218installs10FuturisticThe futuristic skill directs Claude Code to build forward-looking, sci-fi-leaning interfaces with dark themes, luminous accents, glass effects, and tech dashboards suited to AI agents, devtools, and innovation-led SaaS.217installs11EnterpriseAwesome-design skill for enterprise frontend patterns: emphasizes trustworthy B2B chrome, information-dense tables, role-aware navigation, conservative styling, and efficient form flows for SaaS products sold to large organizations.214installs12ShadcnTeaches agents to build polished interfaces with shadcn/ui: install primitives, align Tailwind tokens, compose accessible components, and keep variant-driven styling consistent across SaaS dashboards and marketing surfaces.214installs13ColorfulGuides vibrant, multi-hue frontend styling with gradients, saturated accents, and playful backgrounds for consumer-facing pages and apps while keeping text legible and components visually cohesive.212installs14CosmicThe cosmic skill brings a futuristic space aesthetic to frontend builds: deep indigo gradients, subtle star textures, luminous accents, and glassy overlays suited to AI products, games, and bold launch pages seeking wonder and depth.212installs15ClaymorphismImplements claymorphism UI patterns: pillowy rounded elements, subtle inner highlights, and stacked shadows that create approachable 3D depth. Helps agents reproduce cohesive clay-style components across web and mobile product surfaces.211installs16BentoImplements bento-style grids: varied tile sizes, clear visual hierarchy, and responsive spans to showcase features, metrics, and stories on landing pages, product tours, and dashboard summaries.210installs17CorporateCorporate design skill guides agents to build restrained, credible business interfaces with structured grids, professional typography, muted color systems, and conversion-oriented sections suited to SaaS, consulting, and enterprise products.210installs18ModernModern design skill from awesome-design-skills teaching Claude Code to implement contemporary product UI—soft shadows, rounded surfaces, gradient accents, and polished micro-states—for SaaS, mobile, and API-adjacent developer products that look current and credible.210installs19ProfessionalProfessional from bergside/awesome-design-skills standardizes corporate UI—neutral palettes, disciplined hierarchy, accessible contrast, and sober components—for B2B SaaS, API portals, and documentation sites requiring stakeholder credibility.210installs20PublicationPublication design skill from bergside/awesome-design-skills guides agents to build editorial-quality reading experiences with article grids, mastheads, typographic hierarchy, pull quotes, and archive layouts for content sites and long-form SaaS marketing.210installs21ApplicationThe application skill guides construction of complete app experiences: persistent navigation, settings areas, onboarding sequences, and stateful views that feel cohesive across SaaS, mobile web, and extension surfaces.209installs22CleanAwesome-design skill prescribing a clean aesthetic for frontend builds: minimalist layouts, neutral palettes, disciplined spacing, readable type scales, and understated components suited to professional SaaS and content sites.209installs23GradientThe gradient skill helps Claude Code implement polished multi-stop gradients across heroes, buttons, and surfaces with accessible contrast and cohesive brand color pulls for SaaS, mobile, and content sites.209installs24CreativeAwesome-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.208installs25FlatFlat 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.208installs26MaterialThe 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.208installs27ArtisticGuides 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.207installs28PaperPaper 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.207installs29VintageVintage 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.207installs30BrutalismBuilds brutalist web UI with stark typography, exposed structure, thick borders, and minimal ornamentation for memorable portfolios, zines, and technical brands that reject glossy defaults.206installs31FriendlyThe 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.206installs32StorytellingStorytelling 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.206installs33DramaticAwesome-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.205installs34RefinedRefined 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.205installs35DoodleDoodle 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.204installs36FantasyA 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.204installs37NeonNeon 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.204installs38RetroRetro 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.204installs39Agenticagentic 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.203installs40AntThe 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.203installs41LevelsThe 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.203installs42CafeThe 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.202installs43ContemporaryThe 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.202installs44EnergeticThe energetic skill steers Claude Code toward vibrant, high-impact interfaces with saturated colors, bold typography, and lively composition for startups, fitness, entertainment, and youth-oriented SaaS or content products.202installs45SkeumorphismHelps 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.202installs46BoldGuides 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.201installs47DitheredDithered 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.201installs48PerspectivePerspective 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.201installs49ExpressiveThe 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.200installs50MonoMono 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.200installs51SleekSleek 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.200installs52LingoLingo 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.199installs53PacmanPacman 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.199installs54SimpleSimple design skill from bergside/awesome-design-skills teaches agents to build minimalist, clarity-first interfaces with tight hierarchy, sparse decoration, consistent spacing, and readable controls for SaaS tools, API consoles, and utility apps.199installs55TetrisGuides 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.199installs56VibrantTeaches 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.199installs57SpaciousSpacious 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.197installs58ImpeccableImpeccable 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.166installs59ImmersiveClaude 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.164installs60ClaudeApplies 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.163installs61FictionFiction 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.160installs62CodexThe 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.155installs63MatrixThe 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.155installs64SegaSega 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.155installs65RisoGuides 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.154installs66SketchDirects 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.154installs67TerracottaInstructs 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.153installs