Design Systems design resources

A free, open-source React component library built on Base UI, styled with Tailwind, animated with Motion — 70+ polished components for humans and AI agents.

Curated directory of interface craft — component libraries, design systems, AI design tools, and inspiration, plus a list of people worth following.

visualize is a skill that stops AI-generated HTML looking agent-made — replacing Inter-and-purple-gradient defaults with on-brand, distinctive output.

Extremely crafted, copy-paste primitives for AI-native interfaces — loading states, thinking traces, streaming text, human-in-the-loop approvals, and more.

Extract design tokens from any live website with one command, then track token drift, WCAG contrast and changes over time.

Portfolio of Chloé Maillot, a Paris-based design engineer at Artefact who ships what she designs — design systems, AI tools and production products.

Open source UI components by @micka_design, documented as a fluid design system covering hover, motion, surfaces and typography.

A free community gallery of DESIGN.md design systems — single markdown files that AI coding tools like Cursor and Claude Code read to build consistent UI.

Sub-atomic styles: an open source set of expertly crafted CSS custom properties for consistent, adaptive design, installable from a CDN or NPM.

A Claude Code skills pack for design-adjacent work: curated resource articles, one-click website theme optimization, and design system document generation.

A color ramp generator built for handoff: perceptually-even OKLCH palettes with semantic tokens your agent can read as plain text or JSON.

A collection of 550+ DESIGN.md files that give coding agents a real design system — colors, type, spacing, components and the reasoning behind them.

A curated toolkit of 70+ skills, plugins, MCP servers and CLAUDE.md tricks that make Claude Code output better-looking frontends.

A curated awesome list of 64 AI tools for building beautiful UI and UX, spanning agent skills, apps, MCP servers, design tools and resources.

Design skills, 449 UI prompts, animations, sound effects and audit tools for building professional UI with Codex, Claude and Cursor.

Vercel explains design.md: one public file any coding agent can load to build on-brand pages, plus the eval loop that decided every rule in it.

A premium set of 2,150+ extra blocks, 2,151 components and 21 templates for shadcn/ui, Tailwind and React — copy-paste or install via the shadcn CLI.

A marketplace of 51+ production-ready DESIGN.md design system files for Claude, Cursor and Copilot, free to download with live previews.

Kumo is Cloudflare's modern component library, published as @cloudflare/kumo — accessible UI primitives, charts and assembled page blocks.

The Chinese-language home for shadcn/ui: beautifully designed, accessible, open-source components you copy and paste, plus docs, themes and templates.

A color generator for design systems — build 50–950 shade scales with contrast control and export straight to Tailwind CSS, CSS or design tokens.

An AI design workspace with a remixable prompt library for landing pages, UI components and animation styles — with separate modes for humans and agents.

An open-source, collaborative design agent workspace: start from a brief, generate prototypes that follow your design system, then let your coding agent refine them with the team.

A library of 2,000+ real website styles paired with AI-readable DESIGN.md files you can feed to Cursor, Claude Code, v0 or Lovable.

12,000+ hand-crafted React and Tailwind CSS components, templates, and shadcn themes you can preview live and install with one command.

Turns prompts into AI-built HTML landing pages, remix templates and reusable DESIGN.md files for agent-ready design systems.

Curated design-engineering skills for accessibility, motion, frontend craft and interface quality, installable via CLI or MCP into your AI agent.

HeroUI v3 (formerly NextUI) — accessible React and React Native components built on React Aria and Tailwind CSS v4, with 27.7k GitHub stars.

Unstyled React UI components for building accessible web apps and design systems, from the creators of Radix, Floating UI, and Material UI.

Astryx's component catalog: browse every component with copy-ready examples for each variant, state, and interaction pattern.

An open source supply of generated DESIGN.md style guides for any public domain, shaped from live brand identity and markup via Context.dev.

Browse design systems extracted from popular websites like Stripe and Linear, packaged as ready-to-use DESIGN.md files for AI coding agents.

A curated collection of ready-to-use DESIGN.md files extracted from 73 real websites, for AI agents that need to generate on-brand UI.

LiftKit is a design-system-derived UI framework for React and Next.js on Tailwind — currently being rewritten around Base UI primitives.

A reference gallery of interface components drawn from real design systems — 60 components, 95 systems, and 2,671 examples.

A React design system for dashboards and agent interfaces — 85 components, 19 chart cards, and 10 Pro templates on Tailwind CSS with editable source.

Untitled UI's 2026 guide to 15 React UI component libraries, comparing MUI, shadcn/ui, AlignUI, Ant Design and more on depth and price.

An AI agent skill on explainx.ai that audits and upgrades existing websites to premium design standards without breaking functionality.

The utility-first CSS framework: composable classes like flex and pt-4 build any design directly in your markup, no context switching.

A Claude Code design system skill capturing Nothing's visual language — monochrome, typographic and industrial UI on command.

A curated gallery of 120 real-world design systems with evidence-linked guides, plus free interactive token, color and accessibility tools.

Open-source skill files that stop AI coding agents like Cursor, Claude Code and Codex from shipping generic, slop-looking frontends.