web-ui-builder

name	web-ui-builder
description	Generate complete frontend page code using React 19 + Vite 8 + Tailwind CSS 4 + lucide-react from UI descriptions or images. Outputs project structure, component code, and start commands.

Web UI Builder

Automatically generate complete frontend page code from visual descriptions or image references. Fixed tech stack: React 19 + Vite 8 + Tailwind CSS 4 + lucide-react.

Tech Stack

Technology	Version	Purpose
React	19+	UI framework
Vite	8+	Build tool
Tailwind CSS	4+	Styling (CSS-driven, no tailwind.config.js)
lucide-react	1.17+	Icon library
@vitejs/plugin-react	latest	Vite React plugin

Tailwind CSS 4 Notes

Tailwind CSS 4 uses CSS-driven configuration, no tailwind.config.js or postcss.config.js needed:

/* src/index.css — replaces tailwind.config.js + postcss */
@import "tailwindcss";

/* Custom theme colors */
@theme {
  --color-brand-50: #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-500: #6366f1;
  --color-brand-600: #4f46e5;
  --color-brand-700: #4338ca;
}

/* Custom component classes */
@layer components {
  .card { @apply rounded-xl bg-white p-6 shadow-sm border border-gray-100; }
  .btn-primary { @apply rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 transition-colors; }
}

Key changes:

• @tailwind base/components/utilities → @import "tailwindcss"
• Custom themes use @theme directive instead of tailwind.config.js theme.extend
• Custom components use @layer components
• No postcss.config.js needed (handled by Vite)
• No tailwind.config.js content configuration needed

package.json Dependencies

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "lucide-react": "^1.17.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^latest",
    "tailwindcss": "^4.0.0",
    "vite": "^8.0.0"
  }
}

Project Structure

project/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.jsx          # React entry point
    ├── index.css         # @import "tailwindcss" + @theme customization
    ├── App.jsx           # Root component
    ├── LoginPage.jsx     # (on demand) Login page
    ├── DashboardPage.jsx # (on demand) Dashboard
    ├── Sidebar.jsx       # (on demand) Sidebar
    ├── Header.jsx        # (on demand) Header
    └── ...               # (on demand) Other components

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Workflow

User input (description/image) → Extract functional modules → Compose skeleton + content modules → Generate files → Return directory + start command

Component-Driven Strategy

Instead of predefined page types, identify functional modules from user descriptions and compose them on demand:

Skeleton Components (generated as needed)

Component	Use Case
TopNav	Page top navigation (links/brand/search/user menu)
Sidebar	Side menu (icons+labels/hierarchy/user info)
Header	Content area top bar (title/breadcrumbs/actions/notifications)
Footer	Page footer (links/copyright/social)

Content Modules (generated as needed)

Module	Detection Keywords
HeroBanner	"banner/hero/welcome/featured"
FormSection	"form/input/register/login/feedback"
StatsCards	"statistics/metrics/KPI/overview"
DataTable	"table/list/data rows/records"
CardGrid	"cards/grid/gallery/showcase"
ChartSection	"chart/trend/distribution/visualization"
Timeline	"timeline/progress/flow/steps"
Modal	"modal/dialog/confirmation"
Tabs	"tabs/switch/categories"
SearchBar	"search/filter/filtering"

Planning Method

1. Extract functional keywords from user description → match corresponding modules
2. Arrange modules in layout order (top to bottom, left to right)
3. Generate individual component files for each module
4. Main page component composes all modules

Examples:

• "A dashboard with sidebar, stats cards, and a data table" → Sidebar + StatsCards + DataTable
• "A login page with email/password inputs and gradient background" → FormSection(login) + background decoration
• "A product showcase with top nav and card grid" → TopNav + CardGrid + Footer

Generation Guidelines

Style Conventions

• All Tailwind CSS 4 utility classes, customize palette via @theme in index.css
• Default theme: indigo/violet
• Border radius: cards rounded-xl, buttons rounded-lg, inputs rounded-lg
• Shadows: cards shadow-sm
• Icons: all from lucide-react

Code Standards

• Functional components, JSX syntax
• Comment annotations for module sections
• Placeholder images: https://images.unsplash.com/photo-{id} or picsum.photos

Responsive

• Sidebar: 240-280px fixed on desktop, hidden/hamburger on mobile
• Content: responsive, max-w-7xl centered
• Card grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Notes

• Do not generate node_modules/
• Start command: npm install && npm run dev
• Tailwind CSS 4 does not use tailwind.config.js or postcss.config.js
• All icons from lucide-react, no external paid icon libraries
• Use mock data, no real API calls