ui-style-format

Name: ui-style-format
Availability: InStock
Author: MadAppGang

Define and validate UI design style files with tokens and reference images.

7|4|Updated Feb 26, 2026

Search Tags:#design system #visual consistency #style guide #component library #design tokens #ui design

Ready to run

npx skills add https://github.com/MadAppGang/magus --skill ui-style-format

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-style-format
Source: https://github.com/MadAppGang/magus/tree/main/plugins/designer/skills/ui-style-format
Command: npx skills add https://github.com/MadAppGang/magus --skill ui-style-format

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill defines a standardized format for UI design styles, ensuring consistency across projects by specifying brand colors, typography, spacing, and component patterns, with support for visual reference images.

Core Features & Use Cases

Style Definition: Establishes a schema (.claude/design-style.md) for project-specific design tokens.
Visual References: Integrates image assets (.claude/design-references/) for direct visual guidance.
Validation: Provides a checklist for ensuring style file integrity and adherence to project standards.
Use Case: A design team can use this Skill to create a single source of truth for their design system, which the ui agent then uses to perform style-aware design reviews and ensure brand consistency.

Quick Start

Use the ui-style-format skill to validate the design style file located at .claude/design-style.md.

Frequently Asked Questions about ui-style-format

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

FAQPage Schema

How do I standardize UI design tokens for consistent visual styling across projects?▼

You can standardize UI design tokens by creating a structured style file at `.claude/design-style.md` that defines brand colors, typography, spacing, and component patterns to serve as a single source of truth for your project.

How do I add visual reference images to my design system for AI-driven reviews?▼

You can add visual reference images by placing image assets into the `.claude/design-references/` directory, which the system parses alongside your text-based design tokens to provide direct visual guidance during reviews.

What is the best way to validate a design style file for brand consistency?▼

The best way to validate a design style file is to use the built-in validation checklist, which ensures the style definitions maintain integrity and adhere to your project-specific standards for colors, typography, and spacing.

How does the ui agent use design tokens and references to check my UI?▼

The `ui` agent loads your style definitions and reference images to perform style-aware design reviews, checking your user interface against project-specific brand colors, typography, spacing, and component patterns for adherence.

Can I use component patterns and spacing rules from existing style guides in this format?▼

Yes, you can integrate existing component patterns and spacing rules by mapping them into the standardized schema, allowing the system to parse your established design system for consistent AI-driven visual reviews.

Do I need a separate schema for text-based tokens and visual references in my design system?▼

No, you do not need separate schemas; the format combines text-based design tokens in a markdown file with visual reference images in a dedicated directory to create a unified style definition for your project.