|
|
--- |
|
|
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 |
|
|
<!DOCTYPE html> |
|
|
...complete HTML code... |
|
|
``` |
|
|
``` |
|
|
|
|
|
### For Updates: |
|
|
``` |
|
|
<<<<<<< UPDATE_PAGE_START index.html >>>>>>> UPDATE_PAGE_END |
|
|
<<<<<<< SEARCH |
|
|
<h1>Old Content</h1> |
|
|
======= |
|
|
<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 |
|
|
``` |
|
|
|
|
|
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! 🚀** |
|
|
|
