design-system-creation

Create design systems defining typography, color, components, and documentation.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ShadowAUS/chez-king-portal --skill design-system-creation-shadowaus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-creation
Source: https://github.com/ShadowAUS/chez-king-portal/tree/main/.tessl/tiles/secondsky/claude-skills/plugins/design-system-creation/skills/design-system-creation
Command: npx skills add https://github.com/ShadowAUS/chez-king-portal --skill design-system-creation-shadowaus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create cohesive design systems that define typography, color, components, and documentation.

Core Features & Use Cases

  • Foundation: Tokens for typography, color, spacing, and elevation
  • Components: Buttons, inputs, cards, navigation with accessibility considerations
  • Theming & Documentation: Guides for dark mode, WCAG compliance, and usage examples
  • Use Case: When starting a new product, generate a complete design system to ensure brand consistency across products and teams.

Quick Start

Define a complete design system outline including tokens, typography, color, components, and documentation for a new UI.

Frequently Asked Questions about design-system-creation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a design system from scratch for a new product?

To build a design system, define foundational tokens for typography, color, spacing, and elevation, then establish accessible components and documentation guidelines to ensure brand consistency across teams.

What is included in a complete design system foundation?

A complete design system foundation includes design tokens for typography, color, spacing, and elevation, alongside accessible component definitions and usage documentation for cross-team UI consistency.

How do I set up dark mode theming and WCAG accessibility compliance?

Set up dark mode theming and WCAG accessibility compliance by generating documentation guides that define token governance, contrast considerations, and usage examples for your components.

What is the best way to ensure cross-team UI consistency with a component library?

The best way to ensure cross-team UI consistency is by creating a cohesive design system that defines typography, color, components, and documentation with strict usage guidelines.

Can I use this approach to generate token governance standards for an existing UI?

Yes, you can generate token governance standards for an existing UI by defining foundational typography, color, spacing, and elevation tokens alongside documentation with usage guidelines.

When do I need to create documentation with usage guidelines for my components?

You need to create documentation with usage guidelines when setting up design standards or a component library to ensure proper theming, accessibility considerations, and cross-team UI consistency.