Prompts

I have an idea for [rough description]. Help me sharpen this by asking clarifying questions about the Persona, Problem, Product, and Proposition. One question at a time. Don't let me stay vague.

Structure this into a Build Brief with Persona (operator profile, not marketing avatar), Problem (quantified pain, trigger moments, current workarounds), Product (3–5 P0 features with user stories and acceptance criteria), and Proposition (headline, subheadline, 3 benefits). Keep it under 3 pages.

Based on this Build Brief, describe the minimum screens I need and the primary user flow. The user should [emotional outcome] within 5 seconds. Be ruthlessly minimal.

Generate the HTML/CSS for [specific screen]. Show: [specific elements]. Use [emotional tone]. Use realistic sample data: [describe realistic examples relevant to your persona].

Add interactivity. When I [action], [result]. This is a prototype — no backend, just JavaScript state.

I'm building a prototype for a product idea. Help me create a Build Brief — a 2–5 page structured requirements document optimized for an AI coding agent (Cursor, Claude Code) to build a working prototype. Here's what I know so far: **My rough idea:** [Describe your idea in 2–3 sentences. Be as specific or vague as you are right now — that's fine.] **Who I think this is for:** [Describe the person. What's their role? What do they do day-to-day? If you don't know yet, say so.] **The pain I've observed or heard about:** [What specific frustration, cost, or workaround have you seen? Include quotes from conversations if you have them.] **What I think the core feature is:** [What's the one thing this tool does? If you're not sure, describe the outcome you want for the user.] --- Structure the Build Brief using these four sections: ### 1. Persona Create an operator profile (not a marketing avatar). Include: - Role and daily context - Technical comfort level - Current workflow and tools - Success definition: "They open the app and feel ___ within 5 seconds" ### 2. Problem Structure as a table with columns: Problem Area | Impact | Current Workaround. Then write 2–3 Jobs To Be Done in this format: Job ID | Job Statement | Trigger Situation | Desired Outcome. Every problem must pass the "show me the pain" test — quantified or described as a specific frustrating moment. ### 3. Product - List 3–5 features maximum, each tied to a specific problem from Section 2 - Write user stories in "As a [persona], I want [action], so that [value]" format - Include concrete acceptance criteria for each story (bullet points the AI can check against) - Mark each feature P0 (must work in prototype), P1 (visible but not fully built), or P2 (explicitly out of scope) - Include a "Non-Goals" section listing what we are NOT building (auth, mobile app, real integrations, etc.) ### 4. Proposition Write draft landing page copy: - One-sentence value proposition using: "For [persona] who [problem], [product] is a [category] that [benefit]. Unlike [alternative], we [differentiator]." - Headline (10 words or fewer) - Subheadline (one sentence) - 3 key benefits (one line each) - A social proof hook (a quote a future user might say) - CTA text --- Additional rules: - Keep the total Build Brief under 5 pages - Use tables and structured formatting — this document will be read by an AI, not presented in a meeting - Include guidance for realistic mock data (names, amounts, dates that make the demo feel real — no Lorem Ipsum) - Write it so that a developer or AI agent with NO other context could build the prototype from this document alone - Flag anywhere my input is too vague and ask me to clarify before finalizing

I want to build [your idea]. Help me scope this down to a prototype that: 1. Solves ONE specific problem 2. Can be built in under 4 hours 3. Has a clear way to test if it is valuable Ask me clarifying questions, then suggest the minimal feature set.

Create a [Next.js/React] prototype for [your scoped idea]. Requirements: - Use [Tailwind CSS] for styling - Keep it to [3-5] screens maximum - Include placeholder data, no backend needed - Focus on the core user flow: [describe the flow] Start with the file structure, then build each component.

Create a [type of page] for [your product]. It should: - Have a clear headline that explains [value prop] - Include [key elements: form, cards, list] - Use a [clean/bold/minimal] design style - Feel like [reference: Airbnb, Stripe, etc.]

Create a [3]-screen flow where: 1. User lands on [page type] and sees [key info] 2. User clicks [action] and goes to [next page] 3. User completes [final action] and sees [confirmation]

I have an idea for [X]. Help me identify the smallest possible version that would prove whether people want this. Ask clarifying questions, then give me a 3-bullet scope.

Build a working prototype with these screens and flows: [paste details] Use [framework]. Include placeholder content. Make navigation work.

I'm building a Next.js app that enables me to [describe functionality]. I need you to generate a simple PRD document to help steer the development. The core pages will be: - [List your pages] The [protected area] is where [key functionality] happens.

I want to build a streaming chat interface using AI SDK with OpenAI. Supporting guidance: https://ai-sdk.dev/docs/getting-started/nextjs-app-router Step 1: Build a chat page for me to test the streaming functionality Step 2: Deploy migration files and update types Functionality: 1. React markdown for formatting messages 2. Create and delete chats Design: 1. Use vh 100% layout with a fixed sidebar to load messages 2. Ensure the scrollArea is too vh as well 3. Override the parent layout to achieve a full screen design What I've done so far: 1: Added correct OPENAI_API_KEY to env.local

When a user clicks New Blog, show a modal with 2 options: 1. Create from scratch 2. Create with AI If the AI option is chosen, show a text area describing what the blog post is about. When a user presses generate, do the following: Send data to OpenAI for processing, include all of the necessary columns for a blog post, aside from the image. Save the data to Supabase then redirect a user to the edit page and populate the returned data from OpenAI

I need to implement [feature]. Before providing a solution, please ask me relevant questions about my specific requirements and constraints so you can give me the most appropriate implementation advice.

I need to implement [feature] into my app. Analyze the pros and cons of [option1], [option2], and [option3]. Consider factors like scalability, UX, ease of development, and maintenance requirements.

You're a security expert and ethical hacker. Review my app to identify any security vulnerabilities, potential edge cases, or implementation flaws. Be particularly attentive to common OWASP security risks.

Change [specific element] to [specific change]. Keep everything else the same.

## Personal Coding Standards - Always use TypeScript when possible with strict mode enabled - Prefer single quotes for strings in JavaScript/TypeScript - Use 2-space indentation consistently - Maximum line length of 100 characters - Prefer const over let, avoid var entirely ## Code Quality Practices - Write JSDoc comments for all exported functions - Include error handling in all async operations - Use descriptive variable names over explanatory comments - Prefer early returns to reduce nesting ## React Preferences - Prefer functional components with hooks - Use React.memo for performance optimization when needed - Custom hooks should start with 'use' prefix - Keep components under 100 lines ## Tool Preferences - Use Prettier for code formatting - Prefer Tailwind CSS for styling when available - Use Zod or similar for runtime schema validation - ESLint with recommended rules

# Project: [Project Name] [Brief description of what you're building] ## Tech Stack - [Framework] (e.g., React 18 with TypeScript) - [Build tool] (e.g., Vite) - [State management] (e.g., TanStack Query, Zustand) - [Styling] (e.g., Tailwind CSS) - [Backend] (e.g., Supabase) ## Code Style & Conventions - Use functional components exclusively - File naming: kebab-case for files, PascalCase for components - Use absolute imports with @ alias for src directory - Maximum line length: 100 characters ## State Management Rules - Use [state library] for global client state - Use [data fetching library] for all server state - Never mix server state with client state ## Things to Avoid - Don't use useEffect for data fetching - Don't mutate state directly - Don't use inline styles - Don't use index as key in dynamic lists

Change the [button/header/layout] to [new design]. Keep everything else the same.

Add a [feature] to the [component]. It should [behavior description]. Use the existing styling patterns.

The [component] is [problem description]. Fix it while maintaining the current functionality.

Based on this scope: [paste scope] List the screens needed for this prototype. For each screen, describe: purpose, key elements, and user action.

Create a user flow diagram for these screens: [paste screens] Show how users move between them. Identify the critical path.