Does awesome-design-skills auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is awesome-design-skills free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

awesome-design-skills

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

FLOW.md

bergside@bergside

GitHub

Plugin Signal84/100Strong

maintained78

capable88

documented100

adopted71

Install

$ npx -y skills add bergside/awesome-design-md-skills --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

shadcn/ui Bash GitHub Anthropic OpenAI

2,276

Stars

214

Forks

Maintained

Maintenance

MIT

License

1mo ago

Last commit

5mo ago

Created

Repo: bergside/awesome-design-md-skills

In this plugin

67 skills

See everything inside

What's inside

Skills

/agenticConversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows./antStructured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications./artisticHigh-contrast, expressive style with creative typography and bold color choices for visually striking interfaces./basicPrint-inspired visual language for books, magazines, and reports with editorial grids and expressive typography./bentoModular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces./boldStrong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

Show all 67 skills

/brutalismRaw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism./cafeCozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience./claudeA research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink./claymorphismSoft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces./cleanSimplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter./codexA radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards./colorfulVibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences./contemporaryCurrent-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts./corporateProfessional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns./cosmicFuturistic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements./creativePlayful, character-driven design with expressive typography and bold graphics for landing pages and creative projects./ditheredDot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals./doodleHand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel./dramaticHigh-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention./editorialMagazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences./enterpriseDark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards./expressiveVibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure./fantasyGame-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements./fictionA playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes /flatTwo-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces./friendlyApproachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes./futuristicForward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic./geometricGeometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way./glassmorphismFrosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance./gradientSmooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth./immersiveAn immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)/impeccableA modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color./levelsConversion-focused design that removes friction and guides users toward action through clarity, trust, and speed./lingoPlayful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces./materialGoogle's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns./matrixA cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements /minimalStripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus./modernContemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products./monoMonospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic./neobrutalismModern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces./neonElectric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces./neumorphismSoft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look./pacmanRetro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics./paperPaper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities./perspectiveSpatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism./powerHigh-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences./premiumApple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language./professionalPolished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity./pulseDynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality./refinedCarefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes./retroThrowback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements./risoA playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section /rokuApp dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows./segaA playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks /shadcnShadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns./sketchA friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls./skeumorphismReal-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces./sleekModern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing./spaciousGenerous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces./squareGraceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication./stitchClean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts./storytellingNarrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys./terracottaA sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent./tetrisClassic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts./vibrantLively, colorful design with bold playful typography, warm accents, and dynamic visual energy./vintage1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

Badges

README

Read on GitHub

Awesome Design Skills

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

Each skill now ships as a folder with:

SKILL.md for AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)
DESIGN.md for human-readable design intent, rationale, and implementation notes

Preview all design skills on TypeUI

Design Skills

Quick Start

Pull any design skill directly into your project using the TypeUI CLI:

npx typeui.sh pull <slug>

For example, to pull the Glassmorphism design skill:

npx typeui.sh pull glassmorphism

Or browse all available skills interactively:

npx typeui.sh list

What is a Design Skill?

A design skill is a folder containing SKILL.md and DESIGN.md.

SKILL.md acts as the instruction source for AI agents and LLMs. It contains:

Brand & mission — the design philosophy and visual identity
Style foundations — typography scale, color palette, spacing system
Component families — buttons, inputs, cards, modals, navigation, and more
Accessibility rules — WCAG 2.2 AA compliance, keyboard-first interactions
Writing tone — content and voice guidelines
Do/Don't rules — explicit patterns and anti-patterns
Quality gates — testable acceptance criteria for code review

DESIGN.md is a companion document for human readers and maintainers. It captures:

Design overview — concise summary of the visual direction
Rationale and references — context for why patterns/tokens exist
Maintenance notes — guidance for keeping design decisions aligned over time

When an AI agent reads a skill file, it follows the SKILL.md guidelines to generate UI code that is consistent, accessible, and true to the design system.

Usage

Pull a skill into your project

Use the TypeUI CLI to pull any skill by its slug:

npx typeui.sh pull <slug>

The CLI will fetch the SKILL.md file from this registry and write it to your configured provider paths (e.g., .cursor/skills/, .claude/, etc.). The companion DESIGN.md remains in this repo alongside each skill for reference and maintenance.

Specify providers

Target specific agentic tools when pulling:

npx typeui.sh pull glassmorphism -p cursor,claude

Preview before writing

Use --dry-run to see what would be written without making changes:

npx typeui.sh pull glassmorphism --dry-run

Browse and pull interactively

List all available skills with preview links, then pull one:

npx typeui.sh list

Generate a custom skill

Run the interactive prompts to create your own design system skill:

npx typeui.sh generate

Registry Structure

Each skill lives in its own folder under skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   ├── SKILL.md        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.md
└── ...

The index.json file maps each slug to its skill path:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

When you run npx typeui.sh pull <slug>, the CLI reads this index, resolves the skill path, and fetches the corresponding SKILL.md file. DESIGN.md is stored next to each skill for human-facing documentation.

Contributing

Contributions are welcome! If you'd like to add a new design skill to the registry:

Create a new folder under skills/ with your slug name
Add a SKILL.md file following the existing format
Add a companion DESIGN.md file in the same folder
Add an entry to skills/index.json
Submit a pull request

Please ensure your skill file includes all required sections: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules, and quality gates.

License

MIT License © Built and maintained by Bergside.

More Flows by @bergside.

VerifiedPlugin

Development

typeui

TypeUI is an AI-first platform where you can use design skills, UI prompts, and other resources to enhance AI capabilities to generate better user interfaces and design when building websites and applications.

4 skills

@bergside

View Plugin

FAQ

awesome-design-skills is a Claude Code plugin with 67 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes agentic, ant, artistic. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is awesome-design-skills?: A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.
How do I install awesome-design-skills?: Run these in Claude Code: npx -y skills add bergside/awesome-design-md-skills --agent claude-code. Then prompt normally.
Does awesome-design-skills auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is awesome-design-skills free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

awesome-design-skills

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

FLOW.md

bergside@bergside

GitHub

Plugin Signal84/100Strong

maintained78

capable88

documented100

adopted71

Install

$ npx -y skills add bergside/awesome-design-md-skills --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

shadcn/ui Bash GitHub Anthropic OpenAI

2,276

Stars

214

Forks

Maintained

Maintenance

MIT

License

1mo ago

Last commit

5mo ago

Created

Repo: bergside/awesome-design-md-skills

In this plugin

67 skills

See everything inside

What's inside

Skills

Show all 67 skills

Badges

README

Read on GitHub

Awesome Design Skills

A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.

Each skill now ships as a folder with:

SKILL.md for AI-agent instructions (tokens, component rules, accessibility constraints, quality gates)
DESIGN.md for human-readable design intent, rationale, and implementation notes

Preview all design skills on TypeUI

Design Skills

Quick Start

Pull any design skill directly into your project using the TypeUI CLI:

npx typeui.sh pull <slug>

For example, to pull the Glassmorphism design skill:

npx typeui.sh pull glassmorphism

Or browse all available skills interactively:

npx typeui.sh list

What is a Design Skill?

A design skill is a folder containing SKILL.md and DESIGN.md.

SKILL.md acts as the instruction source for AI agents and LLMs. It contains:

Brand & mission — the design philosophy and visual identity
Style foundations — typography scale, color palette, spacing system
Component families — buttons, inputs, cards, modals, navigation, and more
Accessibility rules — WCAG 2.2 AA compliance, keyboard-first interactions
Writing tone — content and voice guidelines
Do/Don't rules — explicit patterns and anti-patterns
Quality gates — testable acceptance criteria for code review

DESIGN.md is a companion document for human readers and maintainers. It captures:

Design overview — concise summary of the visual direction
Rationale and references — context for why patterns/tokens exist
Maintenance notes — guidance for keeping design decisions aligned over time

When an AI agent reads a skill file, it follows the SKILL.md guidelines to generate UI code that is consistent, accessible, and true to the design system.

Usage

Pull a skill into your project

Use the TypeUI CLI to pull any skill by its slug:

npx typeui.sh pull <slug>

Specify providers

Target specific agentic tools when pulling:

npx typeui.sh pull glassmorphism -p cursor,claude

Preview before writing

Use --dry-run to see what would be written without making changes:

npx typeui.sh pull glassmorphism --dry-run

Browse and pull interactively

List all available skills with preview links, then pull one:

npx typeui.sh list

Generate a custom skill

Run the interactive prompts to create your own design system skill:

npx typeui.sh generate

Registry Structure

Each skill lives in its own folder under skills/:

skills/
├── index.json          # Slug-keyed map for fast CLI lookups
├── glassmorphism/
│   ├── SKILL.md        # AI-agent instruction file
│   └── DESIGN.md       # Human-readable design companion
├── brutalism/
│   ├── SKILL.md
│   └── DESIGN.md
├── minimal/
│   ├── SKILL.md
│   └── DESIGN.md
└── ...

The index.json file maps each slug to its skill path:

{
  "glassmorphism": {
    "slug": "glassmorphism",
    "name": "Glassmorphism",
    "skillPath": "skills/glassmorphism/SKILL.md"
  }
}

Contributing

Contributions are welcome! If you'd like to add a new design skill to the registry:

Create a new folder under skills/ with your slug name
Add a SKILL.md file following the existing format
Add a companion DESIGN.md file in the same folder
Add an entry to skills/index.json
Submit a pull request

Please ensure your skill file includes all required sections: mission, brand, style foundations, component families, accessibility rules, writing tone, do/don't rules, and quality gates.

License

More Flows by @bergside.

VerifiedPlugin

Development

typeui

4 skills

@bergside

View Plugin

FAQ

What is awesome-design-skills?: A curated registry of 67 design system skill files for AI-powered agentic tools like Claude Code, Cursor, Codex, and others. Pull any skill into your project with a single command.
How do I install awesome-design-skills?: Run these in Claude Code: npx -y skills add bergside/awesome-design-md-skills --agent claude-code. Then prompt normally.
Does awesome-design-skills auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is awesome-design-skills free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

awesome-design-skills

Skills

Badges

README

Awesome Design Skills

Design Skills

Quick Start

What is a Design Skill?

Usage

Pull a skill into your project

Specify providers

Preview before writing

Browse and pull interactively

Generate a custom skill

Registry Structure

Contributing

License

Sponsors

File tree

More Flows by @bergside.

typeui

awesome-design-skills

Skills

Badges

README

Awesome Design Skills

Design Skills

Quick Start

What is a Design Skill?

Usage

Pull a skill into your project

Specify providers

Preview before writing

Browse and pull interactively

Generate a custom skill

Registry Structure

Contributing

License

Sponsors

File tree

More Flows by @bergside.

typeui