skills.rest
garbray
garbrayCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

uxui-designer

Translate product requirements into minimal UX/UI designs and interaction patterns.

Updated Aug 23, 2026
Search Tags:#responsive#ui-design#wireframes#ux#micro-interactions#design-systems#ascii-layouts
One-click install
npx skills add https://github.com/garbray/claude-config --skill uxui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uxui-designer
Source: https://github.com/garbray/claude-config/tree/main/config/skills/uxui-designer
Command: npx skills add https://github.com/garbray/claude-config --skill uxui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps translate product requirements into clear, minimal UX/UI designs and interaction patterns, ensuring consistent, high-quality interfaces.

Core Features & Use Cases

  • Produce precise ASCII UI layouts and component structures for early design exploration.
  • Define responsive viewport variations (mobile, tablet, desktop) and micro-interactions.
  • Iterate quickly with structured questions about intent, constraints, and edge cases.

Quick Start

Use the uxui-designer skill to draft an initial layout for a new screen, including an ASCII layout and a plan for components and interactions.

Frequently Asked Questions about uxui-designer

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

FAQPage Schema
How do I translate product requirements into wireframes and UI layouts?▼

To translate product requirements into wireframes, define minimal UX/UI designs and interaction patterns using ASCII layouts and component architectures. This structures early design exploration for mobile, tablet, and desktop contexts.

What is the best way to design responsive viewport variations for mobile and tablet?▼

Designing responsive viewport variations involves defining specific UI layouts and micro-interactions for mobile, tablet, and desktop contexts. It ensures consistent interfaces across screen sizes during wireframing.

Can I generate ASCII layouts for early UI design exploration?▼

Yes, you can generate ASCII UI layouts to visualize component structures for early design exploration. This approach helps iterate quickly on screens before high-fidelity graphics.

How do I define micro-interactions and component architectures for a design system?▼

Defining micro-interactions and component architectures for design systems requires translating product requirements into structured Markdown guidance. This ensures reproducible handoff and consistent interaction patterns.

Does this approach work for both discovery and wireframing phases?▼

Yes, this approach works for both discovery and wireframing phases by applying structured questions about intent, constraints, and edge cases. It captures design guidance and workflows for interfaces.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
234

designpowers-critique

Evaluate design artefacts against intent, principles, and accessibility standards.

Community
Advanced
junchenghuojunchenghuo
3

product-prototype-blueprint

Generate low-fidelity prototype structures and page flow diagrams with Mermaid or ASCII.

Community
Basic
GunjanGrungeGunjanGrunge
3

frontend-design-spec

Define design tokens, component specs, and GSAP/Framer Motion animations for a content creation platform UI.

Community
Advanced
seb1nseb1n
147

Wireframing

Generate text-based wireframes with component inventories and responsive specifications.

Community
Advanced