BuyWhere
← Back to documentation

BUY-3700_storyboard_product_hunt_screenshots

BUY-3700 — Storyboard: Product Hunt Screenshot Sequence

Owner: Sketch (UI/UX Designer) Issue: BUY-3700 Date: 2026-04-22 Status: Draft

Overview

This storyboard defines the visual narrative for BuyWhere's Product Hunt gallery screenshots. The sequence follows a problem-to-solution-to-action arc: show the messy现状 (current state), introduce BuyWhere as the clean solution, then demonstrate actionable developer workflows.

Design principle: Each screenshot should be readable in 3 seconds. Lead with the value, not the UI chrome.

Screenshot Sequence

Frame 1: The Problem

Visual: Browser tabs/open windows showing multiple retailer sites (Lazada, Shopee, Amazon, etc.) with scattered price tags, inconsistent layouts, and "price on request" placeholders.

Caption: "Building AI shopping agents still means messy catalog integration"

Narrative function: Establishes the pain point. Developers who have tried scraping or integrating multiple retailer APIs will immediately recognize this friction.

Key elements to highlight:

  • Fragmented UI across multiple sites
  • Price inconsistency visual cue
  • Complexity of multi-tab workflow

Frame 2: The Search — Unified Results

Visual: BuyWhere API request/response or search UI showing normalized product listings from multiple merchants in a single, clean response.

Caption: "Search products across Southeast Asia with one API"

Request example (curl):

curl "https://api.buywhere.ai/v2/search?query=wireless+earbuds&limit=5" \
  -H "Authorization: Bearer $BW_API_KEY"

Response highlight: Show structured JSON with normalized fields: title, price, currency, merchant, category, affiliate_url, confidence_score.

Narrative function: Demonstrates the core value proposition — one API call, normalized data from multiple sources.

Key elements to highlight:

  • Clean, consistent schema
  • Multiple merchant sources in single response
  • Confidence scores for data quality
  • Affiliate-ready purchase links

Frame 3: Price Comparison

Visual: Side-by-side comparison of the same product across 4 merchants (price, shipping, rating) OR a table view showing the competitive landscape for a single product.

Caption: "Compare prices without building retailer-specific glue"

Example layout:

MerchantPriceShippingRating
Lazada$89Free4.5★
Shopee$85$34.7★
Amazon$92Free4.6★
Grab$87Free4.4★

Narrative function: Shows the comparison capability that would require 4 separate integrations to achieve otherwise.

Key elements to highlight:

  • Easy price comparison at a glance
  • Shipping cost inclusion
  • Merchant ratings for trust signals

Frame 4: MCP Integration

Visual: Claude Desktop or Cursor with MCP tool call to BuyWhere, showing:

  1. User prompt requesting product search
  2. MCP tool call to BuyWhere
  3. Structured product response back in the chat

Caption: "Connect shopping agents through MCP"

Example tool call:

{
  "tool": "buywhere_search",
  "input": {
    "query": "best wireless earbuds for running",
    "limit": 3
  }
}

Response:

{
  "products": [
    {
      "title": "Sony WF-1000XM5",
      "price": 289.00,
      "merchant": "Lazada",
      "affiliate_url": "https://..."
    }
  ]
}

Narrative function: Demonstrates the agent-native integration. This is the "aha moment" for builders working with MCP clients.

Key elements to highlight:

  • Natural language → tool call flow
  • Structured response inside agent context
  • Seamless MCP protocol integration

Frame 5: Developer Experience

Visual: BuyWhere API documentation page showing:

  • OpenAPI spec reference
  • Quickstart code example
  • Authentication flow (API key creation)

Caption: "Built for both developers and AI agents"

Screens to consider:

  • API docs homepage with endpoint listing
  • SDK installation (pip install buywhere)
  • Sample code snippet for search

Narrative function: Shows that BuyWhere is a real, production-ready API with proper docs, not a prototype.

Key elements to highlight:

  • Clean documentation layout
  • Code examples front-and-center
  • "Get API Key" CTA button

Frame 6: From Discovery to Action

Visual: Affiliate link flow OR example application screenshot (Discord bot, WhatsApp bot, or Streamlit dashboard).

Caption: "Ship shopping assistants and bots faster"

Option A — Bot example:

  • Screenshot of a chat interface (Discord/Telegram) with a shopping workflow
  • User asks for product recommendation
  • Bot returns structured result with buy link

Option B — Streamlit explorer:

  • Screenshot of Streamlit app with product search + comparison
  • Shows the "build your own UI" angle

Option C — Affiliate flow:

  • Show the full loop: search → compare → affiliate link → commission tracking

Narrative function: Closes the loop from discovery to action. Developers see a concrete use case they could ship.

Key elements to highlight:

  • Real working example
  • Clear CTA / next step visible
  • "You could build this" energy

Visual Consistency Guidelines

Color palette for screenshots

  • Primary: BuyWhere brand blue (#1E40AF or similar)
  • Background: Light/neutral to keep focus on content
  • Accent: Green for success states, prices, CTAs

Typography

  • Use system fonts or BuyWhere brand font
  • Ensure text is legible at thumbnail size
  • Use 16px minimum for body text in screenshots

Annotation style

  • Subtle arrows and highlights only where critical
  • No heavy watermarks
  • Keep UI chrome minimal — maximize content visibility

Screenshot dimensions

  • Recommended: 1280×720 or 1920×1080 (16:9)
  • Product Hunt thumbnail: Will be cropped to 1:1 or 16:9
  • Key content: Keep in top 70% of frame (bottom may crop)

Export Checklist

Before exporting final screenshots:

  • Remove any internal test data or placeholder content
  • Verify all prices, product names, and links are real
  • Ensure no console errors or debug panels visible
  • Confirm API responses show realistic data
  • Check all merchant logos/names are accurate
  • Validate no personally identifiable information included

File Naming Convention

ph_screenshot_01_problem.png
ph_screenshot_02_search_api.png
ph_screenshot_03_comparison.png
ph_screenshot_04_mcp_integration.png
ph_screenshot_05_developer_docs.png
ph_screenshot_06_action_bot.png

Storyboard prepared by Sketch for BUY-3700 Aligns with launch plan from BUY-2900 / BUY-2922 / BUY-3159