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

•

Herramientas de Diseño

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

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.

Características Principales

01Standardized component states and naming conventions for team-wide consistency.

0234 GitHub stars

03Integrated accessibility gates focused on WCAG AA standards and keyboard support.

04Tailored documentation for SPAs, traditional server-rendered, and hybrid platforms.

05Automated design token generation for CSS variables and JSON formats.

06Production asset guidance including cache-busting manifest strategies.

Casos de Uso

01Establishing a clear handoff between design and development with exported tokens and architectural rules.

02Standardizing design patterns and accessibility requirements across multiple engineering teams.

03Setting up UI consistency and styling rules for a brand-new software project.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thienanblog/awesome-ai-agent-skills design-system-generator

For use in Claude.ai and ChatGPT

Download Skill