skills.rest
rlagycks
rlagycksCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Analyze UI code and visual elements to generate design systems or perform quality audits.

3|Updated Apr 9, 2026
Search Tags:#design#frontend#UI#audit#visual consistency#style guide
One-click install
npx skills add https://github.com/rlagycks/oh-my-forge --skill design-system-rlagycks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/rlagycks/oh-my-forge/tree/main/skills/design-system
Command: npx skills add https://github.com/rlagycks/oh-my-forge --skill design-system-rlagycks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining visual consistency and quality across user interfaces, saving designers and developers time spent on manual audits and style corrections.

Core Features & Use Cases

  • Design Generation: Analyzes codebases like CSS, Tailwind, or styled-components to produce a cohesive design system including tokens and guidelines.
  • Visual Audit: Scores UI elements across multiple dimensions such as color, typography, responsiveness, and accessibility, providing specific feedback for improvements.
  • AI Slop Detection: Identifies and highlights common AI-generated design flaws like gratuitous gradients or excessive animations to ensure polished, intentional design.

Quick Start

Use the design-system skill to generate a minimal style guide for a new project.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate a design system from existing CSS and Tailwind code?▼

To generate a design system, this skill analyzes your CSS, Tailwind, or styled-components codebase to produce cohesive design tokens and style guidelines. It extracts visual rules to streamline your UI consistency.

Can I perform a UI visual consistency audit for my web application?▼

Yes, you can perform a UI visual consistency audit. The skill scores interface elements across color, typography, responsiveness, and accessibility dimensions, providing specific feedback to improve visual consistency and UX.

How do I detect and fix AI-generated design flaws in my frontend?▼

You can detect AI-generated design flaws by analyzing UI code and visual elements to identify common AI slop like gratuitous gradients or excessive animations. It highlights these issues to ensure polished, intentional design.

Does this UI audit tool work with styled-components and mobile applications?▼

Yes, the UI audit tool works with styled-components and is suitable for both web and mobile applications. It analyzes frontend code to ensure visual consistency and optimal UX across different platforms.

What is the best way to create a minimal style guide for a new frontend project?▼

The best way to create a minimal style guide is to use the design generation feature to analyze your initial codebase. This produces a cohesive design system including foundational tokens and guidelines for your new project.

Related Skills

Explore More Design & Creative Skills→
Overlord-ZOverlord-Z

style-master

Analyze frontend codebases to extract design tokens and detect styling inconsistencies.

Community
Advanced
vladimir-shirmanovvladimir-shirmanov

critique

Evaluate interfaces for UX flaws and generate prioritized design recommendations.

Community
Advanced
cagdotincagdotin
36

web-design-guidelines

Evaluate frontend UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
guideopsguideops

neumorphism

Provide neumorphism UI design guidelines with WCAG 2.2 AA accessibility rules.

Community
Advanced