Can I use this for mobile applications?

Yes, the skill supports specific configurations for Web, iOS, Android, React Native, and Flutter platforms.

How does Claude use these guidelines?

Once generated in the .claude/skills/ directory, Claude can automatically reference these design rules when writing CSS, styling components, or making UI decisions.

What files does this skill generate?

It generates a main SKILL.md along with a references folder containing specialized documentation for colors, typography, spacing, component patterns, and a design-tokens.json file.

Does it support accessibility standards?

Yes, it allows you to define WCAG 2.1 AA or AAA compliance levels to ensure your generated UI components meet industry accessibility standards.

UI Design Guideline Creator

Name: UI Design Guideline Creator
Author: titabash

bytitabash

0•

Design Tools

Generates comprehensive, project-specific UI design systems and style guides as reusable Claude Code skills.

This skill automates the creation of professional design guidelines by generating a structured repository of design tokens, color palettes, typography scales, and component specifications tailored to your project. It enables Claude to maintain visual consistency across your codebase by registering a custom design skill that references standardized spacing, accessibility levels (WCAG), and platform-specific patterns for Web, iOS, Android, and cross-platform frameworks.

Key Features

01Detailed specifications for 20+ UI components

02Automated design system generation for .claude/skills

03Platform-specific UI patterns and typography scales

04Customizable design tokens in JSON format

05WCAG 2.1 AA/AAA accessibility compliance integration

060 GitHub stars

Use Cases

01Documenting design systems for improved team consistency

02Standardizing UI across a new React, Flutter, or mobile project

03Ensuring accessibility compliance in automated frontend development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add titabash/claude-plugins ui-design-guideline

For use in Claude.ai and ChatGPT

Download Skill