skills.rest
jeffwweee
jeffwweeeCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Updated Feb 20, 2026
Search Tags:#design system#tailwind css#ux design#ui design#wireframes#mockups#material ui
One-click install
npx skills add https://github.com/jeffwweee/dev-workspace --skill ui-designer-jeffwweee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/jeffwweee/dev-workspace/tree/main/.claude/skills/ui-designer
Command: npx skills add https://github.com/jeffwweee/dev-workspace --skill ui-designer-jeffwweee

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the UI/UX design process by providing tools and patterns for creating wireframes, interactive mockups, and detailed design specifications, bridging the gap between design and development.

Core Features & Use Cases

  • Wireframing: Quickly generate low-fidelity HTML wireframes to visualize layouts.
  • Mockup Creation: Build interactive high-fidelity mockups using React and Material UI, or standalone HTML.
  • Design Specifications: Document UI elements with clear typography, spacing, and color guidelines.
  • Component Patterns: Provides reusable code snippets for common UI components in Material UI and Tailwind CSS.
  • Use Case: Design a new dashboard interface by first creating wireframes, then developing interactive mockups with Material UI components, and finally documenting the design system for frontend developers.

Quick Start

Use the ui-designer skill to create a wireframe for a login form.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create interactive mockups using Material UI and Tailwind CSS?▼

To create interactive mockups, this Skill generates high-fidelity React components using Material UI and standalone HTML styled with Tailwind CSS. It provides reusable code snippets for common UI components to accelerate rapid prototyping and visual layout creation.

Can I generate low-fidelity wireframes for layout visualization before building mockups?▼

Yes, you can generate low-fidelity HTML wireframes to quickly visualize structural layouts. This allows you to establish basic UI structure and iterate on page composition before progressing to high-fidelity React mockups and detailed design specifications.

What is the best way to document design specifications for frontend developer handoff?▼

The best way to document design specifications is to generate detailed typography, spacing, and color guidelines. This Skill bridges the gap between design and development by producing comprehensive documentation adhering to Material UI and Tailwind CSS design systems for frontend handoff.

Does this UI design workflow support both React and standalone HTML for prototyping?▼

Yes, this UI design workflow supports both React and standalone HTML for prototyping. You can build low-fidelity HTML wireframes for initial layouts, then transition to interactive high-fidelity mockups using React and Material UI components for advanced rapid prototyping.

How do I design a new dashboard interface from wireframes to final components?▼

To design a dashboard interface, start by generating low-fidelity HTML wireframes to map the layout, then develop interactive mockups using Material UI components, and finally document the design system guidelines for frontend developers to implement.

Related Skills

Explore More Design & Creative Skills→
duggal1duggal1
2

teach-impeccable

Collect project design context and persist guidelines to the AI config file.

Community
Advanced
joi-fairsharejoi-fairshare
1

design-implement-web

Generate token-compliant React and Next.js components from approved HTML mockups or PNG baselines.

Community
Advanced
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate