Does it automatically generate documentation?

Yes, the skill generates a comprehensive DESIGN.md file explaining your system's rationale and an interactive HTML preview page for visual reference.

How does the visual audit scoring work?

The audit evaluates your UI across 10 dimensions, including color consistency, typography hierarchy, and accessibility, providing specific file-and-line fixes for low scores.

What is AI Slop Detection in a design context?

It identifies overused, generic AI-generated design trends like gratuitous gradients and purposeless glassmorphism to help you maintain a unique brand identity.

Can this skill work with Tailwind CSS and CSS-in-JS?

Yes, it is designed to scan Tailwind configurations, standard CSS files, and styled-components to extract existing patterns and tokens.

Design System Architect

Name: Design System Architect
Author: affaan-m

byaffaan-m

•

172,650

•

デザインツール

Automates the generation, auditing, and maintenance of consistent visual design systems across web codebases.

This skill empowers developers to maintain high visual standards by scanning existing styles, generating comprehensive design tokens, and performing detailed visual audits to identify inconsistencies or generic AI-generated aesthetics. It streamlines the creation of design documentation, extracts tokens from CSS or Tailwind configurations, and provides a 10-point scoring system to evaluate UI polish, accessibility, and responsiveness. Whether you are starting a new project or cleaning up a legacy codebase, this tool ensures your interface remains professional, unique, and systematically sound.

主な機能

01Competitor-Inspired System Generation with Browser MCP

0210-Point Visual Consistency & Accessibility Audit

03Interactive HTML Style Preview and DESIGN.md Generation

04172,650 GitHub stars

05Automated Design Token Extraction (CSS/Tailwind/Styled-Components)

06AI Slop Detection for identifying generic design patterns

ユースケース

01Reviewing Pull Requests to catch visual regressions and styling drift

02Standardizing styles and design tokens for a new or legacy web project

03Eliminating generic AI-generated UI patterns in favor of unique branding

主な機能

01Competitor-Inspired System Generation with Browser MCP

0210-Point Visual Consistency & Accessibility Audit

03Interactive HTML Style Preview and DESIGN.md Generation

04172,650 GitHub stars

05Automated Design Token Extraction (CSS/Tailwind/Styled-Components)

06AI Slop Detection for identifying generic design patterns

ユースケース

01Reviewing Pull Requests to catch visual regressions and styling drift

02Standardizing styles and design tokens for a new or legacy web project

03Eliminating generic AI-generated UI patterns in favor of unique branding