🚀 Transform simple ideas into professional AI prompts for 30+ platforms using Gemini AI — Multimodal & Intelligent
✨ Intelligence Levels • 🖼️ Multimodal • 🔄 Workflow Engine • 🌐 Multi-Language
[!TIP] This tool leverages the latest Gemini 2.5 Flash models to provide industry-standard prompt engineering principles (Role, Context, Task, Constraints, Output Format).
| Main Dashboard | Comparison Mode |
|---|---|
 |
 |
Modular Prompt Engineer is a professional-grade tool designed to bridge the gap between human ideas and AI-optimized instructions. Whether you are generating code for Cursor, UI with v0, or art with Midjourney, this engine refines your intent into a structured, highly effective prompt.
- Prompt Refinement Cycle: Iteratively improve prompts with single-click actions:
- 🚀 Enhance: Add detail and depth.
- ✂️ Shorten: Make it concise and direct.
- 🎨 Creative Flip: Experimental and unique framing.
- 🧐 Clarify: Improve logic and structure.
- Dynamic Template Variables: Use
{{variable}}in your input to automatically generate smart forms. - Multi-Platform Comparison: Generate and compare prompts for multiple platforms side-by-side.
- 🎯 30+ Supported Platforms: Optimized instructions for Cursor, Windsurf, Bolt, n8n, Midjourney, v0.dev, and many more.
- 🖼️ Multimodal Support: Upload up to 4 images to provide visual context/inspiration for your prompt.
- 🔄 Workflow Builder: Create complex chains of prompts where steps can reference outputs of previous steps (
{{step1.output}}). - 📚 Library & Persistence: Automatically saves your history and favorites to
localStorage. - 🎨 Premium Glassmorphism UI: A stunning, modern dark-themed interface built for focus.
- Node.js 18.x+
- A Google Gemini API Key (Get it here)
# Clone the repository
git clone https://github.com/AllLiveSupport/Modular-Prompt-Engineer.git
# Enter the directory
cd Modular-Prompt-Engineer
# Install dependencies
npm install
# Start development server
npm run devGo to http://localhost:5173 in your browser.
📦 Modular-Prompt-Engineer
┣ 📂 src
┃ ┣ 📂 components # UI Components (History, Layout, Workflow)
┃ ┣ 📂 constants # Platform data & translations
┃ ┣ 📂 contexts # Global state (Language Provider)
┃ ┣ 📂 hooks # Custom React hooks (LocalStorage, History)
┃ ┣ 📂 services # API Integration (Gemini AI)
┃ ┣ 📂 utils # Helper functions (Prompt injection, File tasks)
┃ ┗ 📜 App.tsx # Main application logic
┣ 📂 docs/images # Repository screenshots
┗ 📜 vite.config.ts # Optimized build configuration- Click the ⚙️ Settings icon in the header.
- Paste your Gemini API Key.
- Choose your preferred model (Default:
gemini-2.5-flash). - Select your UI language (Turkish or English).
Important
Your API Key is stored locally in your browser (localStorage). It is never sent to any server other than directly to the Google AI SDK.
- x1xhlol/system-prompts-and-models-of-ai-tools - For comprehensive platform instructions.
- Google Gemini - For the powerful AI API.
- Lucide - For the beautiful icon set.
