What does this skill do?

The Design System Studio Skill generates complete design systems from scratch, audits the visual consistency of existing interfaces by evaluating 10 UI dimensions, and detects generic patterns typical of AI-generated designs. It covers the entire cycle: from token extraction to detailed scoring of each dimension of your interface, with exact file and line references for every detected issue.

Design System from Scratch
Start a new project with a solid foundation: tokens, documentation, and an interactive preview from day one.
Comprehensive visual inspection
It evaluates 10 UI dimensions (color, typography, spacing, components, responsiveness, dark mode, animation, accessibility, density, and finish) on a scale of 0 to 10.
AI-Based Detection of Generic Patterns
It identifies default purple-blue gradients, pointless glass effects, arbitrary rounded corners, and characterless fonts.
Reviewing pull requests
Check for style changes that could break consistency before merging, using exact file:line references.

Usage examples

🚀 Create a new system
Create a minimalist design system with an earth-tone color palette for my SaaS app, and generate the tokens and preview.
🔍 Audit the interface
Audit the http://localhost:3000 interface on the /, /pricing, and /docs pages and give me a score for each dimension.
🧹 Detect AI patterns
Run a slop-check on my project to detect generic gradients, pointless glass morphisms, and characterless fonts.
📋 Review style PRs
Review the style changes in the latest pull request and let me know if they break the consistency of the current design system.

Features

Generate mode Create a comprehensive system by scanning CSS, Tailwind, or styled-components and researching competitors. Generate DESIGN.md, design-tokens.json, and design-preview.html.
Audit mode with 10 dimensions Evaluate color, typography, spacing, components, responsiveness, dark mode, animation, accessibility, information density, and finish, with a score from 0 to 10.
Slop-check mode Identifies generic AI patterns: default purple-blue gradients, pointless glass morphism, arbitrary rounded corners, and heroes with centered text over stock gradients.
Exact references: file:line Each detected issue includes the precise location in the code so that it can be corrected without ambiguity.
Tokens structured in JSON Generate design-tokens.json with all the tokens ready to be integrated into your development pipeline.

Frequently asked questions

Scan CSS, Tailwind, and styled-components for existing patterns before generating the design system.
No. The skill works with Claude Code or Cowork without any additional configuration. For audit mode, you just need the URL to be accessible.
Three files: DESIGN.md, which explains the rationale behind each decision; design-tokens.json, which contains the structured tokens; and design-preview.html, which is a self-contained interactive page.
Yes. Specify the production URL and the pages to be evaluated. The skill will analyze the 10 dimensions on each specified page.
Design System Studio — Generate and Audit Design Systems with Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.