skills.rest
hfadhlullah
hfadhlullahCOMMUNITY
Explore all skills by this author →
GitHub

Design System Generator

Generate design system documentation in markdown and YAML.

Updated Mar 4, 2026
Search Tags:#automation#design system#component documentation#UI patterns#token system
One-click install
npx skills add https://github.com/hfadhlullah/gitarpro --skill design-system-generator-hfadhlullah
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Generator
Source: https://github.com/hfadhlullah/gitarpro/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/hfadhlullah/gitarpro --skill design-system-generator-hfadhlullah

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive design system documentation, including components, design tokens, and UI patterns, saving time and ensuring consistency across teams.

Core Features & Use Cases

  • Automated Documentation: Generates design system documentation covering design tokens, component specifications, and UI patterns.
  • Customizable Outputs: Provides human-friendly markdown and machine-readable YAML for different use cases.
  • Use Case: For a new project, use this Skill to define the visual identity, component libraries, and token systems quickly.

Quick Start

Create a design system using the Design System Generator with the command: 'generate design-system --name "MyDesignSystem" --vibe "modern, clean, bold" --framework "React" --base-system "Material" --dark-mode "true" --accessibility "WCAG AA"'

Frequently Asked Questions about Design System Generator

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

FAQPage Schema
How do I automate design system documentation for component libraries and UI patterns?▼

You can automate design system documentation by specifying your design direction, framework, and accessibility level to generate component specifications, design tokens, and UI patterns automatically.

Can I generate design tokens and component documentation in both markdown and YAML?▼

Yes, the design system generator outputs human-friendly markdown for documentation and machine-readable YAML for design tokens and component specifications, ensuring usability for both designers and developers.

Does the design system generator support frameworks like React and base systems like Material or Ant Design?▼

Yes, you can specify your target framework like React and use existing systems like Material or Ant Design as a base, or create a completely custom design system tailored to your project.

What is the best way to create a custom design system with WCAG AA accessibility compliance?▼

To create a custom design system with WCAG AA compliance, define your visual vibe, specify the framework, set the base system, and explicitly pass the desired accessibility level in the generation command.

How do I quickly define a visual identity and token system for a new project?▼

You can quickly define a visual identity and token system by running a single command that generates the foundational design tokens, component libraries, and UI pattern templates based on your specified design vibe.

What limitations exist when generating UI patterns and component specifications for custom design systems?▼

The generation requires you to explicitly specify the design direction, framework, and accessibility level upfront; without these inputs, it cannot accurately generate the tailored component documentation and token systems.

Related Skills

Explore More Design & Creative Skills→
guifryguifry

ads-plan

Create a complete Google Ads plan covering economics, structure, budget, bidding, and targeting.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
udecodeudecode
434

1-app-design-document

Codify React UI design systems with pattern catalogs and typography tokens.

Official
Intermediate
dt418dt418

Docs Pack

Build documentation platforms with versioned docs, search, navigation, code highlighting, and API reference generation.

Community
Intermediate