From user research to pixel-perfect UI — AI-accelerated design
UI/UX Design Framework accelerates every stage of the product design process with AI. From user research synthesis to usability test scripts, every prompt encodes UX best practices and produces design artifacts that teams can act on immediately. Used by 4,100+ product designers, UX researchers, and product managers.
Full Access Unlocked
All 52 prompts · All 5 modules
"The journey mapping prompts produce better artifacts than what I was creating manually. The future-s..."
Amara J. · Senior UX Designer
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
5 modules · 52 prompts · 6 workflow stages
User Research System
Interview guide generation, research synthesis prompts, affinity mapping, and insight extraction from qualitative data.
8 promptsPersona & Journey System
Generate 3–5 user personas from research data, current-state journey maps, and future-state journey maps with opportunity identification.
8 promptsWireframe Specification
Component-level wireframe specs: layout decisions, interaction patterns, content hierarchy, and responsive behavior documentation.
9 promptsUI Copy Framework
Microcopy for every UI state: empty states, error messages, success states, onboarding tooltips, and CTA copy.
8 promptsTesting & Validation
Usability test script generator, task scenario writing, success metric definition, and test result synthesis prompts.
7 promptsGenerate [N] user personas for [PRODUCT NAME] based on the following research data: [PASTE INTERVIEW NOTES / SURVEY DATA]. Each persona must include: Name and demographic snapshot, Primary goal when using this product, Top 3 frustrations with current solutions, Technical comfort level, Key quote that captures their mindset, Behavioral patterns (how they currently solve this problem), What success looks like for them. Make personas feel like real people — not demographic averages. Base every attribute on the research data.
Write UI copy for the empty state of [FEATURE/SCREEN] in [PRODUCT NAME]. Context: This appears when [DESCRIBE WHEN IT APPEARS]. User goal: [WHAT THEY'RE TRYING TO DO]. Write 3 variations: (1) First-time user (encouraging, explains the value), (2) Returning user with no data (helpful, action-oriented), (3) Search/filter returned no results (reassuring, offers alternatives). Each variation: Headline (under 8 words), Body (under 25 words), CTA button text (under 4 words). Tone: [BRAND VOICE].
You are building a UX Design Workspace using the Airo AI Website Builder. Build a full-stack React + TypeScript + Tailwind CSS application with the following architecture: CORE FEATURES: 1. Research Hub — upload and organize user interview notes, survey data, and analytics exports. AI-powered synthesis extracts themes, pain points, and opportunities automatically. 2. Persona Builder — generate and manage 3–5 user personas from research data. Each persona card shows goals, frustrations, tech comfort, key quotes, and behavioral patterns. Export as PDF. 3. Journey Map Studio — visual current-state and future-state journey map builder. Drag-and-drop touchpoints, emotion curve editor, and opportunity identification layer. 4. Wireframe Spec Generator — paste a screen description and generate component-level wireframe specs: layout decisions, interaction patterns, content hierarchy, and responsive behavior. 5. UI Copy Library — organized library of all UI copy by screen and state (empty, error, success, onboarding). Bulk edit, version history, and export to CSV for handoff. 6. Usability Test Manager — create test scripts, schedule sessions, record observations, and generate insight reports from session notes. TECH STACK: React 19, TypeScript, Tailwind CSS, shadcn/ui, Express API, MySQL (Drizzle ORM), BetterAuth. DATABASE TABLES: research_sessions, personas, journey_maps, wireframe_specs, ui_copy, test_sessions. API ROUTES: GET/POST /api/research, GET/POST /api/personas, GET/POST /api/journey-maps, POST /api/generate-spec. Build the complete application. Start with the Research Hub as the main dashboard view.
system
8 prompts
workflow
8 prompts
architecture
9 prompts
prompts
8 prompts
templates
7 prompts
"The journey mapping prompts produce better artifacts than what I was creating manually. The future-state map with opportunity identification is particularly powerful."
Amara J.
Senior UX Designer
All 52 prompts across 5 modules are unlocked for your account.
Lifetime access