🎨 AI UI Design Generator

A modern AI UI design generator featuring HTML templates with multiple design styles and intelligent preview tools.

✨ Features

• 🤖 AI Smart Generation - Auto-generate UI designs based on requirement descriptions
• 🎯 Multi-Style Templates - 9 carefully designed UI style templates
• 👀 Real-time Preview - Built-in AI design previewer
• 📱 Responsive Design - Adaptive to various device screens
• 🚀 Ready to Use - Complete HTML/CSS/JS code
• 🎨 Modern Design - Based on Tailwind CSS and FontAwesome

📁 Project Structure

UI-Template/
├── 📄 index.html          # AI UI Design Generator (Previewer)
├── 🚀 start.sh            # Project Startup Script
├── 📂 htmls/              # HTML Template Pages (9 Design Styles + App Examples)
│   ├── 🌌 Cyberpunk-doubao.html     # Cyberpunk Style UI
│   ├── 🌐 3d-doubao.html           # 3D Style UI
│   ├── 🎨 Bauhaus-doubao.html      # Bauhaus Design Style UI
│   ├── 📱 Flat-doubao.html         # Flat Design Style UI
│   ├── 🚀 Futurism-doubao.html     # Futurism Style UI
│   ├── ⚙️ Industrial-doubao.html   # Industrial Style UI
│   ├── 💫 Modern-minimal-doubao.html # Modern Minimal Style UI
│   ├── 🌿 Organic-doubao.html      # Organic Natural Style UI
│   ├── 📻 Retro-vintage-doubao.html # Retro Vintage Style UI
│   └── 💎 health-doubao.html       # Glassmorphism Design UI Example
├── 📄 LICENSE             # MIT License
└── 📄 README_CN.md        # Chinese Project Documentation

🎨 Design Styles

🌌 Cyberpunk Style

• Color Scheme: Dark background + Neon colors
• Design Elements: Neon glow, glitch art, tech aesthetics
• Application Scenarios: Gaming, tech apps, futuristic products

🌐 3D Style

• Color Scheme: 3D color palette + Light and shadow effects
• Design Elements: 3D visual effects, depth perception, spatial layers
• Application Scenarios: Game interfaces, product showcases, interactive apps

🎨 Bauhaus Style

• Color Scheme: Primary colors + Functional color scheme
• Design Elements: Geometric shapes, clean lines, modular design
• Application Scenarios: Educational apps, corporate websites, design systems

📱 Flat Design Style

• Color Scheme: High saturation colors + Clean palette
• Design Elements: Flat icons, simple buttons, clear typography
• Application Scenarios: Mobile apps, simple tools, rapid prototyping

🚀 Futurism Style

• Color Scheme: Cool tones + Tech blue color scheme
• Design Elements: Streamlined design, gradient effects, tech textures
• Application Scenarios: Tech products, innovative apps, future concepts

⚙️ Industrial Style

• Color Scheme: Industrial metallic colors + Dark tones
• Design Elements: Metallic texture, grid patterns, mechanical elements
• Application Scenarios: Industrial software, dashboards, tool applications

💫 Modern-Minimal Style

• Color Scheme: Clean white + Soft colors
• Design Elements: Flat design, minimal lines, whitespace design
• Application Scenarios: Corporate applications, productivity tools, efficiency apps

🌿 Organic-Natural Style

• Color Scheme: Green color palette + Natural tones
• Design Elements: Rounded shapes, natural textures, biomorphic forms
• Application Scenarios: Health apps, eco-friendly products, lifestyle applications

📻 Retro-Vintage Style

• Color Scheme: Warm tones + Classic colors
• Design Elements: Vintage fonts, texture effects, nostalgic elements
• Application Scenarios: Brand websites, art displays, creative works

🚀 Quick Start

Method 1: Using Startup Script (Recommended)

# Add execute permission to the script
chmod +x start.sh

# Start the project
./start.sh

Access URLs:

• Local Access: http://localhost:8000/index.html
• LAN Access: http://[Your IP Address]:8000/index.html

Method 2: Manual Start

# Start Python HTTP server
python3 -m http.server 8000 --bind 0.0.0.0 --directory .

# Then access
http://localhost:8000/index.html

📋 Usage Guide

AI Design Generator Features

• Smart Input: Enter requirement descriptions, AI will generate corresponding UI designs
• Multi-Style Display: Preselected 9 design style templates for selection
• Real-time Preview: Select design style for immediate preview effects
• Card-based Browsing: Intuitive design style showcase interface
• Fullscreen Preview: Click cards to enter fullscreen preview mode
• New Window Open: View complete designs in new tabs
• Responsive Design: Automatically adapts to different device display effects

Custom Templates

1. Create new HTML files in the htmls/ directory
2. Follow project design standards and code structure
3. Use Tailwind CSS for styling
4. Update the htmlFiles array in index.html with new template information

🛠️ Tech Stack

• HTML5 - Semantic markup
• Tailwind CSS - Atomic CSS framework
• FontAwesome - Icon font library
• JavaScript - Interactive functionality
• Python HTTP Server - Local development server

🎯 Design Principles

Responsive Design

• Mobile-first design approach
• Adaptive to mobile, tablet, and desktop devices
• Smooth cross-device experience

User Experience

• Intuitive navigation and operation
• Clear information architecture
• Fast loading and response

Code Quality

• Clear code structure
• Semantic HTML
• Modular CSS
• Maintainable JavaScript

📱 Design Template Showcase

🎨 Nine Design Style Templates

The project includes 9 carefully designed UI style templates:

🌌 Cyberpunk Style

• Neon glow effects, tech fonts, glitch art elements

🌐 3D Style

• 3D visual effects, depth perception, spatial layering

🎨 Bauhaus Style

• Geometric shapes, clean lines, modular design

📱 Flat Design Style

• Flat icons, simple buttons, clear typography

🚀 Futurism Style

• Streamlined design, gradient effects, tech textures

⚙️ Industrial Style

• Metallic texture, grid patterns, mechanical elements

💫 Modern-Minimal Style

• Flat design, minimal lines, whitespace design

🌿 Organic-Natural Style

• Rounded shapes, natural textures, biomorphic forms

📻 Retro-Vintage Style

• Vintage fonts, texture effects, nostalgic elements

🏥 Health Tracking App Example

Showcases interface design for health management applications, including:

• Health data display
• Progress charts
• Card-based layout
• Responsive navigation

🔧 Custom Development

Adding New UI Templates

1. Create new HTML files in the htmls/ directory
2. Reference existing template structure and design styles
3. Update the htmlFiles array in index.html JavaScript
4. Add filename, display name, description and other information

Modifying AI Design Generator

• Edit JavaScript code in index.html
• Customize styles and interaction effects
• Extend AI generation functionality with prompt configuration
• Add new UI design feature characteristics

Updating Prompt Configuration

In index.html JavaScript, you can customize:

• Prompt words for design style descriptions
• Mapping logic for different style templates
• User interactions during generation process

📄 License

This project uses the MIT License, see LICENSE file for details.

🤝 Contributing

Welcome to submit Issues and Pull Requests to improve this project!

📞 Contact

For questions or suggestions, please contact via:

• Submit GitHub Issues
• Send email feedback

---

---

📊 Project Statistics

• ✅ AI Smart Generation - Intelligent UI design generation based on descriptions
• ✅ 9 Design Styles - Covering all areas of modern design
• ✅ 10 HTML Pages - Complete interactive templates
• ✅ 1 AI Generator - Intelligent design and real-time preview functionality
• ✅ 100% Open Source - Complete source code customizable

⭐ If this project helps you, please give us a Star!

AI-powered modern UI design generator with multiple design styles to make creation simpler!