What is the primary output of this skill?

The skill generates a project-specific DESIGN_SYSTEM.md file that serves as a team artifact for UI/UX rules, plus optional token files in CSS or JSON format.

Can I use this with existing design systems?

Yes. The skill includes a decision policy to adapt to your existing stack or templates rather than forcing a new one, unless requested otherwise.

How does it handle accessibility?

It enforces WCAG AA contrast targets, keyboard navigation, visible focus states, and semantic HTML as non-negotiable requirements in the generated documentation.

Which web frameworks does it support?

It supports a wide range of stacks including React, Vue, Svelte, and Angular, as well as server-side frameworks like Laravel, Django, Rails, and WordPress.

Does it integrate with Claude Code's agent instructions?

Yes, it provides a specific markdown patch for your AGENTS.md or CLAUDE.md files to ensure AI agents follow the newly created design system.

Design System Generator

Name: Design System Generator
Author: thienanblog

bythienanblog

•

Design Tools

Generates comprehensive, project-specific design system documentation to ensure UI/UX consistency and production-grade standards across any web stack.

About

This skill automates the creation of a DESIGN_SYSTEM.md file that acts as the technical single source of truth for your frontend project. By analyzing your specific tech stack—whether it's a modern SPA, a traditional server-rendered site, or a hybrid system—it establishes clear rules for design tokens, component architecture, accessibility compliance, and performance optimization. It bridges the gap between design and implementation by providing actionable 'Do/Don't' guidance, token export formats, and production asset strategies that both human developers and AI agents can follow reliably.

Key Features

Standardized component states and naming conventions for team-wide consistency.
34 GitHub stars
Integrated accessibility gates focused on WCAG AA standards and keyboard support.
Tailored documentation for SPAs, traditional server-rendered, and hybrid platforms.
Automated design token generation for CSS variables and JSON formats.
Production asset guidance including cache-busting manifest strategies.

Use Cases

Establishing a clear handoff between design and development with exported tokens and architectural rules.
Standardizing design patterns and accessibility requirements across multiple engineering teams.
Setting up UI consistency and styling rules for a brand-new software project.

About

Key Features

Standardized component states and naming conventions for team-wide consistency.
34 GitHub stars
Integrated accessibility gates focused on WCAG AA standards and keyboard support.
Tailored documentation for SPAs, traditional server-rendered, and hybrid platforms.
Automated design token generation for CSS variables and JSON formats.
Production asset guidance including cache-busting manifest strategies.

Use Cases

Establishing a clear handoff between design and development with exported tokens and architectural rules.
Standardizing design patterns and accessibility requirements across multiple engineering teams.
Setting up UI consistency and styling rules for a brand-new software project.