Design System Starter

What it does

This skill enables AI agents to quickly generate foundational design system files for frontend applications. It produces tokens (colors, typography, spacing), component structures based on atomic design principles, theming support (including dark mode), accessibility guidelines aligned with WCAG 2.1 AA compliance, and documentation for components. The output includes JSON format design tokens, React component templates, and a comprehensive audit checklist.

When to use it

• When starting a new frontend project and needing a foundation for visual consistency.
• To quickly establish design tokens (colors, typography, spacing) for an existing application.
• To generate reusable UI components based on atomic design principles.
• To ensure accessibility compliance (WCAG 2.1 AA) within your user interface.
• When needing a starting point for implementing dark mode theming.

Key capabilities

• Generates design tokens in JSON format (color, typography, spacing, shadows).
• Creates component structures using an atomic design hierarchy.
• Provides theming support via CSS variables or ThemeProvider setup.
• Ensures WCAG 2.1 AA accessibility compliance.
• Produces documentation for components including props and examples.

Example prompts

• "Create a design system for my React app with dark mode support."
• "Set up design tokens for colors and spacing."
• "Design component structure using atomic design."

Tips & gotchas

• The skill focuses on generating foundational files; further customization will likely be required.
• Familiarity with atomic design principles can help you understand the generated component structures.
• The provided checklist (checklists/design-system-checklist.md) is a useful resource for auditing and maintaining your design system.