skills.rest
sapelite
sapeliteCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Extract design tokens and audit UI codebases for visual consistency.

Updated Apr 13, 2026
Search Tags:#accessibility#visual consistency#pr review#design systems#design tokens#tailwind#ui audit
One-click install
npx skills add https://github.com/sapelite/balloon --skill design-system-sapelite
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/sapelite/balloon/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/sapelite/balloon --skill design-system-sapelite

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams discover why their UI looks inconsistent and quickly brings existing styling into alignment with a coherent design system.

Core Features & Use Cases

  • Design System Generation: Scans your codebase to extract visual primitives (colors, typography, spacing, radii, shadows, breakpoints) and proposes a token set.
  • Visual Auditing: Scores UI across consistency, typography hierarchy, spacing rhythm, responsive behavior, accessibility, and polish, with actionable fixes tied to file locations.
  • AI Slop Detection: Flags common generic or over-styled patterns such as indiscriminate gradients, glassmorphism misuse, and inconsistent rounding/animation choices.

Quick Start

Use the design-system skill to audit a running Next.js app by running the command: /design-system audit --url http://localhost:3000 --pages / /pricing /docs

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 issues?▼

You can audit UI consistency by deterministically scanning existing styling sources like CSS or Tailwind to score dimensions such as typography hierarchy, spacing rhythm, and accessibility, receiving actionable file-and-line fix guidance to resolve visual inconsistencies.

How do I extract design tokens from an existing codebase?▼

Extract design tokens by scanning your codebase for visual primitives including colors, typography, spacing, radii, and shadows, then generating a cohesive token set accompanied by documentation and preview artifacts.

Can I review a pull request for design system compliance using Tailwind?▼

Yes, you can perform PR implementation reviews that inspect styling patterns touching CSS, Tailwind, or styled components, ensuring new changes align with your design tokens and visual consistency standards.

What is AI slop detection in UI design?▼

AI slop detection flags generic or over-styled UI patterns in your codebase, identifying indiscriminate gradients, glassmorphism misuse, and inconsistent rounding or animation choices to maintain visual polish and consistency.

Does this design system audit work with Next.js applications?▼

Yes, you can audit a running Next.js app by targeting a local URL and specifying page routes, allowing the tool to systematically scan and score the visual consistency across those pages.

Related Skills

Explore More Design & Creative Skills→
fusenginefusengine
22

nextjs-shadcn

Integrate shadcn/ui components into Next.js App Router applications.

Community
Intermediate
mheersmheers

normalize

Analyze feature implementations against design-system guidelines and apply normalization plans.

Community
Advanced
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
porcupine-mdporcupine-md
11

reviewing-frontend-aesthetics

Audit frontend code for design inconsistencies and AI slop without modification.

Official
Advanced