How does this skill enforce design standards?

The skill monitors UI code changes and ensures that all colors, spacing, and typography reference predefined CSS custom properties instead of hardcoded values.

Does it support mobile-first design?

Yes, it includes specific support for Apple's Human Interface Guidelines (HIG), ensuring features like 44px touch targets and safe area insets are respected.

What is a design system playground?

It is an interactive HTML file generated by this skill that serves as the visual documentation and source of truth for all UI tokens, colors, and components.

How do I start a new design system with this skill?

Simply use the /design-system:init command to establish your base tokens and create the initial design system configuration file.

Design System Playground

Name: Design System Playground
Author: Aventerica89

byAventerica89

0•

Design Tools

Generates interactive playgrounds and enforces design token standards to ensure consistent, scalable UI development.

This skill streamlines the creation of design systems by prioritizing a playground-first development workflow within Claude Code. It automatically detects work on design tokens, style guides, or component libraries to ensure that visual standards are established and visualized before application components are built. By leveraging a single source of truth—such as system.md files—it enforces strict adherence to CSS custom properties, base-4 spacing scales, and typography standards, while providing interactive HTML references complete with dark mode toggles and HIG compliance checks.

Key Features

010 GitHub stars

02Design Token Enforcement (validates usage of CSS variables and spacing scales)

03Automated Playground Generation (creates interactive HTML reference files)

04Interactive Reference UI (includes dark mode, filtering, and table of contents)

05HIG Compliance (integrates Apple Human Interface Guidelines for mobile-ready UI)

06Visual Audit Tools (commands to audit existing codebases against the system)

Use Cases

01Establishing a single source of truth for UI tokens in a new brand identity project.

02Auditing legacy frontend codebases to replace hardcoded values with standardized CSS variables.

03Creating shareable, interactive documentation for a shared component library.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aventerica89/claude-codex design-system-playground

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Design Token Enforcement (validates usage of CSS variables and spacing scales)

03Automated Playground Generation (creates interactive HTML reference files)

04Interactive Reference UI (includes dark mode, filtering, and table of contents)

05HIG Compliance (integrates Apple Human Interface Guidelines for mobile-ready UI)

06Visual Audit Tools (commands to audit existing codebases against the system)

Use Cases

01Establishing a single source of truth for UI tokens in a new brand identity project.

02Auditing legacy frontend codebases to replace hardcoded values with standardized CSS variables.

03Creating shareable, interactive documentation for a shared component library.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aventerica89/claude-codex design-system-playground

For use in Claude.ai and ChatGPT