A curated collection of product design systems, UI style references, and design language resources — with companion Claude skills for generating code and guidance in each style.
Each design system and style listed here has a matching Claude skill that teaches Claude to generate components, provide design guidance, and apply that system's principles to your product work.
Apple's translucent, dynamic design language introduced with iOS 26. UI elements refract content, reflect ambient light, and respond fluidly — replacing solid backgrounds with layered glass surfaces.
- Liquid Glass — Apple Developer Documentation - Official reference for implementing Liquid Glass across Apple platforms.
- Human Interface Guidelines - Apple's comprehensive design guidelines including Liquid Glass integration.
- New Design Gallery - Showcase of apps adopting the new Liquid Glass design.
- Preparing Your App for iOS 26 - Practical migration guide for adopting Liquid Glass.
Skill: skills/liquid-glass — Generate Liquid Glass UI components with translucent layers, refraction effects, and HDR-aware styling.
Google's open-source design system featuring dynamic color, expressive motion, and adaptive layouts. Material 3 Expressive (2025) adds 35 new shapes, motion physics, and spatial/AR support.
- Material Design 3 - Official M3 documentation with guidelines, components, and theming.
- Material 3 Expressive - Deep dive into the Expressive update: motion physics, shapes, and color.
- Material Web Components - Official web component library for Material Design.
- Material Design Research - The UX research behind M3 Expressive (46 studies, 18,000+ participants).
Skill: skills/material-design — Generate Material 3 components with dynamic color theming, motion physics, and adaptive layouts.
Enterprise-grade design system by Ant Group with 60+ React components. Built on four values: Natural, Certain, Meaningful, and Growing. The go-to system for data-heavy admin interfaces.
- Ant Design - Official documentation, components, and design resources.
- Design Values - Core design principles: Natural, Certain, Meaningful, Growing.
- Pro Components - Higher-level business components built on Ant Design.
- Ant Design Charts - Data visualization library following Ant Design principles.
- Ant Design Mobile - Mobile-optimized component library.
Skill: skills/ant-design — Generate Ant Design components with enterprise patterns, data tables, forms, and admin layouts.
Microsoft's cross-platform design system built on five pillars: light, depth, motion, material, and scale. Powers Microsoft 365, Windows, and Teams with accessible, coherent experiences.
- Fluent 2 Design System - Official guidelines, principles, and component documentation.
- Fluent UI React - React component library for web applications.
- Fluent Design Principles - Core principles: innovation, clarity, inclusiveness, consistency.
- Windows Design - Windows-specific implementation guidance.
Skill: skills/fluent-design — Generate Fluent 2 components with depth effects, accessible patterns, and cross-platform consistency.
IBM's open-source design system with 30+ components, token-based theming, and strong accessibility focus. Four foundational principles: clarity, efficiency, consistency, and beauty.
- Carbon Design System - Official documentation, components, and design kits.
- Carbon GitHub - Open-source component library (React, Angular, Vue, Svelte).
- Carbon for IBM.com - IBM.com-specific patterns and components.
- IBM Design Language - The foundational design language that Carbon implements.
Skill: skills/carbon-design — Generate Carbon components with token-based theming, enterprise grid layouts, and accessible patterns.
Shopify's design system for building merchant-facing apps. Emphasizes efficiency, intuitiveness, and data-rich interfaces for eCommerce workflows.
- Shopify Polaris - Official component library and design guidelines.
- Polaris Design - Visual design guidance: color, typography, icons, motion.
- Polaris Foundations - Core principles and accessibility standards.
- Building Shopify Apps - Developer documentation for building on Shopify.
Skill: skills/polaris-design — Generate Polaris components for eCommerce admin interfaces with merchant-focused patterns.
Enterprise design system powering Salesforce's CRM platform. Optimized for complex data workflows, scalable interfaces, and team productivity.
- Lightning Design System - Official component library and design guidelines.
- Lightning Web Components - Component framework for building on the Lightning platform.
- Salesforce UX - Design insights and case studies from the Salesforce UX team.
Skill: skills/lightning-design — Generate Lightning components for CRM interfaces, data tables, and enterprise workflows.
Atlassian's design system powering Jira, Confluence, and Trello. Focused on team collaboration patterns and productivity-driven interfaces.
- Atlassian Design System - Official guidelines, components, and brand resources.
- Atlassian Design Tokens - Token-based theming system.
- Atlassian UI Components - Full component library with usage guidelines.
Skill: skills/atlassian-design — Generate Atlassian-style components for team collaboration tools and project management UIs.
Translucent, frosted-glass UI style using background blur, transparency, and layered depth. Evolved from Apple's macOS Big Sur (2020) into a mature functional design layer in 2025–26.
- Glassmorphism CSS Generator - Interactive tool for generating glassmorphism CSS.
- Glassmorphism in UI - Design principles and implementation guide.
- Glass UI - Another CSS generator with copy-paste code snippets.
Skill: skills/glassmorphism — Generate frosted-glass UI components with backdrop blur, transparency layers, and subtle borders.
Soft UI style blending flat design minimalism with subtle 3D depth through inner/outer shadows and monochromatic palettes. Visually striking but requires careful accessibility consideration.
- Neumorphism.io - Interactive CSS generator for neumorphic elements.
- Neumorphism in UI Design - Original article that popularized the style.
- Accessibility Considerations - Contrast and accessibility guidance for soft UI.
Skill: skills/neumorphism — Generate soft-shadow UI components with extruded/inset effects and accessible contrast ratios.
Raw, bold design style with harsh lines, loud typography, visible borders, and high-contrast colors. Inspired by brutalist architecture and early web aesthetics — deliberately in-your-face.
- Brutalist Websites - Gallery of brutalist web design examples.
- Neubrutalism UI Kit - Figma components in neobrutalist style.
- Gumroad's Neobrutalist Redesign - Case study of a major platform adopting neobrutalism.
Skill: skills/neobrutalism — Generate bold, high-contrast UI components with thick borders, raw typography, and visible structure.
Design that mimics real-world materials, textures, and physical objects. The original iOS design language (2007–2013) — highly intuitive but now used selectively for specific contexts.
- Skeuomorphism History - Comprehensive overview from IxDF.
- The Rise and Fall of Skeuomorphism - Historical analysis and modern applications.
Skill: skills/skeuomorphism — Generate realistic, texture-rich UI components that mimic physical materials and objects.
Soft 3D style making UI elements look like colorful clay — rounded, tactile, and playful. Combines neumorphism's depth with vibrant colors and chunky shapes.
- Claymorphism in UI - Design principles and CSS techniques.
- Claymorphism CSS Generator - Interactive generator for claymorphism effects.
Skill: skills/claymorphism — Generate soft, 3D clay-like UI components with rounded shapes, pastel gradients, and playful shadows.
Gradient mesh backgrounds with soft color transitions and animated glowing effects — inspired by the northern lights. An evolution of glassmorphism focused on movement and color depth.
- Mesh Gradient Collection - Curated mesh gradient resources.
- Aurora UI Examples - Gallery of aurora-style interfaces.
- Stripe's Visual Design - Industry-leading example of aurora UI in production.
Skill: skills/aurora-ui — Generate atmospheric UI components with mesh gradients, glowing backgrounds, and animated color transitions.
Clean, content-first design stripped of ornament. Strong typography, generous whitespace, and functional simplicity. The dominant paradigm from 2013 onward, now evolving with subtle depth cues.
- Flat Design History - Evolution from skeuomorphism to flat design.
- Swiss Style / International Typographic Style - Historical roots of minimal UI design.
Skill: skills/flat-minimal — Generate clean, typography-driven UI components with generous whitespace and zero visual noise.
Each design system and style above comes with a Claude skill. Install any skill to teach Claude the principles, patterns, and code generation techniques for that design language.
| Skill | Type | Platforms | Code Output |
|---|---|---|---|
liquid-glass |
Design System | iOS, macOS, visionOS | SwiftUI, CSS |
material-design |
Design System | Web, Android, iOS | React, HTML/CSS |
ant-design |
Design System | Web | React |
fluent-design |
Design System | Web, Windows, iOS | React, HTML/CSS |
carbon-design |
Design System | Web | React, Svelte |
polaris-design |
Design System | Web | React |
lightning-design |
Design System | Web | LWC, HTML/CSS |
atlassian-design |
Design System | Web | React |
glassmorphism |
Style | Any | HTML/CSS, React |
neumorphism |
Style | Any | HTML/CSS, React |
neobrutalism |
Style | Any | HTML/CSS, React |
skeuomorphism |
Style | Any | HTML/CSS, React |
claymorphism |
Style | Any | HTML/CSS, React |
aurora-ui |
Style | Any | HTML/CSS, React |
flat-minimal |
Style | Any | HTML/CSS, React |
- Choosing a Design System - Decision framework for picking the right system for your project.
- Mixing Styles with Systems - How to apply aesthetic styles (glassmorphism, neobrutalism) on top of a foundation system.
- Accessibility Across Styles - Contrast, motion, and readability considerations for each design style.
Contributions welcome! Please read the contributing guidelines first.
- Add it to the appropriate section in this README following the existing format.
- Create a docs page in
docs/design-systems/ordocs/design-styles/. - Create a matching skill in
skills/following the skill template. - Submit a PR.
To the extent possible under law, Jerel Velarde has waived all copyright and related or neighboring rights to this work.