bergside

bergside/awesome-design-md-skills

67 resources in this repository

GitHub
🎯67

🎯Skills67

🎯dashboard🎯Skill

A curated registry of 55+ design system skill files for AI coding agents like Claude Code and Cursor, covering styles from glassmorphism to brutalism. Each SKILL.md contains design tokens, component guidelines, accessibility rules, and implementation specs that instruct AI agents to follow a specific design system.

dashboard
🎯luxury🎯Skill

Part of Awesome Design Skills, a curated registry of 55+ design system skill files for AI agents. This luxury design skill provides design tokens, component guidelines, accessibility rules, and implementation specifications that instruct AI agents to build interfaces following a luxury/professional aesthetic.

luxury
🎯glassmorphism🎯Skill

A design system skill providing implementation-ready guidance for glassmorphism UI effects with frosted glass layers, subtle blur, luminous borders, WCAG 2.2 AA accessibility compliance, and semantic token-based theming.

glassmorphism
🎯clean🎯Skill

A "Modern & Minimal" design system skill from the Awesome Design Skills registry. Provides design tokens, component guidelines, accessibility rules, and implementation specs that instruct AI agents to follow a clean design system when building interfaces.

clean
🎯shadcn🎯Skill

Provides shadcn/ui-inspired design system guidelines with minimal, clean components, a monochrome palette, utility-first patterns, and implementation-ready rules covering typography, color tokens, spacing, accessibility, and component states.

shadcn
🎯contemporary🎯Skill

A design system skill file in the "Modern & Minimal" category from the awesome-design-md-skills registry, providing design tokens, component guidelines, accessibility rules, and implementation specifications that instruct AI agents to follow a contemporary design aesthetic when building interfaces.

contemporary
🎯material🎯Skill

A design system skill providing implementation-ready guidance for Google's Material Design with layered surfaces, dynamic theming, built-in motion, WCAG 2.2 AA accessibility, and responsive cross-platform patterns.

material
🎯enterprise🎯Skill

A clean, high-contrast enterprise design system for data-driven workflows, featuring intuitive drag-and-drop patterns and structured layouts.

enterprise
🎯premium🎯Skill

A premium design system skill with Apple-inspired aesthetics, providing implementation-ready guidance for typography, color tokens, spacing scales, accessibility (WCAG 2.2 AA), and component-level design rules.

premium
🎯editorial🎯Skill

A magazine-inspired editorial design system skill providing implementation-ready guidance with serif typography (Gelasio), structured grids, an 8pt spacing baseline, and WCAG 2.2 AA accessibility compliance. Includes color tokens, typography scales, and writing tone guidelines.

editorial
🎯minimal🎯Skill

A stripped-back design system emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

minimal
🎯colorful🎯Skill

A curated registry of 67 design system skill files for AI coding agents like Claude Code and Cursor. Each skill provides SKILL.md instructions covering typography, color palettes, component rules, accessibility constraints, and quality gates for a specific design style, installable via the TypeUI CLI.

colorful
🎯brutalism🎯Skill

A bold and expressive design system skill file containing design tokens, component guidelines, accessibility rules, and implementation-ready specifications that instruct AI agents to generate UI code following brutalist design principles.

brutalism
🎯corporate🎯Skill

Professional, brand-aligned design skill with structured grids, minimalist layouts, and consistent enterprise patterns for corporate visual design.

corporate
🎯neobrutalism🎯Skill

A neobrutalism design system skill with bold borders, vivid accent colors, and raw high-contrast layouts β€” including Inter typography scale, semantic color tokens, and WCAG 2.2 AA accessibility compliance.

neobrutalism
🎯doodle🎯Skill

A curated collection of design-focused SKILL.md files providing AI agents with visual design principles, UI patterns, and design system knowledge.

doodle
🎯bento🎯Skill

A Bento-style design system skill from the Awesome Design Skills registry, providing AI agents with SKILL.md instructions for generating bento grid-based UI layouts with defined typography, color tokens, spacing scales, accessibility rules, and component patterns.

bento
🎯publication🎯Skill

A design system skill that provides print-inspired visual language guidelines for books, magazines, and reports, including editorial grids, expressive typography scales, color tokens, accessibility standards, and component-level design rules.

publication
🎯creative🎯Skill

A playful, character-driven design system skill with expressive Bangers typography and bold graphics for landing pages and creative projects. Provides AI agents with complete SKILL.md instructions including color tokens, spacing scales, WCAG 2.2 AA accessibility rules, and component patterns.

creative
🎯cosmic🎯Skill

A design system skill for the Cosmic futuristic sci-fi aesthetic, providing implementation-ready guidelines with dark themes, vibrant neon accents, the Audiowide display font, and accessible component rules for building immersive, space-inspired interfaces.

cosmic
🎯bold🎯Skill

A design system skill that provides implementation-ready guidelines for the Bold visual style, featuring heavyweight typography with Archivo Black, high-contrast color tokens, WCAG 2.2 AA accessibility requirements, and structured component rule authoring workflows.

bold
🎯refined🎯Skill

A design system skill implementing a modern minimal style with elegant serif typography using Playfair Display, sophisticated color palettes, and a spacing scale based on 4px increments. Provides implementation-ready guidance covering semantic tokens, accessibility (WCAG 2.2 AA), component anatomy, and interaction states.

refined
🎯sleek🎯Skill

A design system skill for the Sleek modern minimalist aesthetic, providing implementation-ready guidelines with clean lines, an 8pt baseline grid, intentional color palette (60-30-10 rule), WCAG 2.2 AA accessibility, and component-level rules for engineers and designers.

sleek
🎯neumorphism🎯Skill

A design system skill that provides implementation-ready guidelines for neumorphic UI β€” soft, extruded elements with inner and outer shadows on monochromatic surfaces, including design tokens, accessibility requirements (WCAG 2.2 AA), component rules, and a QA checklist.

neumorphism
🎯ant🎯Skill

Design system skill providing structured, enterprise-focused Ant Design guidelines with implementation-ready typography, color tokens, spacing scales, and WCAG 2.2 AA accessibility standards.

ant
🎯professional🎯Skill

A design system skill that provides polished, business-ready design guidelines with modern Poppins typography, structured layouts, and a professional visual identity suited for electronics shop branding.

professional
🎯neon🎯Skill

A high-contrast design system skill featuring electric neon glow effects with bold color pairings (lime green primary, cyan secondary), providing implementation-ready guidance for tokens, components, accessibility, and interaction states.

neon
🎯futuristic🎯Skill

A forward-looking design system skill with tech-inspired typography (Audiowide display font), modern layouts, and an innovation-driven aesthetic, providing implementation-ready guidance for tokens, components, accessibility, and interaction states.

futuristic
🎯flat🎯Skill

Flat design system skill with minimalist two-dimensional elements, vibrant colors, and clean typography β€” removes 3D effects like shadows and gradients to improve loading speeds and offer a clean UI.

flat
🎯vibrant🎯Skill

Vibrant design system with lively, colorful styling, bold Fascinate display typography, warm purple/coral accents, and dynamic visual energy for interfaces that demand attention.

vibrant
🎯agentic🎯Skill

Agentic design system emphasizing conversational AI-first interfaces with minimal controls, clear outcomes, and delegated task flows β€” designed for workflows where users delegate tasks to AI.

agentic
🎯vintage🎯Skill

A design system skill that provides vintage aesthetics inspired by the 1950s-1990s, featuring skeuomorphic elements, grainy textures, retro color palettes, and pixel-style Silkscreen typography for building nostalgic UIs.

vintage
🎯artistic🎯Skill

A design system skill that provides implementation-ready guidelines for a high-contrast, artistic visual style with Limelight typography, defined color tokens, WCAG 2.2 AA accessibility standards, and structured component rules covering states, interactions, and responsive behavior.

artistic
🎯elegant🎯Skill

Design system skill providing a graceful, refined aesthetic with minimal palettes, delicate typography using Google Sans, and implementation-ready design guidance with WCAG 2.2 AA compliance.

elegant
🎯claymorphism🎯Skill

Design system skill for the claymorphism style featuring soft, rounded 3D-like shapes that mimic malleable clay with playful, puffy elements and colorful surfaces.

claymorphism
🎯gradient🎯Skill

A design system skill featuring smooth color transitions and gradient-rich surfaces for modern, playful interfaces, using Montserrat and Space Grotesk typography with a vibrant color palette.

gradient
🎯cafe🎯Skill

Cozy cafe-inspired design system blending warm brown tones, soft Poppins typography, and clean layouts to create a relaxed, inviting browsing experience.

cafe
🎯retro🎯Skill

A design system skill with vintage-inspired typography, high-contrast retro color palettes, and nostalgic visual elements using Macondo font and expressive scale for throwback-themed interfaces.

retro
🎯storytelling🎯Skill

Narrative-driven design system using visuals, copy, and interaction to guide users through engaging, emotionally resonant digital journeys with expressive Abril Fatface typography.

storytelling
🎯paper🎯Skill

Paper-textured, print-inspired design system with minimal colors, clean serif/sans typography, and tactile surface qualities for elegant, understated interfaces.

paper
🎯dithered🎯Skill

Dithered design system skill using dot-pattern rendering to simulate shades with a limited palette, creating nostalgic retro and high-contrast artistic visual styles for modern interfaces.

dithered
🎯application🎯Skill

A purple-themed app dashboard design system skill with top-bar navigation, card-based layouts, and developer-first workflows inspired by Vercel/GitHub aesthetics.

application
🎯modern🎯Skill

A design system skill that provides contemporary editorial style guidelines with IBM Plex Serif typography, minimal color palettes, and clean layouts for polished digital products. Includes WCAG 2.2 AA accessibility standards.

modern
🎯simple🎯Skill

A design system skill providing implementation-ready guidance for a minimal, clean visual style with Inter typography, WCAG 2.2 AA accessibility, semantic design tokens, and structured component rules.

simple
🎯spacious🎯Skill

A design system skill that enforces generous whitespace, consistent padding on a 4/8-point grid, and clean typography using Open Sans and Montserrat. It includes WCAG 2.2 AA accessibility guidelines, semantic token usage, and explicit interaction states.

spacious
🎯tetris🎯Skill

A Tetris-themed design system skill that provides implementation-ready guidelines with playful high-contrast colors, bold Bangers display font, compact high-energy layouts, and WCAG 2.2 AA accessibility compliance.

tetris
🎯mono🎯Skill

A monospace-driven, matrix-inspired design system skill featuring high-contrast elements, compact density, and a hacker-chic aesthetic built on Space Mono and JetBrains Mono typefaces with WCAG 2.2 AA accessibility compliance.

mono
🎯dramatic🎯Skill

A design system skill from the Awesome Design Skills registry, providing SKILL.md instructions and DESIGN.md documentation for AI agents to generate consistent, accessible UI code. Each skill defines brand philosophy, style foundations, component rules, accessibility constraints, and quality gates.

dramatic
🎯skeumorphism🎯Skill

A design system skill that provides implementation-ready guidance for skeuomorphic UI design, mimicking real-world textures, materials, and 3D functionality with defined color palettes, typography scales, spacing systems, and WCAG 2.2 AA accessibility compliance.

skeumorphism
🎯lingo🎯Skill

A design system skill inspired by Duolingo's visual style, applying bright colors, rounded shapes, tactile 3D borders, and friendly illustrations with Nunito typography to create playful and approachable interfaces.

lingo
🎯friendly🎯Skill

Part of a curated registry of 67 design system skill files for AI tools like Claude Code, Cursor, and Codex. Each skill includes SKILL.md with AI-agent instructions (component rules, accessibility constraints, quality gates) and DESIGN.md with human-readable design rationale.

friendly
🎯fantasy🎯Skill

Part of a curated registry of 67 design system skill files for AI-powered tools like Claude Code, Cursor, and Codex. Each skill ships with SKILL.md (AI-agent instructions including tokens, component rules, accessibility constraints, quality gates) and DESIGN.md (human-readable design intent and rationale).

fantasy
🎯levels🎯Skill

A design skill from Awesome Design Skills, a curated registry of 67 design system skill files for AI-powered tools, with SKILL.md for AI-agent instructions and DESIGN.md for human-readable design intent covering typography, color palettes, accessibility, and component rules.

levels
🎯energetic🎯Skill

A design system skill from the Awesome Design Skills registry, providing SKILL.md instructions and DESIGN.md documentation for AI agents to generate consistent, accessible UI code. Each skill defines brand philosophy, style foundations, component rules, accessibility constraints, and quality gates.

energetic
🎯expressive🎯Skill

Official Hugging Face skills that define AI/ML tasks such as dataset creation, model training, and evaluation. Interoperable with Claude Code, Codex, Gemini CLI, and Cursor, with this skill focused on Hugging Face Spaces deployment.

expressive
🎯perspective🎯Skill

A curated registry of 67 design system skill files for AI-powered coding tools, where each skill includes a SKILL.md for AI agent instructions and a DESIGN.md for human-readable design rationale. Installable via the TypeUI CLI.

perspective
🎯pacman🎯Skill

A curated registry of 67 design system skill files for AI-powered tools like Claude Code, Cursor, and Codex, with each skill containing a SKILL.md for AI agent instructions and a DESIGN.md for human-readable design rationale. Covers brand identity, style foundations, component families, accessibility rules, and quality gates.

pacman
🎯claude🎯Skill

A curated registry of 67 design system skill files for AI-powered coding tools, providing SKILL.md and DESIGN.md pairs that cover typography, color, spacing, accessibility, and component rules for various design styles.

claude
🎯sega🎯Skill

A design system skill from a curated registry of 67 design system skill files for AI-powered agentic tools. Each skill provides SKILL.md with component rules, accessibility constraints, typography scales, color palettes, and quality gates for AI agent-driven development.

sega
🎯impeccable🎯Skill

A curated registry of 67 design system skill files for AI tools like Claude Code and Cursor, with each skill providing AI-agent instructions and human-readable design documentation covering brand, typography, color, accessibility, and quality gates.

impeccable
🎯sketch🎯Skill

A curated registry of 67 design system skill files for AI-powered tools like Claude Code, Cursor, and Codex. Each skill ships as a folder with SKILL.md for AI-agent instructions (tokens, component rules, accessibility constraints) and DESIGN.md for human-readable design rationale.

sketch
🎯codex🎯Skill

Part of the Awesome Design Skills registry, offering 67 design system skill files for AI-powered tools with both SKILL.md for agent instructions and DESIGN.md for human-readable design intent and rationale.

codex
🎯riso🎯Skill

A curated registry of 67 design system skill files for AI coding tools like Claude Code and Cursor. Each skill ships with SKILL.md for agent instructions and DESIGN.md for human-readable design rationale.

riso
🎯matrix🎯Skill

A curated registry of 67 design system skill files for AI-powered tools like Claude Code, Cursor, and Codex, with each skill shipping SKILL.md for AI-agent instructions and DESIGN.md for human-readable design intent.

matrix
🎯fiction🎯Skill

Part of Awesome Design Skills, a curated registry of 67 design system skill files for AI-powered tools like Claude Code, Cursor, and Codex. Each skill ships as a folder with SKILL.md (agent instructions for tokens, component rules, accessibility constraints, quality gates) and DESIGN.md (human-readable design intent and rationale).

fiction
🎯immersive🎯Skill

A curated registry of 67 design system skill files for AI agents, each with a SKILL.md for AI instructions and a DESIGN.md for human-readable design rationale covering patterns like glassmorphism, typography, and accessibility.

immersive
🎯terracotta🎯Skill

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, and Codex. Each skill ships as a folder with SKILL.md for AI agent instructions (tokens, component rules, accessibility constraints) and DESIGN.md for human-readable design intent.

terracotta