Overview
This prompt guides building a full-stack web app that generates websites from natural language, benefiting developers and users seeking quick site creation. It ensures a clear, modular approach for frontend UI, backend API, and AI integration to streamline development.
Prompt Overview
Purpose: Enable users to generate complete websites from natural language descriptions using AI-powered code generation.
Audience: Web developers, designers, and non-technical users seeking quick website prototypes or templates.
Distinctive Feature: Combines semantic HTML, TailwindCSS styling, and vanilla JavaScript with live preview and code editing.
Outcome: Users receive editable, downloadable website code instantly, streamlining web development and prototyping.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Development Tools & DevOps, Content Management Systems (CMS)
- Techniques: Prompt Templates, Structured Output, Output Constraints
- Models: GPT-4, GPT-4 Turbo, GPT-4o
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are an expert full-stack web developer and AI engineer.
Your task is to build a complete web application called **AI Web Builder** that allows users to generate websites using natural language prompts.
## Purpose
The application enables users to describe the type of website they want (e.g., “portfolio site for a photographer” or “landing page for a coffee shop”), and the system automatically generates the HTML, CSS (TailwindCSS), and JavaScript code for that site.
## Core Functionality
1. **User Prompt Input**
– Provide a large textarea where users enter their website description.
– Use placeholder text like “Describe your website (purpose, sections, style, colors…)”.
– Include a “Generate Website” button that triggers the AI generation process.
2. **AI Generation**
– Simulate AI generation or integrate the OpenAI API.
– AI analyzes user input and outputs:
– Semantic HTML structure
– TailwindCSS styles
– Vanilla JavaScript for interactivity
– Allow users to view, edit, and copy the generated code.
3. **Live Preview**
– Show a live rendered preview of the generated website in a separate panel.
– Enable tab switching between *Code View* (syntax-highlighted code block) and *Live Preview*.
4. **Export & Download**
– Provide buttons for “Download as .zip” and “Copy All Code”.
– Optionally allow downloading individual HTML, CSS, and JS files.
## Frontend Requirements
– Use **HTML**, **TailwindCSS**, and **vanilla JavaScript**.
– Layout:
– Split screen with input and controls on the left, live preview on the right.
– Components:
– Header with the app name “AI Web Builder”.
– A textarea for user input.
– Buttons: Generate, Clear, Copy, Download.
– Loading animation displayed during AI generation.
– Code block with syntax highlighting (use Prism.js or similar).
– Styling:
– Clean, modern, minimal UI.
– Neutral background color.
– Rounded corners on components.
– Responsive for desktop and mobile devices.
## Backend Requirements
– Use **Node.js + Express** or Next.js API routes.
– Implement `POST /generate` endpoint:
– Accept user prompt.
– Return JSON with generated HTML, CSS (Tailwind), and JavaScript code.
## Development Instructions
– First, design the frontend layout and UI.
– Implement client-side logic to send prompts to the backend and display results.
– Develop backend API route to accept prompts and respond with generated code.
– For AI code generation, simulate response or stub with placeholder if API integration is unavailable.
– Include functionality to copy code to clipboard and download as a .zip archive.
## Output Format
The application should present:
– An interactive textarea for input.
– Controls to generate, clear input, copy results, and download code.
– Tabs for code view with syntax highlighting and live preview panel.
– The generated website code divided into HTML, CSS (Tailwind), and JS sections.
– API output in JSON with keys `html`, `css`, and `js`.
## Notes
– Include loading states during generation to improve UX.
– Ensure separation of concerns: frontend UI, backend API, and AI integration.
– Use best practices for security and performance.
– Prefer modular code and clear comments.
Screenshot Examples
[Insert relevant screenshots after testing]
How to Use This Prompt
- Copy the prompt as provided without modifications.
- Use it to build a full-stack AI website generator app.
- Follow instructions for frontend layout, UI, and functionality.
- Implement backend API to handle prompt and return code JSON.
- Simulate AI or integrate OpenAI API for code generation.
- Include features: code view, live preview, copy, and download.
Tips for Best Results
- Design intuitive UI: Create a clean split-screen layout with a large textarea and controls on the left, and a live preview with code tabs on the right, ensuring responsiveness and minimal styling using TailwindCSS.
- Implement frontend logic: Use vanilla JavaScript to handle user input, send POST requests to the backend `/generate` endpoint, display loading states, and update the code and preview panels dynamically.
- Build backend API: Develop a Node.js + Express or Next.js API route `/generate` that accepts user prompts and returns JSON with simulated or real AI-generated HTML, TailwindCSS, and JS code for the website.
- Enable code export features: Add functionality to copy generated code to clipboard and download it as a .zip archive containing separate HTML, CSS, and JS files, enhancing user convenience and workflow.
FAQ
- What frontend technologies are required for AI Web Builder?
Use HTML, TailwindCSS, and vanilla JavaScript for a clean, responsive UI. - What does the backend API endpoint /generate do?
Accepts user prompt and returns JSON with generated HTML, CSS, and JS code. - How does the app display generated website code?
Shows syntax-highlighted code blocks with tabs for code view and live preview. - What user controls are included in the AI Web Builder UI?
Buttons for Generate, Clear, Copy, Download, plus a textarea for input.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (March 2026): Initial release.
