skills.rest
elihuvillaraus
elihuvillarausCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Create design systems, component libraries, and interface specifications for developer handoff.

2|Updated Feb 25, 2026
Search Tags:#accessibility#design system#component library#frontend development#ui design#ux/ui
One-click install
npx skills add https://github.com/elihuvillaraus/skills --skill ui-designer-elihuvillaraus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/elihuvillaraus/skills/tree/main/ui-designer
Command: npx skills add https://github.com/elihuvillaraus/skills --skill ui-designer-elihuvillaraus

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenge of creating visually consistent, accessible, and high-fidelity user interfaces by providing expert guidance on design systems, component libraries, and pixel-perfect implementation.

Core Features & Use Cases

  • Design System Development: Establishes foundational design tokens, component architectures, and visual hierarchy.
  • Pixel-Perfect Interface Creation: Designs detailed components, interactive prototypes, and ensures brand integration.
  • Developer Handoff: Provides clear specifications, documentation, and QA processes for seamless implementation.
  • Use Case: A team needs to build a new design system for a web application. The UI Designer Skill can generate the core design tokens, define button and form input components, and outline a responsive grid system, ensuring consistency and accessibility from the start.

Quick Start

Generate a design system for a new e-commerce platform, focusing on a mobile-first approach and WCAG AA compliance.

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 consistent UI components?▼

Building a design system requires establishing foundational design tokens, defining component architectures, and setting visual hierarchy. This generates consistent, accessible UI components and detailed interface specifications for developer handoff.

What is pixel-perfect UI design and how does it handle developer handoff?▼

Pixel-perfect UI design creates detailed components and interactive prototypes while ensuring brand integration. It handles developer handoff by providing clear specifications, documentation, and QA processes for seamless frontend implementation.

How do I ensure my component library meets WCAG AA compliance?▼

To ensure component libraries meet WCAG AA compliance, apply accessibility standards directly into the foundational design tokens and component architectures. This creates accessible user interfaces that enhance overall user experience.

Can I generate mobile-first UI specifications for a web application?▼

Yes, you can generate mobile-first UI specifications for web applications by focusing on responsive grid systems, detailed component definitions, and strict visual hierarchy. This provides clear specifications and documentation for seamless developer handoff.

What do I need to define design tokens for a new e-commerce platform?▼

Defining design tokens for an e-commerce platform requires establishing foundational visual variables like color, typography, and spacing. This creates a comprehensive design system ensuring brand integration and consistent component architecture.

Best way to document UI design specifications for frontend development?▼

The best way to document UI design specifications is by generating clear specifications, comprehensive documentation, and QA processes. This pixel-perfect documentation ensures seamless developer handoff and accurate frontend implementation of the visual design system.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
MasaKagamiMasaKagami

layout

Analyze interface layouts for spacing, rhythm, and visual hierarchy issues.

Community
Advanced
truchottruchot
2

ux-ui-design

Design UX/UI experiences from user research through interactive prototypes.

Community
Advanced
silentbalanceyhsilentbalanceyh
2

r2-dev-html

Generate layout.html, components.html, and mockup.html from page specifications.

Community
Advanced