Generate a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across SPAs, traditional server-rendered sites, and hybrid systems. Includes tokens, component rules, accessibility gates, and production asset/manifest guidance.
Generates a project-specific design system document that enforces consistent UI/UX across SPAs, server-rendered sites, and hybrid systems.
/plugin marketplace add thienanblog/awesome-ai-agent-skills/plugin install documentation-skills@awesome-ai-agent-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdTEMPLATE_DESIGN_SYSTEM.mdexamples/AGENTS.patch.mdexamples/design-tokens.jsonexamples/manifest.example.jsonexamples/tokens.cssThis skill generates a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across:
The design system must be component-based, portable, and practical for real implementation.
When to use this skill:
Ask these questions before generating the document:
1. Project type: SPA / Traditional / Hybrid
2. Primary framework(s): React/Vue/Svelte/Angular/None + backend/framework
3. Existing UI/template/design system already in use? (yes/no)
4. CSS approach preference:
a) Tailwind/utility-first
b) SCSS/SASS
c) CSS Modules
d) styled-components/emotion
e) Component library (MUI/Ant/etc.)
5. Do you need light mode only, light+dark, or multi-theme?
6. Accessibility target (recommend WCAG AA) and keyboard support expectations
7. Browser/device support constraints
8. i18n/RTL requirements (if any)
9. Do you want design tokens exported? (CSS vars / JSON / both)
Reply examples:
- Short: `1a 2b 3no 4a 5b 6aa 7modern 8no 9both`
- Detailed: `SPA with Vue 3, no existing design system, using Tailwind, light+dark theme, WCAG AA, modern browsers only, no RTL, export both CSS vars and JSON`
If the project already uses a template or styling system, adapt to it.
Do not provide 3-5 "options" unless the user requests comparison. Pick one approach and commit.
DESIGN_SYSTEM.mddesign-tokens.jsontokens.cssfont-display: swap, limit weights)DESIGN_SYSTEM.md is a team artifact:
Generate a tailored document using this structure:
Include an explicit section stating:
After generating DESIGN_SYSTEM.md, also output a short patch snippet to add to AGENTS.md and/or CLAUDE.md:
## Design System
All UI components and pages must follow `DESIGN_SYSTEM.md`:
- Use design tokens (no hardcoded colors/sizes).
- Implement component states (hover/focus/disabled/loading/error).
- Meet accessibility and performance requirements.
Before generating DESIGN_SYSTEM.md, read these reference files:
TEMPLATE_DESIGN_SYSTEM.md - Use this as the base structure for generationexamples/tokens.css - Reference for CSS variable token formatexamples/design-tokens.json - Reference for JSON token export formatexamples/manifest.example.json - Reference for asset manifest structureexamples/AGENTS.patch.md - The exact snippet to add to AGENTS.md/CLAUDE.mdDESIGN_SYSTEM.md is tailored to the user's stack and constraintsAGENTS.md / CLAUDE.md patch snippet referencing DESIGN_SYSTEM.mdThis skill is part of the awesome-ai-agent-skills community library.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.