skills.rest
belokonm
belokonmCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate design system specifications with tokens, components, and accessibility notes for developers.

8|11|Updated Feb 15, 2026
Search Tags:#design#accessibility#handoff#tokens#ui-design#design-systems
One-click install
npx skills add https://github.com/belokonm/claude-supercode-skills --skill ui-designer-belokonm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/belokonm/claude-supercode-skills/tree/main/ui-designer-skill
Command: npx skills add https://github.com/belokonm/claude-supercode-skills --skill ui-designer-belokonm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating cohesive, accessible UI designs and scalable design systems is time-consuming and prone to inconsistency without a structured approach.

Core Features & Use Cases

  • Design token architectures (colors, typography, spacing) and scalable component libraries for web and mobile.
  • Accessibility-focused design patterns, including keyboard navigation, screen-reader support, and WCAG 2.1 AA compliance.
  • Developer handoff: component specs, usage guidelines, and documentation to speed production.

Quick Start

Generate a cohesive design system specification including tokens, components, and accessibility notes to hand off to your frontend team.

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 scalable design system for web and mobile?▼

Yes, you can perform an accessibility audit to evaluate your interfaces against WCAG 2.1 AA compliance. The process identifies gaps in keyboard navigation and screen-reader support, applying accessibility-focused design patterns to ensure multi-device layouts are usable.

What is the best way to structure developer handoff documentation for UI components?▼

The best way to structure developer handoff documentation is to generate detailed component specs, usage guidelines, and interaction patterns. Providing explicit design tokens and accessibility annotations speeds up frontend production and prevents implementation gaps.

How do I generate design tokens for a UI redesign?▼

You generate design tokens for a UI redesign by standardizing your UI elements into a structured token architecture that defines colors, typography, and spacing. This ensures consistency across feature designs and multi-device layouts during the redesign process.

Can I use this approach to standardize UI design across multiple feature designs?▼

Yes, you can use this approach to standardize UI design across feature designs by applying a structured design-system creation process. It enforces consistent interaction patterns, component specs, and accessibility annotations, eliminating inconsistent interfaces.

Do I need existing component specs to start building a design token architecture?▼

No, you do not need existing component specs to start building a design token architecture. You can generate a cohesive design system specification from scratch, defining tokens, components, and accessibility notes to hand off to your frontend team.

Related Skills

Explore More Design & Creative Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
soeiroosoeiroo

wireframe-spec

Specify annotated wireframe layouts with content priority and behavior annotations.

Community
Intermediate
louisfghbvclouisfghbvc
4

design-review

Audit live interfaces and fix visual inconsistencies with atomic commits.

Community
Advanced