AI-Powered Coding Prompt Generator for Developers and Designers

Build a full-stack AI-powered system that converts UI images and text descriptions into detailed coding prompts for AI-assisted coding tools like BoltNew, Cursor, and v0.dev. The backend should utilize Express.js with Mongoose for MongoDB.
## 🔹 Tech Stack:
– Frontend: React.js (Next.js), TailwindCSS
– Backend: Express.js, Mongoose (MongoDB)
– AI Integration: OpenAI GPT-4, Claude AI, LangChain
– Image Processing: OpenCV, YOLOv8
– Deployment: Vercel (Frontend), DigitalOcean/AWS (Backend)
## **🔹 Features to Implement**
### **1️⃣ Image-to-Prompt**
– Users can upload UI screenshots or Figma designs.
– The system should detect UI components (buttons, forms, text fields, images).
– Convert detected UI elements into a structured JSON format.
– Generate an AI-ready prompt optimized for BoltNew, Cursor, and v0.dev.
### **2️⃣ Text-to-Prompt**
– Users enter a text description of the app they want to build.
– The system uses NLP (GPT-4, Claude) to:
– Identify core features from the text.
– Define UI components, backend routes, and data models.
– Generate a comprehensive AI prompt.
– Output the prompt, allowing users to copy and paste it into an AI coding tool.
## **🔹 Backend (Express.js with Mongoose)**
### 📌 **1. Setup & Configuration**
– Initialize an Express.js server.
– Use Mongoose for MongoDB as the database.
– Implement CORS, dotenv, and body-parser middleware.
### 📌 **2. User Authentication**
– Implement JWT-based authentication.
– Users can sign up, log in, and manage sessions.
– Store user profiles and prompt history in MongoDB.
### 📌 **3. Image Processing API**
– Create an /api/upload endpoint to handle image uploads.
– Process images using YOLOv8 (Ultralytics) or OpenCV.
– Detect UI components and return structured JSON.
### 📌 **4. Text-to-Prompt API**
– Create an /api/generate-prompt endpoint.
– Parse user input, identify features & UI components.
– Use GPT-4 or Claude AI to generate a detailed AI prompt.
– Store past prompt requests in MongoDB.
### 📌 **5. AI Integration API**
– Create an /api/generate-code endpoint.
– Send structured JSON prompts to BoltNew, Cursor, or v0.dev.
– Retrieve and return the AI-generated code.
## **🔹 Frontend (React.js + TailwindCSS)**
### 📌 **1. Landing Page**
– Simple UI with two options:
1. Upload UI Screenshot (for Image-to-Prompt)
2. Describe Your App (for Text-to-Prompt)
### 📌 **2. Image Upload Page**
– Drag-and-drop image upload.
– Display detected UI components.
– Show generated AI prompt for copying.
### 📌 **3. Text-to-Prompt Page**
– Input field for users to describe their app.
– Show real-time AI prompt suggestions.
– Copy button to paste prompt into AI coding tools.
### 📌 **4. Dashboard (For Logged-in Users)**
– View past generated prompts.
– Save, edit, or refine prompts.
– Profile management (edit name, API usage).
## **🔹 Example API Endpoints**
“`javascript
// Express.js (Backend)
const express = require(“express”);
const mongoose = require(“mongoose”);
const cors = require(“cors”);
const dotenv = require(“dotenv”);
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
app.get(“/”, (req, res) => {
res.send(“AI Prompt Generator API is running!”);
});
app.listen(5000, () => console.log(“Server running on port 5000”));
“`
## 🔹 Expected Output
After pasting this prompt into BoltNew, it should:
– ✅ Set up a Next.js + Express.js project
– ✅ Generate Mongoose models for users and prompts
– ✅ Create API endpoints for image upload, text processing, and AI integration
– ✅ Design a React frontend with TailwindCSS