Design2Code 🚀

📋 Project Overview

Design2Code is a full-stack AI-powered web application that converts website design images and natural language prompts into clean, responsive HTML code. Built during a Hackathon, this project leverages Google's Gemini AI API to analyze visual designs and generate production-ready front-end code in seconds.

Whether you're a designer who wants quick prototypes, a developer looking to accelerate development, or a student learning web development, Design2Code eliminates repetitive coding and lets you focus on what matters.

The Problem It Solves

⏳ Slow Prototyping: Converting design mockups to code manually takes hours
🎨 Designer-Developer Gap: Designers struggle to communicate exact styling to developers
📱 Responsive Design: Building responsive layouts requires extensive media queries and testing
💡 Ideation Speed: Rapid iteration and prototyping becomes a bottleneck

Target Users

🎨 UI/UX Designers - Convert mockups to working prototypes instantly
👨‍💻 Frontend Developers - Generate boilerplate code and focus on complex logic
🏢 Startups & Agencies - Speed up project delivery and reduce development time
📚 Students & Learning - Understand HTML/CSS best practices through AI-generated code

✨ Core Features

1. Image-to-Code Generation

Upload website design screenshots (PNG/JPEG)
AI analyzes layout, colors, typography, and spacing
Generates semantic HTML5 with embedded CSS
Creates responsive designs automatically

2. Prompt-to-Code Generation

Describe your website idea in natural language
AI generates complete HTML structure with modern styling
Supports complex design descriptions
Produces pixel-perfect, responsive code

3. Live Preview

Real-time HTML preview within the application
Test generated code before downloading
Visual validation of AI output
Interactive component testing

4. Multiple Creation Modes

📸 Upload Mode - Convert design images to code
💬 Prompt Mode - Generate code from descriptions
📐 Whiteboard Mode - Sketch and convert
🎨 Template Mode - Start from pre-built templates

5. Code Features

✅ Semantic HTML5 structure
✅ Modern CSS with Flexbox/Grid
✅ Fully responsive (desktop, tablet, mobile)
✅ Smooth animations and transitions
✅ Professional styling (gradients, shadows, effects)
✅ Accessibility-ready

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	UI framework
TypeScript	Type-safe development
Vite	Fast build tool
Tailwind CSS	Utility-first styling
Shadcn/ui	High-quality component library
Framer Motion	Smooth animations
GSAP	Advanced animations
React Three Fiber	3D graphics
TanStack Query	Data fetching & caching
React Router	Client-side routing

Backend

Technology	Purpose
Node.js	JavaScript runtime
Express.js	Web framework
Google Gemini AI API	Code generation engine
Multer	File upload handling
CORS	Cross-origin support
Dotenv	Environment variables

Languages & Styling

TypeScript: 85% of codebase
JavaScript: 9.9% (backend scripts)
CSS: 4.6% (custom styling)
HTML: 0.5% (markup)

🏗️ System Architecture & Workflow

┌─────────────────────────────────────────────────────────────┐
│                      USER INTERFACE (React)                 │
│  ┌──────────────┬──────────────┬──────────────────────────┐ │
│  │ Landing Page │ Create Page  │ Preview & Download       │ │
│  └──────────────┴──────────────┴──────────────────────────┘ │
└────────────┬────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│              INPUT PROCESSING LAYER                          │
│  ┌──────────────┬──────────────┬──────────────────────────┐ │
│  │ Image Upload │ Text Prompt  │ File Management          │ │
│  │ (Multer)     │ Processing   │ (Validation)             │ │
│  └──────────────┴──────────────┴──────────────────────────┘ │
└────────────┬────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│              EXPRESS BACKEND SERVER                          │
│  ┌──────────────┬──────────────┬──────────────────────────┐ │
│  │ Image Route  │ Prompt Route │ Middleware (Error)       │ │
│  │  /upload     │  /generate   │ Handler, CORS            │ │
│  └──────────────┴──────────────┴──────────────────────────┘ │
└────────────┬────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│            AI PROCESSING LAYER (Controllers)                 │
│  ┌──────────────────────┬──────────────────────────────────┐ │
│  │ imageToCode.js       │ generationController.js          │ │
│  │ Process & Send to AI │ Handle Generation Requests       │ │
│  └──────────────────────┴──────────────────────────────────┘ │
└────────────┬────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│         SERVICES LAYER (External API Calls)                  │
│  ┌──────────────────────┬──────────────────────────────────┐ │
│  │ imageService.js      │ generationService.js             │ │
│  │ - Buffer to Base64   │ - Build API request              │ │
│  │ - Send to Gemini API │ - Parse Gemini response          │ │
│  └──────────────────────┴──────────────────────────────────┘ │
└────────────┬────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│       GOOGLE GEMINI AI (External Service)                    │
│         🤖 AI Code Generation Engine                         │
└─────────────────────────────────────────────────────────────┘
             │
             ▼
┌─────────────────────────────────────────────────────────────┐
│              GENERATED HTML RESPONSE                         │
│  ├─ Semantic HTML5 Structure                                │
│  ├─ Embedded CSS with Flexbox/Grid                          │
│  ├─ Responsive Media Queries                                │
│  └─ Modern Design Patterns                                  │
└─────────────────────────────────────────────────────────────┘

Request Flow

User Input → Frontend captures image/prompt
Upload/Send → Data sent to Express backend via API
Processing → Backend validates and processes input
AI Call → Service layer sends to Google Gemini API
Generation → Gemini AI analyzes and generates code
Response → HTML code returned to frontend
Preview → Live preview rendered in iframe
Download → User downloads/uses generated code

📡 API Documentation

Base URL

http://localhost:5000/api

Endpoints

1. Generate Code from Image

POST /upload/image-to-code
Content-Type: multipart/form-data

Body:
  image: <File> (PNG or JPEG)

Response (Success - 200)

{
  "code": "<!DOCTYPE html>\n<html>...",
  "timestamp": "2025-12-17T10:30:00Z"
}

Response (Error - 400/500)

{
  "error": "Error message describing what went wrong"
}

cURL Example:

curl -X POST http://localhost:5000/api/upload/image-to-code \
  -F "image=@design.png" \
  -H "Accept: application/json"

2. Generate Code from Prompt

POST /generate/prompt-to-code
Content-Type: application/json

Body:
{
  "prompt": "Create a modern landing page with a hero section, features grid, and CTA button"
}

Response (Success - 200)

{
  "code": "<!DOCTYPE html>\n<html>...",
  "timestamp": "2025-12-17T10:30:00Z"
}

cURL Example:

curl -X POST http://localhost:5000/api/generate/prompt-to-code \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Create a modern dashboard"}'

Request/Response Details

Aspect	Details
Max File Size	10 MB
Supported Formats	PNG, JPEG
Timeout	30 seconds
Rate Limit	No limit (development)
Authentication	None (development)

🚀 Installation & Setup Guide

Prerequisites

Before installing, ensure you have:

Node.js (v16.0.0 or higher)
- Download: nodejs.org
- Verify: node --version
npm (v7.0.0 or higher) - Comes with Node.js
- Verify: npm --version
Git - For cloning the repository
- Download: git-scm.com
Google Gemini API Key - Required for AI functionality
- Get it: Google AI Studio

Step 1: Clone the Repository

git clone https://github.com/priymavani/Design2Code.git
cd Design2Code

Step 2: Set Up Backend

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create .env file
echo "GEMINI_API_KEY=your_api_key_here" > .env
echo "PORT=5000" >> .env

# Verify .env
cat .env

Backend Dependencies Installed:

express - Web server framework
cors - Cross-origin resource sharing
multer - File upload handling
dotenv - Environment variables
nodemon - Auto-reload server
uuid - Unique ID generation

Step 3: Start Backend Server

# Start with nodemon (auto-reload on changes)
npm run dev

# OR start normally
npm start

Expected Output:

Server is running on port 5000

Step 4: Set Up Frontend (New Terminal)

# From project root, navigate to frontend
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Expected Output:

Local: http://localhost:5173

Step 5: Access the Application

Open browser: http://localhost:5173
Navigate to "Create" page
Choose mode (Upload Image or Enter Prompt)
Generate and preview your code!

Common Setup Issues

Issue	Solution
Port already in use	Change `PORT` in `.env` or kill process on that port
Module not found	Run `npm install` in the correct directory
GEMINI_API_KEY error	Ensure `.env` file exists in `backend/` with valid key
CORS error	Verify frontend URL in `server.js` matches your dev URL
Build fails	Delete `node_modules` and `.lock` files, run `npm install` again

📁 Folder Structure Explanation

Design2Code/
├── README.md                          # Project documentation
│
├── backend/                           # Express.js server
│   ├── package.json                   # Backend dependencies
│   ├── server.js                      # Main server file with routes
│   │
│   ├── controllers/                   # Request handlers
│   │   ├── imageToCode.js             # Processes image uploads
│   │   ├── generationController.js    # Handles prompt generation
│   │   ├── chatController.js          # Chat functionality (future)
│   │   └── promptToCode.js            # Prompt processing
│   │
│   ├── routes/                        # API endpoints
│   │   ├── imageRoute.js              # POST /api/upload/image-to-code
│   │   ├── generationRoute.js         # POST /api/generate/prompt-to-code
│   │   ├── chatRoute.js               # Chat endpoints (future)
│   │   └── promptRoute.js             # Prompt-related routes
│   │
│   ├── services/                      # Business logic & API calls
│   │   ├── imageService.js            # Calls Gemini API for images
│   │   ├── generationService.js       # Calls Gemini API for prompts
│   │   ├── geminiService.js           # Shared Gemini utilities
│   │   └── conversationService.js     # Chat conversation logic
│   │
│   ├── middleware/                    # Express middleware
│   │   └── errorHandler.js            # Global error handling
│   │
│   └── .env                           # Environment variables (not in repo)
│
├── frontend/                          # React + TypeScript application
│   ├── package.json                   # Frontend dependencies
│   ├── vite.config.ts                 # Vite build configuration
│   ├── tsconfig.json                  # TypeScript configuration
│   ├── tailwind.config.ts             # Tailwind CSS config
│   ├── postcss.config.js              # PostCSS configuration
│   │
│   ├── src/
│   │   ├── main.tsx                   # React entry point
│   │   ├── App.tsx                    # Root component with routing
│   │   ├── index.css                  # Global styles
│   │   │
│   │   ├── pages/                     # Page components
│   │   │   ├── Index.tsx              # Landing page
│   │   │   ├── CreatePage.tsx         # Main code generation page
│   │   │   ├── StickersPage.tsx       # Stickers/decorations page
│   │   │   ├── RealisticRobot.tsx     # 3D robot component
│   │   │   └── NotFound.tsx           # 404 page
│   │   │
│   │   ├── components/                # Reusable components
│   │   │   ├── LandingPage.tsx        # Hero section
│   │   │   ├── CreatePage.tsx         # Creation workflow
│   │   │   ├── LivePreview.tsx        # Code preview iframe
│   │   │   ├── LoadingSpinner.tsx     # Loading animation
│   │   │   ├── LogoGenerator.tsx      # Logo creation tool
│   │   │   ├── OrbPreview.tsx         # 3D orb animation
│   │   │   ├── ParticleBackground.tsx # Animated particles
│   │   │   ├── ColorPaletteDisplay.tsx # Color picker
│   │   │   ├── ExampleLogos.tsx       # Example templates
│   │   │   ├── FeaturesTile.tsx       # Features showcase
│   │   │   ├── ThemeToggleTile.tsx    # Dark mode toggle
│   │   │   ├── ImpactTile.tsx         # Impact statistics
│   │   │   ├── PreviewTile.tsx        # Code preview section
│   │   │   ├── UploadTile.tsx         # File upload component
│   │   │   ├── StickersTile.tsx       # Stickers showcase
│   │   │   ├── FooterTile.tsx         # Footer component
│   │   │   ├── SmoothScrollProvider.tsx # Scroll animation provider
│   │   │   │
│   │   │   └── ui/                    # shadcn/ui components
│   │   │       ├── button.tsx         # Button component
│   │   │       ├── card.tsx           # Card component
│   │   │       ├── dialog.tsx         # Modal dialog
│   │   │       ├── input.tsx          # Input field
│   │   │       ├── textarea.tsx       # Text area
│   │   │       ├── tabs.tsx           # Tab component
│   │   │       ├── accordion.tsx      # Accordion
│   │   │       ├── dropdown-menu.tsx  # Dropdown menu
│   │   │       ├── skeleton.tsx       # Loading skeleton
│   │   │       └── [20+ more UI components]
│   │   │
│   │   ├── hooks/                     # Custom React hooks
│   │   │   ├── use-mobile.tsx         # Mobile detection hook
│   │   │   └── use-toast.ts           # Toast notification hook
│   │   │
│   │   ├── lib/                       # Utility functions
│   │   │   └── utils.ts               # Helper functions
│   │   │
│   │   └── vite-env.d.ts              # Vite type definitions
│   │
│   ├── public/                        # Static assets
│   │
│   └── index.html                     # HTML entry point
│
└── .gitignore                         # Git ignore rules

Key Directory Purposes

Directory	Purpose	Key Files
`backend/controllers`	Handle incoming requests	`imageToCode.js`
`backend/services`	Business logic & API calls	`imageService.js`
`backend/routes`	Define API endpoints	`imageRoute.js`
`frontend/pages`	Full page components	`CreatePage.tsx`
`frontend/components`	Reusable UI components	`LivePreview.tsx`
`frontend/components/ui`	Pre-built UI library	30+ shadcn components

🔐 Environment Variables

Create a .env file in the backend/ directory:

# .env
GEMINI_API_KEY=your_actual_gemini_api_key_here
PORT=5000

Variable Details

Variable	Type	Required	Description
`GEMINI_API_KEY`	String	✅ Yes	Google Gemini API key for code generation
`PORT`	Number	❌ No	Server port (default: 5000)

How to Get GEMINI_API_KEY

Visit Google AI Studio
Click "Create API Key"
Copy the generated key
Paste into .env file

Security Note

⚠️ Never commit .env to Git! It's already in .gitignore.

💻 How to Use the Application

1. Landing Page

View project features and benefits
See example logos and stickers
Understand the technology stack
Browse theme options

2. Create Page - Main Workflow

Option A: Image to Code

1. Click "Upload Design Image" button
2. Select PNG or JPEG file from computer
3. Click "Generate Code"
4. AI analyzes image and generates HTML
5. Preview generated code in live preview
6. Download or copy code

Option B: Prompt to Code

1. Click "Describe Your Website" button
2. Type detailed description:
   - "Create a modern e-commerce landing page with 
      hero section, product cards, and contact form"
3. Click "Generate Code"
4. AI generates responsive HTML
5. Preview and download

Option C: Template Mode

1. Browse pre-built templates
2. Select "Modern Dashboard" or others
3. View template preview
4. Use as starting point or modify

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Design2Code 🚀

📋 Project Overview

The Problem It Solves

Target Users

✨ Core Features

1. Image-to-Code Generation

2. Prompt-to-Code Generation

3. Live Preview

4. Multiple Creation Modes

5. Code Features

🛠️ Tech Stack

Frontend

Backend

Languages & Styling

🏗️ System Architecture & Workflow

Request Flow

📡 API Documentation

Base URL

Endpoints

1. Generate Code from Image

2. Generate Code from Prompt

Request/Response Details

🚀 Installation & Setup Guide

Prerequisites

Step 1: Clone the Repository

Step 2: Set Up Backend

Step 3: Start Backend Server

Step 4: Set Up Frontend (New Terminal)

Step 5: Access the Application

Common Setup Issues

📁 Folder Structure Explanation

Key Directory Purposes

🔐 Environment Variables

Variable Details

How to Get GEMINI_API_KEY

Security Note

💻 How to Use the Application

1. Landing Page

2. Create Page - Main Workflow

Option A: Image to Code

Option B: Prompt to Code

Option C: Template Mode

3. Live Preview

4. Download & Export

5. Stickers Page