skills.rest
kayroalexandre
kayroalexandreCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-ui-designer

Generate UI design systems with design tokens, responsive layouts, and WCAG standards.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#design system#visual design#component library#responsive
One-click install
npx skills add https://github.com/kayroalexandre/kayrogomesoff --skill design-ui-designer-kayroalexandre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-ui-designer
Source: https://github.com/kayroalexandre/kayrogomesoff/tree/main/.kiro/skills/design-ui-designer
Command: npx skills add https://github.com/kayroalexandre/kayrogomesoff --skill design-ui-designer-kayroalexandre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps streamline the process of designing consistent and accessible user interfaces, reducing manual effort and ensuring high-quality visual standards.

Core Features & Use Cases

  • Develops comprehensive design systems including color, typography, and spacing for scalable UI patterns.
  • Creates detailed, pixel-perfect components such as buttons, forms, and navigation elements for web or app interfaces.
  • Supports responsive and accessibility standards by establishing breakpoints, ARIA compliance, and visual hierarchy rules to enhance usability across devices and for all users.
  • Use Case: A UX designer can generate a full design system documentation with color palettes, component libraries, and accessibility guidelines ready for handoff to developers.

Quick Start

Review your brand guidelines, then use this Skill to generate a complete UI design system for your new product.

Frequently Asked Questions about design-ui-designer

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

FAQPage Schema
How do I create a UI design system that ensures visual consistency and accessibility?▼

A UI design system ensures visual consistency and accessibility by automating the creation of design tokens, responsive layouts, and WCAG standards into a unified component library. This reduces manual effort and maintains high-quality visual standards.

What is the best way to generate accessible component libraries for digital products?▼

Generating accessible component libraries involves defining detailed, pixel-perfect UI components like buttons and forms while establishing ARIA compliance and visual hierarchy rules. This ensures usability across web and app interfaces for all users.

How do I integrate WCAG standards and responsive breakpoints into design guidelines?▼

Integrating WCAG standards and responsive breakpoints into design guidelines requires establishing specific accessibility rules and screen breakpoints. This ensures interfaces adapt correctly across devices while maintaining compliance.

Can I automate design token creation for scalable UI patterns?▼

Automating design token creation streamlines the development of comprehensive UI patterns for color, typography, and spacing. This provides a scalable foundation for pixel-perfect interfaces across multiple platforms.

Do I need existing brand guidelines to generate UI design system documentation?▼

Reviewing existing brand guidelines before generating UI design system documentation is recommended. This ensures the automated output, including color palettes and component libraries, accurately reflects your visual identity for developer handoff.

What limitations exist when automating pixel-perfect components for web or app interfaces?▼

Limitations when automating pixel-perfect components depend on the initial brand guidelines provided. While automation establishes scalable patterns and accessibility compliance, complex custom interactive behaviors may still require manual refinement.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate
WebWakaHubWebWakaHub
20

UI Designer

Design accessible, pixel-perfect UI design systems with WCAG AA compliance.

Official
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced