skills.rest
buvis
buvisOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system

Extract design tokens and map components across a codebase.

2|Updated Dec 20, 2020
Search Tags:#documentation#components#audit#tokens#design-system#ui-patterns
One-click install
npx skills add https://github.com/buvis/home --skill design-system-buvis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/buvis/home/tree/main/.claude/skills/audit-design
Command: npx skills add https://github.com/buvis/home --skill design-system-buvis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often struggle to maintain visual consistency across products. This Skill helps audit existing UI patterns and generate a cohesive design system with tokens, components, and guidelines to accelerate design and development.

Core Features & Use Cases

  • Automated pattern discovery: Scan codebases to extract colors, typography, spacing, component usage, and accessibility gaps.
  • Token generation: Propose a token set (colors, typography, spacing) and output JSON plus CSS custom properties.
  • Documentation & previews: Produce DESIGN.md, a component map, and an interactive preview to guide implementation.

Quick Start

Specify your project goals and let the system generate a design-system blueprint.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit my codebase for UI pattern inconsistencies?▼

To generate design tokens from an existing codebase, the system scans your source files to extract colors, typography, and spacing, then outputs a standardized token set as JSON and CSS custom properties.

What is the best way to standardize design tokens across web and mobile UI?▼

Standardizing design tokens across web and mobile UI involves extracting raw styling values from your codebase and converting them into a unified JSON and CSS custom properties set, ensuring visual consistency across different platforms.

How do I generate documentation for my design system components?▼

You generate design system documentation by mapping extracted components and UI patterns, which produces a DESIGN.md file, a detailed component map, and an interactive preview to guide implementation.

Can I identify accessibility gaps during a design system audit?▼

Yes, you can identify accessibility gaps during a design system audit because the automated pattern discovery process scans the codebase to detect UI usage issues and accessibility shortcomings alongside visual inconsistencies.

Does the design system audit work for ongoing development across PRs?▼

Yes, the design system audit works for ongoing development across PRs by applying token standardization and component mapping during styling changes and regular code reviews to maintain visual consistency.

Related Skills

Explore More Design & Creative Skills→
hollandkevinthollandkevint
5

mobile

Refactor HTML tables for responsive mobile viewing with CSS.

Community
Basic
DojoGenesisDojoGenesis
2

figma-to-code

Convert Figma designs into HTML, Svelte, React, or Vue components.

Community
Advanced
TheTesseractAITheTesseractAI

mockup-sandbox

Create isolated React component previews via a Vite dev server.

Community
Intermediate
CaltexBevoCaltexBevo

plan-design-review

Review design plans to identify missing decisions on typography, spacing, and accessibility.

Community
Advanced