A newer version of the Gradio SDK is available:
6.4.0
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
- Enter Your Idea - Describe your website concept
- Answer Questions - Respond to guided questions (7 total)
- Generate Prompt - Click to create your AI code agent prompt
- Download/Copy - Save or copy the generated prompt
Step 2: Use with AI Code Agent
- Copy the generated prompt
- Paste into your AI code agent (Cursor, Bolt.new, v0.dev, custom agents)
- 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
<!DOCTYPE html>
...complete HTML code...
### For Updates:
<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END
<<<<<<< SEARCH
Old Content
<h1 class="text-4xl font-bold">New Content</h1>
REPLACE
## 🛠️ Installation
1. **Clone the repository**
```bash
git clone <your-repo-url>
cd ai-code-agent-enhancer
- Install dependencies
pip install -r requirements.txt
- Set up environment variables Create a .env file or set the HuggingFace token:
export HF_TOKEN="your_huggingface_token_here"
🎮 Usage
- Run the application
python app.py
Open in browser The app will launch at http://localhost:7860
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:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
📄 License
MIT License - feel free to use in your projects
🆘 Support
If you encounter issues:
- Check that
HF_TOKENis set correctly - Ensure all dependencies are installed
- Try a different AI model from the dropdown
- Check HuggingFace API status
🌟 Credits
Created for developers who want to streamline their AI-powered web development workflow.
Happy Coding! 🚀