design-system

Scan CSS and component files to extract design tokens and generate documentation.

Updated Jun 22, 2026

Search Tags:#accessibility #design system #css #design tokens #tailwind #ui audit

Ready to run

npx skills add https://github.com/betaTrident/manta --skill design-system-betatrident

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/betaTrident/manta/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/betaTrident/manta --skill design-system-betatrident

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses visual inconsistency and design debt by providing a structured way to audit existing UI patterns and generate cohesive design tokens for new or evolving projects.

Core Features & Use Cases

Design System Generation: Automatically scans CSS and component files to extract design tokens like colors, typography, and spacing, then generates a comprehensive documentation file and preview.
Visual Audit: Scores your interface across ten critical dimensions including accessibility, responsiveness, and component consistency to identify specific areas for improvement.
AI Slop Detection: Analyzes your codebase for generic, over-used design patterns that lack personality or functional purpose.

Quick Start

Use the design-system skill to audit the visual consistency of your local application by running the audit command against your development server URL.

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 UI for visual consistency and accessibility?▼

To audit your UI for visual consistency, you can scan your local application's development server URL to score the interface across ten critical dimensions, including accessibility, responsiveness, and component consistency. This visual audit identifies specific areas for improvement.

How do I generate design tokens from existing CSS and component files?▼

You can generate design tokens by automatically scanning existing CSS and component files to extract visual patterns like colors, typography, and spacing. This process creates a comprehensive documentation file and preview to ensure long-term visual integrity for web applications.

What is AI slop detection in UI design and how does it identify generic patterns?▼

AI slop detection identifies generic, over-used design patterns in your codebase that lack personality or functional purpose. It analyzes your existing components to highlight areas where your interface relies on unoriginal styling rather than cohesive, purposeful design decisions.

Can I use this to audit a local development server for design debt?▼

Yes, you can audit a local development server for design debt by running the visual audit command against your local development URL. This evaluates your codebase for stylistic consistency and accessibility issues to address visual inconsistency in evolving projects.

Does this work with Tailwind CSS to maintain design system tokens?▼

Yes, it works with Tailwind CSS by scanning your component files and stylesheets to extract and maintain design tokens. This ensures that your utility classes and token definitions remain consistent and documented across your web application.

What is the best way to fix visual inconsistency across web application components?▼

The best way to fix visual inconsistency is to perform a structured UI audit that scores your interface on responsiveness and stylistic consistency, then generate cohesive design tokens and documentation to standardize your visual patterns moving forward.