skills.rest
rhorba
rhorbaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Generates visual design specifications including color palettes, typography scales, spacing systems, and component styling.

Updated Aug 20, 2026
Search Tags:#typography#design system#color palette#design tokens#wcag#ui design#dark mode
One-click install
npx skills add https://github.com/rhorba/RestoLedger --skill ui-designer-rhorba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/rhorba/RestoLedger/tree/main/skills/ui-designer
Command: npx skills add https://github.com/rhorba/RestoLedger --skill ui-designer-rhorba

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Making consistent visual design decisions—colors, fonts, spacing, component states—is slow and error-prone without a system. This Skill provides ready-to-use design token systems, component patterns, and layout rules so interfaces look polished and pass accessibility standards without reinventing a design system from scratch. ## Core Features & Use Cases - Design Token Systems: Minimal starter tokens for colors, typography, spacing, border radius, and shadows, scaled to project maturity (MVP, growing product, or full design system). - Component Design Patterns: Concrete specs for buttons, forms, and cards including states, sizes, and validation styling. - Responsive & Dark Mode Rules: Layout grids per breakpoint, mobile-first rules, touch target minimums, and dark mode token mapping with CSS variables. - Use Case: A developer asks for a color palette and typography scale for a new SaaS dashboard; the Skill returns a WCAG AA-compliant token set with light/dark variants and a handoff spec for the frontend team. ## Quick Start Ask the AI to design a color palette, typography scale, and button component spec for your web app using the ui-designer skill.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create a design token system for a web app?▼

Start with a minimal token set: 2 brand colors plus semantic colors (success, warning, error, info), one font family with a 1.25-ratio type scale, and a 4px-base spacing grid. Cascade tokens from primitive values to semantic names to component-specific references, and never hardcode hex or pixel values in component styles.

What contrast ratio is required for WCAG AA compliance?▼

WCAG AA requires 4.5:1 contrast for normal text under 18px, 3:1 for large text (18px+ or 14px+ bold), and 3:1 for interactive elements and focus indicators against their backgrounds. Verify values with tools like the WebAIM contrast checker.

How do I implement dark mode with CSS variables?▼

Define all colors as CSS custom properties on :root, then override them under a [data-theme="dark"] selector so swapping the theme attribute updates every component. Use reduced-contrast text colors like #F0F0F0 instead of pure white, and express elevation as lighter surfaces rather than shadows.

Should I build a design system from scratch or use a component library?▼

For MVPs and prototypes, use an existing library like shadcn, Radix, or MUI with just 2 colors and 1 font. Define a minimal custom token set only as the product grows, and reserve a full design system with documentation for mature products.

What is the difference between UI design and UX design skills?▼

UI design covers visual decisions: color, typography, spacing, component styling, and dark mode. UX design handles user flows, information architecture, and wireframes. This Skill receives wireframes from UX work and turns them into polished visual specs for frontend developers.

Related Skills

Explore More Design & Creative Skills→
carson-sweetcarson-sweet
6

Design Wireframes

Generate self-contained HTML/CSS wireframes from user flow definitions and style specifications.

Community
Advanced
Cao-RCao-R

frontend-design

Transform UI style requirements into React and TypeScript code using design tokens.

Community
Advanced
Community-AccessCommunity-Access
387

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

Official
Advanced
Marcus-BoniMarcus-Boni
1

shadcn

Manage shadcn components and project configurations via CLI.

Community
Advanced