---
title: AI Code Agent Prompt Enhancer
emoji: 📊
colorFrom: indigo
colorTo: red
sdk: gradio
sdk_version: 5.49.1
app_file: app.py
pinned: false
license: mit
short_description: Transform your website ideas into professional
---
# 🚀 AI Code Agent Prompt Enhancer
Transform your website ideas into professional, production-ready prompts optimized for AI code agent systems. This tool guides you through a series of questions to gather all necessary information, then generates detailed prompts that work with AI coding assistants like Cursor, Bolt.new, v0.dev, and custom AI code agents.
## ✨ Features
- 🎯 **Smart Questionnaire** - Guided questions to gather all project requirements
- 🎨 **Professional Prompts** - Generate detailed, production-ready specifications
- 📱 **AI Code Agent Compatible** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE format
- ✨ **Modern Tech Stack** - Includes TailwindCSS, Feather Icons, AOS, Vanta.js
- 🖼️ **Image Placeholders** - Integrates Static.photos for professional placeholder images
- 📥 **Downloadable** - Save prompts for future use
## 🔧 Technology Stack
- **Gradio** - Interactive web interface
- **Hugging Face Inference API** - AI-powered prompt generation
- **TailwindCSS** - Utility-first CSS framework
- **Feather Icons** - Beautiful icon set
- **AOS.js** - Scroll animation library
- **Vanta.js** - Animated backgrounds
- **Static.photos** - Professional placeholder images
## 🎯 What You Get
✅ **Clean, Professional Prompt** - No Q&A clutter, just specifications
✅ **AI Code Agent Format** - Uses TITLE_PAGE, UPDATE_PAGE, SEARCH/REPLACE blocks
✅ **TailwindCSS Integration** - Modern, responsive styling
✅ **Animation Ready** - AOS scroll animations + Vanta.js backgrounds
✅ **Icon System** - Feather Icons integrated
✅ **Image Placeholders** - Static.photos for all images
✅ **Production Ready** - Complete technical specifications
✅ **Downloadable** - Save for future use
## 📋 How to Use
### Step 1: Create Your Prompt
1. **Enter Your Idea** - Describe your website concept
2. **Answer Questions** - Respond to guided questions (7 total)
3. **Generate Prompt** - Click to create your AI code agent prompt
4. **Download/Copy** - Save or copy the generated prompt
### Step 2: Use with AI Code Agent
1. **Copy the generated prompt**
2. **Paste into your AI code agent** (Cursor, Bolt.new, v0.dev, custom agents)
3. **Get production-ready code** with proper formatting
## 🔧 Compatible Systems
This tool generates prompts compatible with:
- ✨ **Custom AI Code Agents** (using the TITLE_PAGE/UPDATE_PAGE format)
- ✨ **Cursor AI** - Paste and generate
- ✨ **Bolt.new** - Direct integration
- ✨ **v0.dev** - Component generation
- ✨ **GitHub Copilot** - Enhanced context
- ✨ **Any LLM** - ChatGPT, Claude, Gemini
## 📚 Output Format
The generated prompts use a specific format for AI code agents:
### For New Websites:
```
<<<<<<< START_TITLE index.html >>>>>>> END_TITLE
```html
...complete HTML code...
```
```
### For Updates:
```
<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END
<<<<<<< SEARCH
Old Content
=======
New Content
>>>>>>> REPLACE
```
## 🛠️ Installation
1. **Clone the repository**
```bash
git clone
cd ai-code-agent-enhancer
```
2. **Install dependencies**
```bash
pip install -r requirements.txt
```
3. **Set up environment variables**
Create a .env file or set the HuggingFace token:
```bash
export HF_TOKEN="your_huggingface_token_here"
```
## 🎮 Usage
1. **Run the application**
```bash
python app.py
```
2. **Open in browser**
The app will launch at http://localhost:7860
3. **Follow the process**
- Enter your website idea
- Answer 7 guided questions
- Select an AI model
- Generate your enhanced prompt
- Copy or download the result
## 🎯 How It Works
### Step 1: Input Collection
The system asks targeted questions about:
- Website type (portfolio, e-commerce, etc.)
- Purpose and goals
- Target audience
- Required sections/pages
- Design preferences
- Features needed
- New vs. update request
### Step 2: Prompt Generation
An LLM processes your answers and creates a detailed specification including:
- Complete technical requirements
- Design specifications
- Feature descriptions
- Code structure format
- CDN links and libraries
- Accessibility guidelines
### Step 3: Format Optimization
The output is formatted for AI code agents with:
- TITLE_PAGE blocks for new websites
- UPDATE_PAGE and SEARCH/REPLACE blocks for updates
- HTML templates
- Animation examples
- Styling guidelines
## 🛠️ Tech Stack
- **Frontend**: Gradio 4.0+
- **AI**: HuggingFace Inference API
- **Models**: Llama, Phi, Zephyr, Mistral
- **Output Format**: AI Code Agent compatible
## 🔐 Environment Variables
| Variable | Description | Required |
|----------|-------------|----------|
| `HF_TOKEN` | HuggingFace API token | Yes |
Get your token from: https://huggingface.co/settings/tokens
## 🎨 Supported Technologies
Generated prompts include:
- **TailwindCSS** - Responsive styling
- **Feather Icons** - Icon library
- **AOS.js** - Scroll animations
- **Vanta.js** - Background animations
- **Anime.js** - Advanced animations
- **Static.photos** - Placeholder images
## 📝 Example Usage
**Input:**
- Website Idea: "Portfolio website for a photographer"
- Type: Portfolio
- Purpose: Showcase work and attract clients
- Audience: Potential photography clients
- Sections: Home, Gallery, About, Contact
- Theme: Dark, modern, elegant
- Features: Image gallery, contact form, smooth animations
**Output:**
Complete AI code agent prompt with all specifications, ready to paste into Cursor, Bolt.new, v0.dev, or any AI coding assistant.
## 🤝 Contributing
Contributions are welcome! Please:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
## 📄 License
MIT License - feel free to use in your projects
## 🆘 Support
If you encounter issues:
1. Check that `HF_TOKEN` is set correctly
2. Ensure all dependencies are installed
3. Try a different AI model from the dropdown
4. Check HuggingFace API status
## 🌟 Credits
Created for developers who want to streamline their AI-powered web development workflow.
---
**Happy Coding! 🚀**