ui-designer

Name: ui-designer
Availability: InStock
Author: belokonm

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

Ready to run

npx skills add https://github.com/belokonm/claude-supercode-skills --skill ui-designer-belokonm

💬 Prompt for ChatGPT / Claude Chat▼

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.