skills.rest
OpenLabor
OpenLaborOFFICIAL
Explore all skills by this author →
Website𝕏@openlaboraiGitHub

UI Design

Create accessible web and mobile interfaces with design system guidelines.

4|Updated Mar 6, 2026
Search Tags:#design#ui#accessibility#prototyping#ux#design-system
One-click install
npx skills add https://github.com/OpenLabor/openlabor --skill ui-design-openlabor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Design
Source: https://github.com/OpenLabor/openlabor/tree/main/skills_archive/ui-design
Command: npx skills add https://github.com/OpenLabor/openlabor --skill ui-design-openlabor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing user interfaces that are visually appealing, accessible, and consistent across platforms is time-consuming and error-prone; this skill provides a structured approach to create cohesive UI designs.

Core Features & Use Cases

  • Design system foundations: color, typography, spacing, components, and IA guidance to maintain consistency.
  • Cross-platform workflows: web and mobile design with responsive considerations and accessibility (WCAG) compliance.
  • Real-world scenario: when starting a new product, apply the UI design framework to deliver a ready-to-ship set of screens that follow the design system and accessibility guidelines.

Quick Start

Open your project and outline the UI design system, including color palette, typography, and component library, then apply it to the initial screen set.

Frequently Asked Questions about UI Design

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

FAQPage Schema
How do I create a cohesive UI design system for web and mobile platforms?▼

Create a cohesive UI design system by defining color palettes, typography, spacing, and component libraries. This structured approach ensures visual consistency and accessibility across responsive web and mobile platforms.

What is the best way to ensure my user interfaces meet WCAG accessibility standards?▼

The best way to meet WCAG accessibility standards is to apply a structured UI design framework that enforces accessibility rules during prototyping. This ensures usable interfaces for all users across platforms.

How do I apply design system guidelines to rapid prototyping?▼

Apply design system guidelines to rapid prototyping by first outlining your component library and spacing rules, then using these documented components to quickly build ready-to-ship responsive screens.

Can I use this UI design approach for both web and mobile product development?▼

Yes, you can use this UI design approach for both web and mobile product development. It provides cross-platform workflows with responsive considerations to support scalable product growth.

Why does designing consistent user interfaces across platforms take so much time?▼

Designing consistent user interfaces is time-consuming because it requires manually aligning color, typography, and component guidelines across platforms. A structured design system automates these rules to reduce errors.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
Leon0050Leon0050

frontend-design

Design production-grade frontend interfaces with HTML/CSS/JS and modern frameworks.

Community
Advanced
tiankong0101-bytetiankong0101-byte

ui-ux-pro-max

Create design systems, component specifications, and interactive prototypes for software products.

Community
Advanced
Festo-WampambaFesto-Wampamba

stitch-design-taste

Generate DESIGN.md design system specifications for Google Stitch.

Community
Advanced