skills.rest
KojiroSasa
KojiroSasaCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate UI design system proposals with tokens and accessibility annotations.

Updated Aug 23, 2026
Search Tags:#branding#accessibility#handoff#ui-design#visual-design#design-systems#interaction-patterns
One-click install
npx skills add https://github.com/KojiroSasa/www.havoc-it.ro --skill ui-designer-kojirosasa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/KojiroSasa/www.havoc-it.ro/tree/main/.agent/skills/uxagent--ui-designer
Command: npx skills add https://github.com/KojiroSasa/www.havoc-it.ro --skill ui-designer-kojirosasa

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Teams designing interfaces often struggle to maintain visual consistency and scale design systems across products. This skill provides expert guidance to build cohesive UI patterns, accessibility considerations, and robust documentation that align with brand identity.

Core Features & Use Cases

  • Establish design systems and component libraries that ensure consistency across web and mobile apps.
  • Define interaction patterns, accessibility guidelines, and brand-aligned visuals for scalable delivery.
  • Use Case: For a product with multiple panels and states, generate a reusable component suite with tokens and usage docs that developers can implement.

Quick Start

Provide a concise design brief outlining branding, components, and accessibility goals to generate a complete UI design system proposal.

Frequently Asked Questions about ui-designer

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

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

Build a cohesive UI design system by establishing a reusable component library with standardized tokens and usage documentation. This ensures visual consistency across web and mobile panels while streamlining developer implementation.

What is the best way to document interaction patterns and accessibility annotations for developer handoff?▼

Document interaction patterns and accessibility annotations by generating structured design context and component system documentation. This provides developers with clear implementation specs, accessibility guidelines, and token definitions for accurate handoff.

Can I generate a reusable component suite with tokens for products with multiple states?▼

Yes, you can generate a reusable component suite with tokens for multiple product states. This provides structured design context and implementation handoff documentation, ensuring visual consistency across complex interface panels.

How do I align visual design and interaction patterns with brand identity across multiple apps?▼

Align visual design and interaction patterns with brand identity by establishing design systems that enforce consistent UI patterns. This scales brand-aligned visuals and accessibility guidelines across multiple web and mobile apps.

Do I need a design brief to generate a UI design system proposal?▼

Yes, you need a concise design brief to generate a complete UI design system proposal. Outlining your branding, components, and accessibility goals provides the structured context required to establish cohesive UI patterns.

Related Skills

Explore More Design & Creative Skills→
jamesrochabrunjamesrochabrun
194

design-brief-generator

Generate Markdown design briefs with defined sections from structured inputs.

Community
Advanced
mtsatryanmtsatryan
1

ui-designer

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

Community
Advanced
riezriez
1

frontend-implementation-guardrails

Enforce frontend guardrails for design-system alignment, accessibility, and responsive behavior.

Community
Intermediate
zm2231zm2231

handoff-manager

Generate design handoff specifications with component specs, design tokens, and accessibility notes.

Community
Advanced