Live Demo: https://daniyal-rashid-00.github.io/Prompt-Generator/
Prompt Generator is an intelligent web application designed to eliminate the "prompt engineering barrier." It acts as a middleware between casual users and Large Language Models, automatically transforming vague or simple inputs into structurally optimized, expert-level AI prompts utilizing the OpenRouter API.
This project was built to address a common pain point: users struggling to get high-quality outputs from AI models due to poorly structured instructions.
- Component Design: Built a highly decoupled UI separating the
Header,ModeSelector,PromptInput, andOutputDisplay. This ensures maintainability and clean state flows across the application. - State & UX: Features real-time character counting mapped to dynamic length constraints, clipboard API integration, and keyboard shortcut event listeners (e.g.,
Ctrl+Enterto generate) for power users. - Design System: Engineered a custom CSS foundation utilizing glassmorphism attributes, CSS variables for theming, and the
Outfitfont family. Mobile-responsive by default.
Designed the generation logic to handle two highly distinct prompt engineering workflows:
- Fast Mode: Outputs concise, actionable prompts (<500 characters) designed for quick, direct interactions.
- Advanced Mode: Outputs comprehensive instruction sets (500–1000 characters) including bulleted formatting, contextual bodies, and strict constraints, built for complex coding or reasoning tasks.
- LLM Pipeline: Integrated
DeepSeek R1T2 Chimeravia the OpenRouter API. - Network Layer: Used Axios with configured request interceptors. Designed robust, graceful
try/catcherror handling that maps complex API timeout or validation errors into user-friendly UI notifications instead of failing silently.
- Automation: Configured automated GitHub Actions workflows. Every commit to
maintriggers a complete Node.js build process, injects secure environment secrets, and deploys the optimized Vite bundle statically to GitHub Pages.
- Clone the repository:
git clone https://github.com/YOUR_USERNAME/prompt-generator.git
cd prompt-generator- Install dependencies:
npm install- Configure Environment:
Create a
.envfile in the root directory:
VITE_OPENROUTER_API_KEY=your_api_key_here- Run Development Server:
npm run devBuilt by Daniyal Rashid. I specialize in creating performant, user-centric frontends and robust API integrations.