Prompt Builder v2.0
Start with a Blueprint:
-- Custom Setup --
Interactive Learning Infographic
SaaS Enterprise Dashboard
Gamified Step-by-Step Quiz
High-Converting Landing Page
E-Commerce 3D Product Configurator
AI Prompt Sandbox & Test Studio
Developer API Documentation Portal
Kanban Project Management Board
Healthcare Patient Triage Portal
Fintech Crypto & Stock Tracker
Cybersecurity Threat Incident Hub
EdTech Coding Challenge Playground
1. Core Persona & Tech Stack
Role / Persona
Expert Frontend Developer & UI/UX Designer
Senior React Engineer & Enterprise Architect
Instructional Designer & Gamification Specialist
Full-Stack Engineer with Minimalist Design Focus
Senior UX Researcher & HCI Specialist
Lead Design Systems & Accessibility Specialist
AI System Architect & Prompt Engineer
Full-Stack Vue & Nuxt Core Developer
Principal SvelteKit & Tailwind Frontend Specialist
Mobile-First Responsive Web Designer
Cybersecurity & Data Visualization Specialist
Fintech UI Developer (Data-Dense Layouts)
Micro-Frontend Architect & Web Components Specialist
Creative Technologist (WebGL & Canvas)
-- Custom Role --
Tech Stack Constraints
Vanilla HTML/CSS/JS (Single File)
HTML + TailwindCSS
React + TailwindCSS
Vue 3 + TailwindCSS
HTML + Bootstrap 5
Next.js App Router + TailwindCSS + Shadcn UI
SvelteKit + TailwindCSS + Lucide Icons
Vanilla JS + Web Components (Shadow DOM)
Alpine.js + TailwindCSS (Lightweight Reactive)
Angular 17 Standalone + Angular Material
Astro + TailwindCSS (Islands Architecture)
Flutter Web / Dart SPA
Python Streamlit Dashboard Blueprint
Remix + TailwindCSS + Radix UI
VBA
Primary Objective
Interactive Learning Infographic
B2B SaaS Analytics Dashboard
Lead Qualification Decision Tree Quiz
AI Coding Assistant Landing Page
E-Commerce 3D Smart Watch Product Configurator
AI Prompt Sandbox & Testing Studio
Interactive Developer API Documentation Portal
Responsive Kanban Project Management Board
Accessible Medical Symptom Checker & Patient Triage Portal
Real-Time Crypto & Stock Portfolio Tracker
Cybersecurity Threat Incident Radar & Response Hub
EdTech Gamified Coding Challenge & Test Runner
AI Customer Support Chatbot & File Attachment Console
Enterprise Cloud Multi-Step Onboarding Wizard
Interactive Developer Portfolio Showcase & Terminal
-- Custom Objective --
2. Layout, Tone & Styling
Visual Vibe & Tone
Add Option
Modern & Clean (Stripe/Vercel-like)
Enterprise & Corporate
Playful & Gamified
Dark Mode / Cyberpunk
Futuristic Glassmorphism & Backdrop Blur
Neumorphic / Soft UI Extruded Shadows
Swiss Minimalist Grid & Bold Typography
Neo-Brutalist (Raw Colors & Heavy Borders)
Luxury Minimalist (Charcoal & Gold Serif)
Material Design 3 (Dynamic Color Tokens)
Apple-Style Clean Slate & Translucent UI
Retro Arcade 80s Synthwave
Industrial CAD & Technical Monospace
Layout Architecture Requirements
Feature a horizontal timeline connecting 4 nodes. Hovering reveals side-opening popover panels containing interactive form elements without hiding the timeline.
3. Interactive UX Features
Step-by-Step Unlocking
Visually lock future steps until current steps are completed to force a logical path.
Real-Time Preview
Add a live preview area that instantly visually updates based on form selections.
Micro-Learning Tooltips
Small hover icons [?] next to complex terms providing plain-English definitions.
Contextual Validation
Show dynamic warnings explaining *why* a field is required when skipped.
Dark Mode Toggle
Include a functional toggle switch to flip the UI between light and dark themes.
State Persistence
Use localStorage so if the user refreshes the page, their progress is saved.
Generated Prompt
Copy to Clipboard
Add New Option
×
Option Label (Display Text)
Option Value (Prompt Text / Detailed Description)