skills.rest
Unicorn
UnicornOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Updated Dec 3, 2025
Search Tags:#design#accessibility#ui-design#wireframes#ux#design-systems#component-library
One-click install
npx skills add https://github.com/Unicorn/Radium --skill ui-design-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-agent
Source: https://github.com/Unicorn/Radium/tree/main/skills/design/ui-design-agent
Command: npx skills add https://github.com/Unicorn/Radium --skill ui-design-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables teams to craft intuitive, accessible UI designs and design systems, accelerating the creation of user interfaces that look great and behave consistently.

Core Features & Use Cases

  • Design user interfaces and layouts
  • Create design systems and component libraries
  • Design user flows and interactions
  • Create wireframes and mockups
  • Design responsive layouts
  • Apply accessibility best practices
  • Create design specifications and guidelines

Quick Start

Provide product requirements and brand guidelines to generate UI designs and a design system.

Frequently Asked Questions about ui-design-agent

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

FAQPage Schema
How do I create a design system for web and mobile applications?▼

Create a design system by defining color and typography tokens, building a component library, and establishing responsive layouts. This generates consistent UI patterns and accessibility guidelines for web and mobile platforms.

How do I generate wireframes and interaction specs from product requirements?▼

Generate wireframes and interaction specs by providing product requirements and brand guidelines. The system processes these inputs to deliver UI layouts, interaction specifications, and mockups for your user flows.

Can I apply accessibility best practices directly into my UI components?▼

Yes, you can apply accessibility best practices into UI components by generating accessibility guidelines alongside design specifications. This ensures your user interfaces and layouts meet compliance standards across multiple platforms.

What is the best way to design responsive layouts and component libraries?▼

The best way to design responsive layouts and component libraries is to define design tokens for color and typography first. This establishes a scalable system that delivers consistent UI patterns across product teams.

Do I need brand guidelines to generate UI mockups and design specifications?▼

Yes, providing brand guidelines and product requirements is necessary to generate UI mockups and design specifications. This input ensures the resulting wireframes, layouts, and component libraries match your visual identity.

Why does my UI design lack consistency across different product teams?▼

Your UI design lacks consistency because it is missing a unified design system. Defining shared color and typography tokens, alongside a standard component library, delivers consistent behavior and appearance across product teams.

Related Skills

Explore More Design & Creative Skills→
howdeployhowdeploy
15

design-consultation

Generate a DESIGN.md design system with typography, color, spacing, and motion guidelines.

Community
Advanced
manutejmanutej
61

wireframing

Create low- and high-fidelity wireframes with annotations for web and mobile interfaces.

Community
Intermediate
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced
LuisSambranoLuisSambrano
7

ui-prototype

Generate visual mockups and wireframes from textual descriptions.

Community
Basic