# Design System > DaisyUI + Tailwind CDN design system spec. Preloaded into design-related agents and referenced by design skills. - Skill: `pcatattacks/design-system` (Agent Skill) - Install (CLI): `npx skillmds@latest add pcatattacks/design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/pcatattacks/design-system/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: pcatattacks (https://skillmd.com/u/pcatattacks) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/pcatattacks/design-system --- # Design System ## Stack Self-contained HTML mockups using DaisyUI + Tailwind via CDN (no build step, no setup): ```html ``` ## Rules - Use DaisyUI semantic classes for polished defaults: `btn`, `card`, `navbar`, `modal`, `badge`, `alert`, `table`, etc. - Layer Tailwind utility classes on top for customization (spacing, colors, responsive breakpoints) - Use realistic placeholder data (real names, prices, dates — not lorem ipsum) - Add basic interactivity where it helps communicate the design (tab switches, modal open/close, dropdown toggles via inline JS) - No external dependencies beyond DaisyUI + Tailwind CDN - Structure each file as a complete HTML document: ``, ``, ``, `` - Be openable via `file://` in any browser