Unleash your creativity with monstrously good prompts!
Prompt Monster is a fun, approachable, and powerful tool for crafting effective prompts for GPT and AI applications. Our intuitive prompt builder combines playful monster imagery with professional functionality, making prompt engineering feel like a creative adventure!
- 🎨 Beautiful Design: Modern, brand-aligned interface with vibrant colors and smooth animations
- 📱 Fully Responsive: Works seamlessly on mobile, tablet, and desktop devices
- ♿ Accessible: WCAG 2.1 AA compliant with full keyboard navigation and screen reader support
- 🚀 Fast & Modern: Built with React 19 and optimized for performance
- 🎯 User-Friendly: Intuitive interface that makes prompt creation effortless
- Role-Based Prompts: Choose from predefined roles or create custom ones
- Structured Framework: Task → Goal → Context → Details structure for effective prompts
- Real-Time Preview: See your prompt generate as you type
- One-Click Copy: Copy generated prompts to clipboard instantly
- Curated Templates: Pre-built templates for common use cases
- Smart Search: Find templates by name, role, or task
- Quick Application: Apply template values with a single click
- Extensible: Easy to add new templates
- Monster Branding: Playful monster mascot with floating animation
- Gradient Backgrounds: Beautiful color transitions throughout the interface
- Smooth Interactions: Hover effects, loading states, and micro-animations
- Visual Feedback: Clear success states and error handling
- Keyboard Navigation: Full keyboard support with skip links
- Screen Reader Support: Proper ARIA labels and semantic HTML
- High Contrast Mode: Enhanced visibility for users with visual impairments
- Focus Management: Clear focus indicators and logical tab order
- Reduced Motion: Respects user's motion preferences
- Mobile-First: Optimized for touch devices with appropriate target sizes
- Flexible Layouts: CSS Grid-based responsive design
- Breakpoint System: Tailored experiences for mobile, tablet, and desktop
- Performance Optimized: Fast loading on all devices
- Node.js (version 14 or higher)
- npm (version 6 or higher)
-
Clone the repository
git clone https://github.com/risadams/prompt-monster.git cd prompt-monster -
Install dependencies
npm install
-
Start the development server
npm start
-
Open your browser
http://localhost:3000
The app will automatically reload when you make changes to the source code.
npm run buildThis creates an optimized production build in the build folder, ready for deployment.
- Select a Role: Choose from predefined roles (Product Owner, Developer, etc.) or select "Other" for custom roles
- Define the Task: Describe what you want the AI to do
- Set Your Goal: Explain what you want to achieve
- Add Context (Optional): Provide background information
- Specify Details (Optional): Add requirements, constraints, or formatting instructions
- Copy & Use: Click "Copy to Clipboard" and paste into your AI application
- Browse Templates: Use the template library on the left sidebar
- Search: Type keywords to find relevant templates
- Apply Template: Click "Use Template" to populate the form with template values
- Customize: Modify the applied template to fit your specific needs
Role: UX Designer
Task: Create a user persona
Goal: Better understand our target audience for a mobile banking app
Context: We're designing for millennials who prefer digital banking
Details: Include demographics, goals, frustrations, and preferred features
Generated Prompt:
Acting as a "UX Designer" I want to "Create a user persona" so that I can "Better understand our target audience for a mobile banking app".
Here is the context: Role Description: Designs user experiences and interfaces.
We're designing for millennials who prefer digital banking
Details: Include demographics, goals, frustrations, and preferred features
prompt-monster/
├── public/ # Static assets
│ ├── index.html # HTML template
│ ├── logo.svg # Monster logo
│ ├── manifest.json # PWA manifest
│ └── robots.txt # SEO robots file
├── src/ # Source code
│ ├── components/ # React components
│ │ └── AppHeader.js # Header component
│ ├── data/ # Application data
│ │ ├── Role.json # Role definitions
│ │ └── Templates.json # Prompt templates
│ ├── App.js # Main application component
│ ├── App.css # Component styles
│ ├── index.css # Base styles & CSS custom properties
│ ├── utils.css # Utility classes
│ └── index.js # Application entry point
└── README.md # This file
- Primary Purple:
#8B5CF6- Main brand color, primary actions - Secondary Blue:
#6366f1- Secondary elements, links - Accent Green:
#10b981- Success states, validation - Neutral Grays: Various shades for text and backgrounds
- UI Font: Inter - Modern, readable sans-serif
- Code Font: Fira Code - Monospace for generated prompts
- Responsive Scaling: Fluid typography that adapts to screen size
- Cards: Rounded corners with subtle shadows and hover effects
- Buttons: Gradient backgrounds with focus states and animations
- Forms: Enhanced inputs with validation states and clear labeling
- Grid: Responsive CSS Grid layout system
For detailed design documentation, see DESIGN.md.
| Command | Description |
|---|---|
npm start |
Starts development server on http://localhost:3000 |
npm run build |
Creates production build in build/ folder |
npm test |
Runs test suite (when tests are added) |
npm run eject |
Ejects from Create React App (irreversible) |
-
Edit
src/data/Templates.json -
Add a new template object with required fields:
{ "id": "unique-id", "name": "Template Name", "role": "Role Name", "task": "Task description", "goal": "Goal description", "context": "Optional context", "details": "Optional details" }
-
Edit
src/data/Role.json -
Add a new role object:
{ "id": "ROLE_ID", "name": "Role Name", "description": "Role description for context" }
The application uses CSS custom properties for consistent theming:
:root {
--monster-purple: #8B5CF6;
--monster-blue: #6366f1;
--monster-green: #10b981;
/* Modify these values to customize the theme */
}Prompt Monster is built with accessibility as a core principle:
- ✅ Color contrast ratios meet standards
- ✅ All interactive elements are keyboard accessible
- ✅ Screen readers can access all content
- ✅ Focus indicators are clearly visible
- ✅ Error messages are descriptive and helpful
Prompt Monster supports all modern browsers:
- ✅ Chrome 88+
- ✅ Firefox 85+
- ✅ Safari 14+
- ✅ Edge 88+
- JavaScript Required: Core functionality requires JavaScript
- Graceful Degradation: Informative fallback for disabled JavaScript
- Print Support: Optimized styles for printing prompts
- Vercel: Zero-config deployment for React apps
- Netlify: Continuous deployment from Git
- GitHub Pages: Free hosting for public repositories
- Firebase Hosting: Google's hosting platform
- Install Vercel CLI:
npm i -g vercel - Run
vercelin the project directory - Follow the prompts to deploy
No environment variables are required for basic functionality.
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Test thoroughly (including accessibility)
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style
- Ensure accessibility standards are maintained
- Test on multiple devices and browsers
- Update documentation as needed
- Add appropriate comments for complex logic
- 🎨 New prompt templates
- 🔧 Feature enhancements
- 🐛 Bug fixes
- 📚 Documentation improvements
- ♿ Accessibility improvements
- 🌐 Internationalization (i18n)
This project is licensed under the MIT License - see the LICENSE file for details.
- Create React App: For the solid foundation
- Inter & Fira Code: For beautiful typography
- React Community: For excellent documentation and tools
- Accessibility Community: For comprehensive guidelines and tools
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Author: Ris Adams
Made with 💜 for the AI community
Prompt Monster - Where prompt engineering meets creativity! 🎭