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