Design System Creator

The design-system-creator skill generates comprehensive design system documentation, including component libraries, style guides, and usage instructions based on provided specifications or existing codebases. It streamlines the creation of consistent UI patterns by outputting structured markdown files that define tokens, components, and interaction rules for frontend teams.

When to use it

• Initialize a new project with a standardized design system from scratch.
• Convert scattered UI components into a unified documentation structure.
• Generate style guides that align with specific brand guidelines or accessibility standards.
• Create reusable component libraries for cross-platform consistency.

Key capabilities

• Produces detailed component documentation with usage examples.
• Defines visual tokens such as colors, typography, and spacing.
• Outputs structured markdown suitable for integration into wikis or doc sites.
• Supports the creation of consistent UI patterns across diverse frontend frameworks.

Example prompts

• "Create a design system documentation page for a React application with primary blue branding."
• "Generate a style guide including typography and color tokens based on these hex codes: #003366, #FFFFFF, #FF5733."
• "Build a component library documentation for buttons, cards, and modals following Material Design principles."

Tips & gotchas

Ensure you provide clear initial specifications or reference existing code snippets to guide the generated output. This skill is most effective when used early in the development lifecycle to establish foundational UI standards before implementing complex features.