skills.rest
Aytsuu
AytsuuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Analyze codebases to generate design systems and audit UI consistency.

Updated May 28, 2026
Search Tags:#design system#visual consistency#codebase analysis#UI audit#AI slop detection
One-click install
npx skills add https://github.com/Aytsuu/codemini --skill design-system-aytsuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Aytsuu/codemini/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/Aytsuu/codemini --skill design-system-aytsuu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenges of creating and maintaining design systems and auditing UI consistency, saving time and improving quality.

Core Features & Use Cases

  • Design System Generation: Automates the creation of cohesive design systems by analyzing codebases and providing inspiration from competitors.
  • Visual Audit: Scores UI across multiple dimensions for consistency and accessibility, providing actionable feedback.
  • AI Slop Detection: Identifies generic AI-generated design patterns that may need refinement.
  • Use Case: Use this Skill to ensure your design system is up-to-date and consistent across your application, or to quickly identify UI issues in a pull request.

Quick Start

Run the design-system skill to generate a design system for your project.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I audit UI consistency in a codebase with Tailwind and styled-components?▼

To audit UI consistency, this skill analyzes your codebase including CSS, Tailwind, and styled-components, scoring the interface across multiple dimensions and providing actionable feedback to resolve visual inconsistencies.

What is AI slop detection in UI design and how does it work?▼

AI slop detection identifies generic AI-generated design patterns in your UI that may require refinement, ensuring your visual output avoids repetitive or templated aesthetics and maintains distinct, intentional design choices.

How do I generate a design system from an existing project?▼

You can generate a design system by running this skill to analyze your project's codebase for pattern extraction, automatically creating a cohesive design system while drawing inspiration from competitor sites.

Can I use this for UI audits during pull request reviews?▼

Yes, you can use this skill for PR reviews to quickly identify UI issues, score visual consistency, and detect AI-generated design patterns introduced in the new code before merging changes.

Does this design system generator work without predefined dependencies?▼

Yes, the skill operates with no dependencies, directly analyzing your CSS, Tailwind, and styled-components to extract design patterns and score UI consistency without requiring external libraries.

Related Skills

Explore More Design & Creative Skills→
zardusai-cyberzardusai-cyber
1

design-system

Analyze CSS patterns to generate design tokens, DESIGN.md, and HTML preview.

Community
Advanced
himanshu231204himanshu231204
2

design-system

Generate design systems and audit visual consistency across web UIs.

Community
Intermediate
serguei9090serguei9090

tailwind-design-system

Implement a Tailwind v4 design system with design tokens and reusable components.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced