| --- |
| 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! 🚀** |
|
|
