Build master prompts for any AI tool in minutes. Free, no signup. Covers 12 major AI tools.
Live site: understandingai.net
understandingAI is a full-stack web platform I designed and built from scratch. It helps users create optimized system prompts (master prompts) for 12 AI tools (first three are completely free!) - each tuned to the specific strengths and syntax of that tool.
The core product is an interactive prompt builder wizard that walks users through a guided questionnaire, builds a fully engineered master prompt and starter task prompt in real time, scores the prompt's strength, and lets users copy, share, save, or export it.
The platform includes a freemium model with Pro subscriptions, a prompt vault, build history, email delivery, and a full PWA that can be installed as a mobile app.
- Interactive wizard with guided questionnaire
- Supports 12 AI tools: ChatGPT, Claude, Gemini, Grok, Perplexity, Midjourney, DALL-E, Cursor, Windsurf, Copilot, Claude Code, Codex
- Tool-specific prompt generation - each AI gets prompts optimized for its strengths
- Real-time live preview as the user answers questions
- Prompt strength scoring algorithm
- Calibration examples showing weak vs strong responses
- Fast mode (~5 min) and Advanced mode (full control)
- Shareable links via URL-encoded state
- Copy to clipboard, Markdown export, PDF export
- Prompt vault - save, organize, and sync prompts across devices
- Full build history with versioning
- PDF and Markdown export
- Team sharing
- All 12 AI tools (some are Pro-exclusive)
- Powered by Freemius for subscription management
- 12 in-depth guide pages - one for each AI tool's system prompt methodology
- Homepage with interactive prompt builder widget preview
- Email capture with automated prompt delivery via Resend
- Exit-intent modal for lead capture
- Full PWA support - installable as a mobile app
- Re-engagement prompts for returning users
- Mobile-first app-like experience on the prompt builder
| Layer | Technology |
|---|---|
| Frontend | Vanilla JavaScript (zero frameworks, zero dependencies) |
| Styling | Vanilla CSS with custom properties (no Tailwind, no SCSS) |
| Backend | PHP 8+ |
| Database | MySQL (via PDO with prepared statements) |
| Resend API (transactional), MailerLite (marketing) | |
| Payments | Freemius (subscriptions + license management) |
| Hosting | SiteGround shared hosting |
| SSL | Let's Encrypt (auto-renewed) |
| Analytics | Google Analytics 4 |
| PWA | Custom service worker + Web App Manifest |
No frameworks. No build tools. No npm. No bundlers. The entire platform runs on vanilla HTML, CSS, JS, and PHP. Every page loads fast because there's nothing to compile, tree-shake, or hydrate.
understandingai.net/
├── index.html # Homepage - hero, features, pricing, FAQ
├── prompt-builder/index.html # Core product - 6000-line interactive wizard
├── [tool]-master-prompt/ # 12 guide pages (ChatGPT, Claude, etc.)
├── api/
│ ├── config.php # .env loader - zero hardcoded secrets
│ ├── sync.php # Pro vault/history sync (CRUD + rate limiting)
│ ├── subscribe.php # Email subscription with source attribution
│ ├── track-build.php # Free-tier build counting + monthly reset
│ ├── free-save.php # Email prompt delivery via Resend
│ ├── validate-email.php # MX/DNS validation + disposable domain blocking
│ ├── pricing.php # Dynamic pricing endpoint
│ └── pricing.js # Client-side pricing with localStorage cache
├── welcome/ # Post-purchase license activation
├── about/ | privacy/ | terms/ # Legal pages
├── manifest.json # PWA manifest
├── sw.js # Service worker (offline caching)
├── assets/pwa.js # Install prompt + re-engagement system
└── .htaccess # HTTPS, CSP, HSTS, security headers, clean URLs
The prompt builder is a complex single-page application with a multi-step wizard, real-time preview, state management, Pro/Free gating, and API integration. Most developers would reach for React or Vue. I built it in vanilla JS because:
- Performance - zero bundle overhead, instant load, no hydration delay
- Simplicity - no build step, no node_modules, no dependency updates
- Control - every line of code serves a purpose I understand
- Longevity - no framework version to upgrade, no breaking changes from upstream
Each page ships its own styles in a single <style> block. No external CSS file, no FOUC, no render-blocking request. The tradeoff (not independently cacheable) is worth it for the first-paint speed on a site where most users visit 1-2 pages per session.
SiteGround shared hosting runs PHP natively with zero configuration. The API layer is simple CRUD - PHP handles it cleanly with PDO prepared statements. No ORM, no framework, no autoloader. Each endpoint is a self-contained file.
- All secrets in
.envfile outside the web root - zero hardcoded credentials - PDO prepared statements everywhere - no SQL injection vectors
htmlspecialchars()and customescapeHtml()for all user-generated output- IP-based rate limiting on all public API endpoints
- License key validation with format checks and 24-hour DB cache
- Content-Security-Policy, HSTS, X-Frame-Options, X-Content-Type-Options headers
- Disposable email domain blocklist with MX record verification
.htaccessblocks direct access to config files, error logs, and dotfiles
The prompt builder transforms into a full-screen app-like experience on mobile:
- Immersive mode - navigation bar hidden, wizard fills the viewport
- Auto-advance - tap a choice and it slides to the next question automatically
- Swipe gestures - swipe left/right to navigate between steps
- Slide transitions - smooth animations between steps
- Sticky bottom nav - Back/Next buttons always visible
- Large touch targets - all interactive elements minimum 48px height
- Safe area support - handles notched phones correctly
- PWA installable - add to home screen, works offline, re-engagement prompts
- JSON-LD structured data on every public page (Article, FAQPage, HowTo, WebApplication, BreadcrumbList, Speakable)
- Open Graph and Twitter Card meta tags with images
- Canonical URLs on all pages
- XML sitemap with proper priorities and lastmod dates
- Clean URLs via Apache rewrite rules
- Semantic HTML (
<main>,<nav>,<article>,<footer>) - ARIA labels,
aria-expanded, landmark elements for accessibility
The prompt builder isn't a template fill-in-the-blank. It's an algorithmic generation system that:
- Adapts to each AI tool - ChatGPT gets role-based instructions, Claude gets detailed context chains, Midjourney gets parameter syntax, coding tools get project-aware rules
- Builds from user answers - tone, format, output rules, guardrails, conditional behaviors, and personal context are woven into a coherent prompt
- Generates two outputs - a master prompt (system prompt / custom instructions) and a starter task prompt (first message to send)
- Scores prompt strength - evaluates specificity, personalization, output formatting, and behavioral rules
- Provides calibration - shows weak vs strong example responses so users understand what good looks like
| Built from scratch | Third-party service |
|---|---|
| Prompt generation engine | Freemius (payments) |
| Interactive wizard UI | Resend (transactional email) |
| Real-time prompt preview | MailerLite (marketing email) |
| Prompt scoring algorithm | Google Analytics |
| Pro/Free gating system | Google Fonts |
| Vault + history sync | SiteGround (hosting) |
| PWA + service worker | Let's Encrypt (SSL) |
| Rate limiting system | |
| Email validation | |
| Mobile app experience | |
| All 12 guide pages | |
| Security hardening |
- Zero dependencies - no npm packages, no CDN libraries (except Google Fonts and Freemius checkout)
- Single-file pages - HTML, CSS, and JS inline per page, no external stylesheets
- Service worker caching - assets cached on first visit, HTML network-first with offline fallback
- No JavaScript framework overhead - the prompt builder's 6000 lines of vanilla JS replace what would be 50,000+ lines with React + state management + router + build tools
Built by me. If you want to discuss the technical decisions, architecture, or how I approached any part of this project, feel free to reach out.
- Live site: understandingai.net
- Email: contact@understandingai.net