# Awesome Design Systems

> Catálogo de design systems CSS — patrones de diseño web modernos y reutilizables inspirados en Stripe, Linear, Vercel.

- Skill: `ntizar/awesome-design-systems` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ntizar/awesome-design-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ntizar/awesome-design-systems/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: ntizar (https://skillmd.com/u/ntizar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ntizar/awesome-design-systems

---


# Awesome Design Systems

## Resumen

Catálogo de design systems CSS — patrones de diseño web modernos y reutilizables. 25k⭐.

## Repo de referencia

- **GitHub:** `github.com/alexpate/awesome-design-systems`
- **Lenguaje:** Markdown (awesome list)
- **Licencia:** MIT
- **Mantenedor:** Alex Pate

## Contenido

La lista incluye:

1. **Design Systems:** Tailwind UI, Radix UI, Shadcn, Headless UI
2. **CSS Frameworks:** Tailwind, UnoCSS, Pico, Water.css
3. **Component Libraries:** Framer Motion, React Spring, GSAP
4. **Templates:** Landing pages, dashboards, portfolios
5. **Herramientas:** CSS generators, color pickers, icon sets
6. **Inspiración:** Sites de referencia (Stripe, Linear, Vercel)

## Uso

```bash
# Clonar para referencia
git clone https://github.com/alexpate/awesome-design-systems.git

# Explorar categorías
cat awesome-design-systems/README.md | grep -A 10 "## CSS Frameworks"
```

## Integración con Mastermind

- Complementa `aurora-design-system` — más diseño general, menos específico
- Fuente de inspiración para `popular-web-designs`
- Referencia para `frontend-dashboard-patterns` — patrones modernos
- Ideal para `claude-design` — diseño de artefactos HTML

## Pitfalls

- **No es código:** Es una lista de recursos, no una herramienta
- **Actualización:** Depende de contribuciones comunitarias
- **Categorización:** Algunos recursos se solapan entre categorías

## Referencias

- [GitHub: alexpate/awesome-design-systems](https://github.com/alexpate/awesome-design-systems)

## Comparativa de alternativas

- **[alexpate/awesome-design-systems](https://github.com/alexpate/awesome-design-systems)** — catálogo de +100 design systems reales (colores, tipografía, variables) para comparar tokens y patrones ya implementados en producción.