# UI Generator

> Generate UI components from natural language descriptions. Use when: user asks for a page, component, or UI element. Triggers: "create page", "add component", "show form", "make button", "страница", "компонент", "форма".

- Skill: `majiayu000/ui-generator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ui-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ui-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ui-generator

---


# UI Generator

Create beautiful UI from descriptions. Integrates with theme-factory.

## Process

1. **Understand request**
   - "Login page" → form with email/password
   - "Dashboard" → stats cards, charts, tables
   - "Settings" → form sections, toggles

2. **Apply theme**
   - Load current theme from theme-factory
   - Use theme colors and fonts
   - Follow frontend-design principles

3. **Generate code**
   - React/Next.js components
   - Tailwind CSS styling
   - Responsive by default

4. **Preview**
   - Hot reload in browser
   - User sees result immediately

## Component Patterns

| Request | Components |
|---------|------------|
| "login page" | Form, inputs, button, link |
| "dashboard" | Stats cards, chart, table |
| "settings" | Sections, toggles, form |
| "landing page" | Hero, features, CTA, footer |
| "pricing" | Tier cards, comparison table |
| "profile" | Avatar, info, edit form |

## Design Rules

From frontend-design skill:
- No Inter, Roboto, Arial
- No purple gradients on white
- Distinctive, memorable aesthetics
- Motion and micro-interactions

## Usage

User says: "Add a pricing page with 3 tiers"

1. Generate PricingPage component
2. Create PricingTier subcomponent
3. Apply current theme
4. Add to routes
5. Show preview: "Here's your pricing page"