skills.rest
froggugugugu
frogguguguguCOMMUNITY
Explore all skills by this author →
GitHub

design-system-audit

Audit UI consistency and define design tokens using mathematical ratios.

Updated Feb 7, 2026
Search Tags:#typography#design system#audit#design tokens#spacing#ui consistency
One-click install
npx skills add https://github.com/froggugugugu/project-blueprints --skill design-system-audit-froggugugugu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-audit
Source: https://github.com/froggugugugu/project-blueprints/tree/main/project-blueprint/.claude/skills/design-system-audit
Command: npx skills add https://github.com/froggugugugu/project-blueprints --skill design-system-audit-froggugugugu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining visual consistency across a user interface by auditing and standardizing design elements based on defined ratios and tokens.

Core Features & Use Cases

  • Design Token Definition: Establishes numerical standards for spacing, typography, and component sizing using established ratios (e.g., Golden Ratio, Silver Ratio).
  • UI Consistency Audit: Provides a checklist to identify and record inconsistencies in existing interfaces regarding spacing, typography, component usage, and alignment.
  • Standardized Prompt Generation: Creates templates for instructing AI models like Claude Code to implement or correct UI elements according to the defined design system.
  • Use Case: A team notices that button padding and heading margins vary significantly between different screens. This Skill helps them define a consistent set of spacing tokens and then audit existing screens to identify and correct these discrepancies, ensuring a unified look and feel.

Quick Start

Use the design-system-audit skill to define spacing tokens based on the Golden Ratio with a base of 8px.

Frequently Asked Questions about design-system-audit

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

FAQPage Schema
How do I audit UI consistency using design tokens?▼

To audit UI consistency, apply a checklist to identify and record inconsistencies in existing interfaces regarding spacing, typography, and component usage, then correct them using standardized design tokens based on mathematical ratios.

What are design tokens and how do they standardize UI spacing?▼

Design tokens are numerical standards for spacing, typography, and component sizing established using mathematical ratios like the Golden Ratio or Silver Ratio to ensure visual harmony across web and mobile interfaces.

Can I define design tokens for mobile and QML platforms?▼

Yes, you can define design tokens for mobile and QML platforms, because the framework supports web, Qt, QML, and mobile platforms to provide numerical design principles for visual harmony.

How do I generate prompts to fix inconsistent button padding and heading margins?▼

You can generate standardized prompt templates to instruct AI models like Claude Code to implement or correct UI elements, ensuring that button padding and heading margins follow the defined spacing tokens.

What is the best way to establish numerical standards for typography sizing?▼

The best way to establish numerical typography standards is by defining design tokens using established mathematical ratios, such as a base size of 8px with the Golden Ratio, to correct existing interface elements.

Related Skills

Explore More Design & Creative Skills→
ilove323ilove323

design-handoff

Generate markdown-ready developer handoff specifications from Figma links or screenshots.

Community
Intermediate
nguyenthienthanhnguyenthienthanh
24

stitch-design

Generate optimized UI design prompts and workflow guidance for Google Stitch AI.

Community
Intermediate
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced