skills.rest
AlexDevFlow
AlexDevFlowCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

comprehensive-ui-design

Generate a UI design system with tokens, color, typography, and component specs from a client brief.

Updated Aug 23, 2026
Search Tags:#design#ui#accessibility#responsive#tokens#ux#design-system
One-click install
npx skills add https://github.com/AlexDevFlow/Claude10XD --skill comprehensive-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: comprehensive-ui-design
Source: https://github.com/AlexDevFlow/Claude10XD/tree/main/skills/ui
Command: npx skills add https://github.com/AlexDevFlow/Claude10XD --skill comprehensive-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates UI/UX design intelligence into a unified workflow, enabling teams to consistently plan, implement, and review design systems across platforms, ensuring cohesion and accessibility.

Core Features & Use Cases

  • Design intelligence for color palettes, typography, UX guidelines, and chart patterns across multiple tech stacks.
  • Token-driven design system with primitives, semantic tokens, and component tokens, plus CSS variables for consistent styling.
  • Cross-platform patterns with per-page overrides to maintain brand consistency across Web and Mobile.

Quick Start

Provide a concise design brief to trigger a full UI design system generation.

Frequently Asked Questions about comprehensive-ui-design

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

FAQPage Schema
How do I generate a UI design system from a client brief?▼

Generating a UI design system from a client brief involves applying design intelligence to plan tokens, typography, and component specs while ensuring cross-platform accessibility and responsiveness.

What are design tokens and how do they apply to UX guidelines?▼

Design tokens are structured variables (primitives, semantic, component) that map to CSS variables, ensuring consistent UX styling and brand cohesion across web and mobile applications.

Can I use this to create responsive components for both web and mobile?▼

Yes, the system generates cross-platform UI patterns with per-page overrides, validating generated components against accessibility and responsive criteria for both web and mobile interfaces.

What's the best way to maintain brand consistency across scalable apps?▼

Using a token-driven design system is the best way to maintain brand consistency across scalable apps, delivering a master design document, per-page overrides, and a CSS variable map for unified styling.

Does the generated design system include accessibility validation?▼

Yes, the generated design system explicitly validates planned UI tokens, color palettes, and typography against accessibility and responsive criteria before delivering the final CSS variable map.

Related Skills

Explore More Design & Creative Skills→
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-frontend-code-gen

Generate React/TypeScript/Tailwind frontend scaffolds from brand guidelines and design systems.

Community
Advanced
okbest2024okbest2024

ui-ux-pro-max

Generate complete design systems with patterns, styles, colors, typography, and effects.

Community
Advanced
makerjackiemakerjackie
1

tailwind-design-system

Build Tailwind v4 design systems with CSS-first tokens and CVA components.

Community
Advanced
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate