skills.rest
mtsatryan
mtsatryanCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate structured design guidance, component systems, and handoff documentation for web and mobile interfaces.

1|Updated Apr 23, 2026
Search Tags:#accessibility#handoff#ui-design#visual-design#interaction-design#design-systems
One-click install
npx skills add https://github.com/mtsatryan/openclaw-ai-agents --skill ui-designer-mtsatryan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/mtsatryan/openclaw-ai-agents/tree/main/ui-designer
Command: npx skills add https://github.com/mtsatryan/openclaw-ai-agents --skill ui-designer-mtsatryan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create consistent, accessible, and visually compelling user interfaces across products by providing a structured design process, component systems, and thorough handoff documentation.

Core Features & Use Cases

  • Establish design context and brand-aligned briefs to ensure a shared foundation.
  • Develop scalable component systems and interaction patterns for web and mobile.
  • Provide accessibility annotations and comprehensive handoff documentation to streamline developer implementation.
  • Generate design tokens and style guidelines to maintain visual consistency across platforms.

Quick Start

Provide a design brief and brand guidelines to initiate UI design work.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create accessible UI designs with consistent handoff documentation?▼

To create accessible UI designs with reliable handoff, provide a design brief and brand guidelines to generate structured component systems, accessibility annotations, and developer-ready specifications for web and mobile interfaces.

What is the best way to establish design context for cross-brand UI consistency?▼

The best way to establish design context for cross-brand UI consistency is to capture brand-aligned briefs and generate design tokens, ensuring a shared foundation and visual consistency across multiple product platforms.

How do I generate design tokens and style guidelines for web and mobile interfaces?▼

You generate design tokens and style guidelines by inputting your brand guidelines into the UI design process, which produces scalable component systems and interaction patterns for consistent web and mobile outcomes.

Does this UI design approach work for both web and mobile component systems?▼

Yes, this UI design approach works for both web and mobile by developing scalable component systems and interaction patterns tailored for cross-platform visual consistency and comprehensive frontend implementation.

Can I use this to improve visual design quality across different brands?▼

Yes, you can use this to improve cross-brand visual design quality by applying structured design execution, generating comprehensive documentation, and maintaining consistent outcomes through established style guidelines.

What do I need to provide to start generating UI design specifications?▼

To start generating UI design specifications, you need to provide a design brief and brand guidelines, which initiates the context gathering, design execution, and accessibility annotation process for frontend implementation.

Related Skills

Explore More Design & Creative Skills→
xlsamaxlsama

teach-impeccable

Analyze project files and user answers to write a Design Context section for CLAUDE.md.

Community
Intermediate
basmawebinfo-hubbasmawebinfo-hub

UI Designer

Create scalable UI design systems with WCAG AA accessibility and developer handoff specifications.

Community
Advanced
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced
zzafergokzzafergok
1

ui-design-system

Generate design tokens and document components for scalable UI systems.

Community
Intermediate