skills.rest
viably-labs
viably-labsOFFICIAL
Explore all skills by this author →
GitHub

ui-designer

Generate React/Tailwind/Framer Motion UI designs and design systems from brief prompts.

Updated Mar 10, 2026
Search Tags:#ui#a11y#prototyping#tailwind#ux#framer-motion#design-systems
One-click install
npx skills add https://github.com/viably-labs/vibegent --skill ui-designer-viably-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/viably-labs/vibegent/tree/main/.agents/skills/mattnigh-ui-designer
Command: npx skills add https://github.com/viably-labs/vibegent --skill ui-designer-viably-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ui/ux teams often struggle to translate vision into cohesive, production-ready interfaces; this skill provides a structured, AI-assisted workflow to design systems, components, and interactive prototypes that align with brand and accessibility goals.

Core Features & Use Cases

  • Design System Architect: build a scalable design system and component library that reflects a firm visual language.
  • Prototyping & Interaction: create responsive, animated UI prototypes using React/Tailwind/Framer Motion.
  • Documentation & Accessibility: generate design docs, style guides, and accessibility considerations for dev handoff.

Quick Start

Outline your design goals, platform, and brand constraints and I will generate a complete UI design plan including a design system, components, and interaction patterns.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I generate production-ready UI designs from a brief prompt?▼

To generate production-ready UI designs, you provide a brief prompt outlining your design goals, platform, and brand constraints to receive a complete UI design plan with components, design systems, and interaction patterns.

Can I build a scalable design system and component library using React and Tailwind?▼

You can build a scalable design system and component library using React and Tailwind that reflects a firm visual language, ensuring consistency and accessibility across your interfaces.

How do I ensure my UI prototypes meet accessibility and developer-ready specifications?▼

To ensure UI prototypes meet accessibility standards, the generated designs enforce a11y compliance and produce design docs, style guides, and developer-ready specifications for seamless dev handoff.

Do I need to provide brand constraints to generate a cohesive UI design system?▼

You need to provide brand constraints, design goals, and platform specifications so the system can generate a cohesive UI design system that aligns with your firm visual language and accessibility goals.

What is the best way to create responsive layouts for dashboards and mobile apps?▼

The best way to create responsive layouts for dashboards and mobile apps is to generate interactive prototypes using React, Tailwind, and Framer Motion that enforce performance and accessibility.

Related Skills

Explore More Design & Creative Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
hgxszhj-pixelhgxszhj-pixel
2

frontend-dev

Automate full-stack frontend page creation with AI-driven design and asset generation.

Community
Advanced
FoundationForgeFoundationForge

design-handoff

Generate developer handoff documentation from Figma URLs or design descriptions.

Official
Intermediate
tiankong0101-bytetiankong0101-byte

ui-ux-pro-max

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

Community
Advanced