From ui-design-visualizer
Quick wireframe generator - creates ASCII wireframes from simple descriptions
How this command is triggered — by the user, by Claude, or both
Slash command
/ui-design-visualizer:generate-wireframeThe summary Claude sees in its command listing — used to decide when to auto-load this command
I'll help you quickly generate wireframes for your UI design. ## Quick Wireframe Generation Simply describe what you need, and I'll create ASCII wireframes showing the layout structure. ### Example Requests **Simple:** - "Login page with email and password" - "Product card with image, title, price, and add to cart button" - "Dashboard with 4 stat cards and a chart" **Detailed:** - "E-commerce product page with image gallery, product details, pricing, reviews, and related products section" - "SaaS landing page with hero section, features grid, pricing table, and testimonials" - "Mobile ...
I'll help you quickly generate wireframes for your UI design.
Simply describe what you need, and I'll create ASCII wireframes showing the layout structure.
Simple:
Detailed:
For each wireframe, you'll get:
ASCII Wireframe - Visual representation using text characters
┌─────────────────────┐
│ [Logo] [Menu] │
├─────────────────────┤
│ │
│ Main Content │
│ │
└─────────────────────┘
Layout Description - Explanation of sections and components
Responsive Variants - Desktop, tablet, and mobile versions
Component Breakdown - List of UI components needed
Interaction Notes - Key user interactions and flows
Specify any of these to customize your wireframe:
What would you like to wireframe? Just describe it in a sentence or two, and I'll generate the layout for you.
Examples:
npx claudepluginhub ehssanatassi/ui-marketplace --plugin ui-design-visualizer