skills.rest
titabash
titabashCOMMUNITY
Explore all skills by this author →
𝕏@titabash0819GitHub

ui-design-guideline

Generate project-specific UI design guidelines as Claude Code Skills.

Updated Dec 25, 2025
Search Tags:#typography#tokens#ui-design#design-system#style-guide#design-guidelines#color-system
One-click install
npx skills add https://github.com/titabash/claude-plugins --skill ui-design-guideline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-guideline
Source: https://github.com/titabash/claude-plugins/tree/main/ui-design-guideline-creator/skills/ui-design-guideline
Command: npx skills add https://github.com/titabash/claude-plugins --skill ui-design-guideline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams struggle to maintain UI design consistency across projects and platforms, leading to fragmented visuals and inconsistent user experiences.

Core Features & Use Cases

  • Generates a project-specific UI design guideline as a Claude Code Skill and registers it to .claude/skills/design-guideline/.
  • Produces a structured set of reference files (colors.md, typography.md, spacing.md, components.md, tokens.json) that codify design decisions for easy reuse.
  • Enables scalable design systems by centralizing colors, typography, spacing, and components with a clear output that existing teams can adopt.

Quick Start

Provide project details to generate a ready-to-use Claude Code Skill containing UI design guidelines and references, placed under .claude/skills/design-guideline/.

Frequently Asked Questions about ui-design-guideline

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

FAQPage Schema
How do I generate a UI design guideline for a project?▼

A UI design guideline codifies colors, typography, spacing, and components to maintain visual consistency across platforms. It prevents fragmented user experiences by centralizing design decisions into a structured set of reference files and tokens for easy reuse.

Can I create design tokens for web, iOS, and Android simultaneously?▼

Yes, you can create design tokens for web, iOS, and Android simultaneously. By specifying these target platforms in your input, the system generates a unified tokens.json file and component references applicable across all requested environments.

How do I set up a design system with consistent spacing and typography?▼

Set up a design system by generating a structured guideline that codifies spacing and typography decisions. The output includes dedicated typography.md and spacing.md reference files, ensuring consistent application of styles across your entire project.

Does generating a color system require specifying an accessibility level?▼

Yes, specifying an accessibility level is required when generating a color system. This input ensures the generated colors.md reference and tokens.json meet the necessary contrast and visual accessibility standards for your target platforms.

What is the best way to maintain design consistency across multiple platforms?▼

The best way to maintain design consistency is to centralize decisions in a project-specific UI design guideline. This generates a unified SKILL.md and reference files that existing teams can adopt to scale design systems across web and mobile projects.

Related Skills

Explore More Design & Creative Skills→
tyronerosstyroneross
1

ui-brainstorm-preamble

Capture UI design context and constraints into a preamble.json configuration file.

Community
Intermediate
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
HellKaiser45HellKaiser45

figma-implement-design

Translate Figma designs into UI code with mapped design tokens.

Community
Intermediate