Here’s a structured approach to prompting AI for web app prototypes. The key is being specific about functionality while staying in plain language.
The Basic Template
I need a web application prototype for [PURPOSE].
TARGET USERS: [Who will use this]
CORE FUNCTIONALITY:
1. [Main feature 1]
2. [Main feature 2]
3. [Main feature 3]
KEY INTERACTIONS:
- [Describe what happens when users do X]
- [Describe how users accomplish Y]
- [Describe the flow from A to B]
DATA/CONTENT:
- [What data is shown/collected]
- [Use realistic sample data for: ...]
VISUAL STYLE:
- [Clean/modern/minimal/professional/playful]
- [Color preferences if any]
- [Any specific UI patterns]
TECHNICAL NOTES:
- Make it fully functional (not just static)
- Include [any specific requirements like responsive design, form validation, etc.]Concrete Example: Stock Portfolio Viewer
Here’s what a real prompt might look like:
I need a web application prototype for a personal stock portfolio dashboard.
TARGET USERS: Individual investors who want to quickly understand their portfolio performance without opening their brokerage app
CORE FUNCTIONALITY:
1. Display a list of stocks the user owns with key information for each
2. Show growth percentage with clear visual indicators (green for gains, red for losses)
3. Allow users to sort the list by stock name (alphabetically) or by growth percentage (highest to lowest or vice versa)
4. Display total portfolio value and overall portfolio growth at the top
5. Show how much each position is worth in dollars
KEY INTERACTIONS:
- When users click on column headers (Stock Name, Growth %), the list should sort by that column
- Clicking the same header again should reverse the sort order (ascending/descending)
- Growth percentages should be color-coded: green for positive, red for negative, gray for zero
- Hovering over a stock row should highlight it to show it's interactive
- The total portfolio summary at the top should dynamically update based on the sample data
DATA/CONTENT:
- Create a portfolio of 8-10 diverse stocks with realistic data:
* Mix of tech stocks (like AAPL, MSFT, GOOGL)
* Some traditional stocks (like JNJ, WMT)
* Include both winners and losers in the portfolio
* Sample growth percentages ranging from -15% to +35%
* Share counts and current prices that feel realistic
- Show: Stock Symbol, Company Name, Shares Owned, Current Price, Total Value, Growth %
- Portfolio total should be around $50,000-$100,000
VISUAL STYLE:
- Professional and clean, like a financial dashboard
- Use a dark theme with lighter text (financial apps often use this)
- Green (#10b981 or similar) for positive growth
- Red (#ef4444 or similar) for negative growth
- Use clear typography - numbers should be easy to scan
- Add subtle borders or cards to separate stocks visually
- Make growth percentages prominent and easy to spot
TECHNICAL NOTES:
- Make sorting fully functional with visual indicators (arrows) showing current sort direction
- Calculate and display the total portfolio value and overall growth percentage
- Format currency values with $ and commas (e.g., $1,234.56)
- Format percentages with + or - signs (e.g., +12.5%, -3.2%)
- Make it responsive for both desktop and mobile viewing
- Use a table or card layout that's easy to scan quicklyProgressive Refinement Strategy
After you get the initial prototype, iterate with follow-up prompts:
For functionality tweaks:
"Add a filter toggle that lets users view only gainers (positive growth) or only losers (negative growth)"
"Add a 'Cost Basis' column showing what the user originally paid, and calculate the dollar gain/loss for each position"For interaction improvements:
"When I click on a stock row, expand it to show additional details like 52-week high/low and purchase date"
"Add a subtle animation when the sort order changes so users can track how rows move"For visual refinements:
"Make the gains/losses more visually prominent - maybe add a small up/down arrow icon next to the percentage"
"The portfolio summary at the top should be in a highlighted card that stands out more from the stock list"Tips for Better Prompts
1. Start with the user problem, not the solution
Good: "Users find it difficult to get a one-time view of their holdings and understand which stocks are performing well"
Less effective: "Build a stock portfolio app with sorting"2. Describe interactions conversationally
Good: "When a user clicks on the 'Growth %' header, the list should sort from highest gain to lowest, and clicking again should reverse it"
Less effective: "Implement column sorting"3. Include realistic sample data
Good: "Create a portfolio with stocks like AAPL (250 shares, $178.50/share, +12.3%), TSLA (50 shares, $242.80/share, -8.5%), etc."
Less effective: "Add some sample stocks"4. Specify what shouldn’t happen
Good: "Don't load real-time stock data from APIs - use static sample data so the prototype works offline"
Helpful constraint that prevents overcomplication5. Request specific behaviors for edge cases
Good: "If a stock has exactly 0% growth, show it in gray text instead of green or red"
Shows you've thought through the experienceAdvanced: Prompting for Specific Patterns
For data visualization:
"Add a simple line chart above the stock list showing the portfolio's total value over the last 30 days. Use sample data showing realistic daily fluctuations between $48K and $52K. Make the line green when trending up and red when trending down."For comparative views:
"Create a tab interface with two views:
1. 'My Portfolio' - showing the current stock list
2. 'Performance Comparison' - showing a bar chart comparing each stock's growth percentage side-by-side
Make it easy to switch between views and keep the same color coding (green/red)"For filtering and search:
"Add a search box at the top that filters the stock list as users type. If they search 'tech', show only tech stocks. If they search 'loss' or negative, show only stocks with negative growth. Clear the filter with an X button."Example Follow-up Conversation
Initial prompt: [The stock portfolio viewer prompt above]
After seeing the result:
"This looks great! A few refinements:
1. The growth percentages are too small - make them larger and bolder since that's what users want to see first
2. Add a visual indicator (like a small sparkline or arrow) showing whether each stock is up or down today
3. Include a summary metric showing 'X of Y stocks are in the green' at the top
4. When sorting by growth %, keep the sort direction indicator visible so I know if I'm seeing best or worst performers first"After that iteration:
"Perfect! One more thing - can you add a subtle background color to the entire row based on performance? So a stock with +20% growth has a very light green background, and one with -10% has a very light red background. Make it subtle enough that the text is still easy to read."Final polish:
"Love it! Last request - add a 'Day Change' column showing how much each position changed in value today (in dollars). So if AAPL went up 2.3% today and I own $8,500 worth, it would show '+$195.50 today' in small text below the growth percentage."Common Mistakes to Avoid
❌ Too vague: “Build a stock tracker” ✅ Specific: “Build a portfolio viewer showing owned stocks, their growth percentages color-coded green/red, with sortable columns”
❌ Too technical: “Implement a React table with state management for sort order and descending/ascending toggles” ✅ Outcome-focused: “Create a sortable table where clicking column headers changes the order, with arrows showing the current sort direction”
❌ Missing user context: “Add stock information” ✅ User-centered: “Show growth percentages prominently because users want to quickly identify winners and losers”
❌ No sample data: “Show a list of stocks” ✅ With examples: “Show 8 stocks: AAPL (250 shares, $178.50, +12.3%), TSLA (50 shares, $242.80, -8.5%), MSFT (150 shares, $378.20, +5.7%), AMZN (30 shares, $145.60, -2.1%), etc.”
❌ Unrealistic requirements: “Pull real-time stock data from Yahoo Finance API” ✅ Prototype-appropriate: “Use static sample data with realistic stock prices and growth percentages so the prototype works without external dependencies”
Pro tip: Save your best prompts! When you find a prompt structure that consistently generates good results, template it for future use. You’ll build a personal library of effective patterns for different types of prototypes.