UI Designer

Automate UI design systems with component libraries and WCAG AA tokens.

Updated Apr 16, 2026

Search Tags:#accessibility #handoff #tokens #ui-design #design-system #responsive-design #component-library

Ready to run

npx skills add https://github.com/jc180105/.opencode --skill ui-designer-jc180105

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: UI Designer
Source: https://github.com/jc180105/.opencode/tree/main/.opencode/skills/design-ui-designer
Command: npx skills add https://github.com/jc180105/.opencode --skill ui-designer-jc180105

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and maintain pixel-perfect, accessible UI systems that scale across brands while ensuring consistency and efficient collaboration between design and development teams.

Core Features & Use Cases

Design comprehensive design systems with component libraries, design tokens, and scalable typography.
Deliver handoff-ready specifications, documentation, and QA processes to enable accurate implementation.
Provide accessibility-first design and theming for dark mode and responsive behavior across devices.

Quick Start

Provide a starter design-system outline and a first-pass component library for a brand.

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 system with scalable tokens and accessible components?▼

A design system with scalable tokens ensures brand consistency by automating component library creation, defining token variables, and applying responsive design and accessibility rules across web and mobile platforms.

What's the best way to generate handoff-ready specifications for a component library?▼

Generating handoff-ready specifications requires documentation and QA processes built into the component library workflow, enabling development teams to implement pixel-perfect interfaces with accurate design tokens and responsive behavior.

How do I ensure my UI design meets WCAG AA accessibility standards?▼

Ensuring UI design meets WCAG AA accessibility standards involves integrating accessibility-first design principles directly into component libraries, verifying color contrast, scalable typography, and responsive behavior across web and mobile interfaces.

Can I use a single component library for both web and mobile responsive design?▼

A single component library supports responsive design across web and mobile when it uses scalable design tokens and responsive behavior definitions, allowing interfaces to adapt while maintaining brand consistency and accessibility standards.

How do I set up dark mode theming without breaking my existing design tokens?▼

Setting up dark mode theming requires defining scalable design tokens that accommodate multiple themes while applying accessibility-first principles to maintain WCAG AA contrast compliance across light and dark modes in your component library.

When do I need a formal design system versus individual UI components?▼

A formal design system is needed when product teams require brand-consistent interfaces, scalable tokens, and accessible components across web and mobile, whereas individual UI components lack the coordinated token definitions and handoff documentation needed for team collaboration.