Design System Lead

The design-system-lead skill empowers AI agents to act as senior UI/UX architects, generating comprehensive design system documentation and enforcing consistency across complex frontend projects. It bridges the gap between abstract design principles and concrete implementation by producing structured style guides, component libraries, and usage patterns.

When to use it

• Initialize a new project with a standardized design system from scratch based on specific brand guidelines.
• Audit existing codebases to identify inconsistencies in spacing, typography, or color usage.
• Generate reusable React or Vue component documentation including props, states, and accessibility requirements.
• Create detailed style guide pages that define tokens for colors, fonts, shadows, and border radii.

Key capabilities

• Generates complete design system documentation structures.
• Defines atomic design tokens (colors, typography, spacing).
• Creates component usage examples and best practices.
• Enforces visual consistency across diverse UI elements.
• Outputs code snippets for common frontend frameworks.

Example prompts

• "Act as a design system lead and create a comprehensive style guide for a fintech dashboard using Tailwind CSS."
• "Generate a React component library documentation page including props tables, usage examples, and accessibility notes for a modal dialog."
• "Audit the following color palette and typography choices to ensure they meet WCAG 2.1 AA contrast standards and generate a corrected token list."

Tips & gotchas

Ensure you provide specific framework context (e.g., React, Vue, Svelte) when requesting code snippets, as the output format depends heavily on the target environment. For best results, include existing brand assets or design tokens to ground the generated system in your specific visual identity.