skills.rest
MMXC
MMXCCOMMUNITY
Explore all skills by this author →
GitHub

vibex-ui-design

Generate React UI components and prototypes from design system specifications.

Updated Feb 16, 2026
Search Tags:#design system#prototype generation#ui design#react components#frontend design#ux/ui
One-click install
npx skills add https://github.com/MMXC/openclaw-back --skill vibex-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vibex-ui-design
Source: https://github.com/MMXC/openclaw-back/tree/main/workspace/skills/vibex-ui-design
Command: npx skills add https://github.com/MMXC/openclaw-back --skill vibex-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the UI design process by generating aesthetically pleasing and modern user interface prototypes based on specific page requirements, integrating professional design systems and unique aesthetic directions.

Core Features & Use Cases

  • UI Prototype Generation: Creates visually appealing UI designs tailored to given page needs.
  • Design System Integration: Applies established design principles for color, spacing, typography, and more.
  • Style Customization: Offers choices from various modern UI styles like Minimalism, Glassmorphism, and Bento Grid.
  • Use Case: Generate a modern, minimalist login page design for a new SaaS product, ensuring consistent branding and user experience.

Quick Start

Use the vibex-ui-design skill to generate a React component for a login page with a soft gradient style.

Frequently Asked Questions about vibex-ui-design

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

FAQPage Schema
How do I generate a React component for a UI prototype with a specific design style?▼

You can generate React component UI prototypes by providing page requirements and design system specifications, choosing from styles like minimalism, glassmorphism, or bento grid to ensure the output matches your desired aesthetic.

What UI styles are supported for frontend prototype generation?▼

Supported UI styles for frontend prototype generation include minimalism, glassmorphism, and bento grid, each applying detailed guidelines for color palettes, spacing, typography, and animations.

Can I use this to create a design system for a SaaS product?▼

Yes, you can create a consistent design system for a SaaS product by generating modern UI prototypes that integrate established principles for color, spacing, typography, and branding.

How do I apply glassmorphism and gradient styles to a login page prototype?▼

To apply glassmorphism or gradient styles to a login page prototype, specify the aesthetic direction in your page requirements, and the generated React components will follow the corresponding color, spacing, and animation guidelines.

Does UI prototype generation include rules for typography and spacing?▼

Yes, UI prototype generation includes detailed design system guidelines that specifically address typography, spacing, color palettes, and animations to ensure professional and consistent user interface output.

What is the best way to generate a bento grid layout for a modern UI design?▼

The best way to generate a bento grid layout is to specify bento grid as your preferred style, which produces a modern UI design with accurate spacing, typography, and aesthetic component arrangements.

Related Skills

Explore More Design & Creative Skills→
mbpzmbpz

ui-design

Create UI/UX design specifications and prototypes for web and mini programs.

Community
Advanced
yoshihiko555yoshihiko555

frontend-test-author

Fix and place Vitest and Testing Library tests for Next.js/React frontend projects.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic