PRD Agent logoPRDAgent

Ad Simulation AI — MVP web app to simulate ad performance using an LLM before running ads.

COMPLETE
1 week
$1
4 features
2 milestones
1 role

Project Overview

Problem Statement
Marketers and founders want to estimate ad performance before spending money; the app generates multiple ad variants and scores/ranks them using marketing criteria.
Ideal Customer Profile
Marketers, founders, and growth teams creating paid ads for products/services who want quick iteration and pre-flight evaluation.
App Audience
Public-facing web app (MVP)
Project Type
Greenfield (new build)
Integrations
Claude API (Anthropic) for ad generation + evaluation via /api/simulate.
Tech Stack Preferences
Next.js 14 (App Router), React, Next.js route handler /api/simulate; environment variables for API keys. No-auth MVP (no user accounts).
Deployment Preferences
Vercel deployment.
Design Status
Simple clean UI; no existing designs (engineer-led).

Features

Ad simulation input form
UI form to collect product/service name, target audience, pain points, ad goal, and optional winning ad examples. No login required.
  • Build InputForm component

    Create /components/InputForm.tsx with controlled inputs for product, audience, pain points, ad goal (select), and winning ads examples (textarea).

  • Client-side validation

    Ensure required fields are present; trim inputs; basic length limits.

  • Submit to API

    POST JSON payload to /api/simulate; handle abort/cancel if needed.

LLM-powered ad generation + scoring (Claude)
Server-side /api/simulate route that prompts Claude to generate 10 ad variants, evaluate them on defined criteria, assign 1–10 scores, and rank best-to-worst. Returns strict JSON with headline, ad_copy, score, reasoning.
  • Implement /api/simulate route handler

    Create /app/api/simulate/route.ts; accept POST; validate payload; call Claude API with async/await.

  • Prompt engineering for strict JSON

    Create a structured prompt that forces valid JSON array output; include evaluation rubric (emotional hook, pain relevance, clarity, curiosity, conversion potential).

  • Parse and validate response

    Parse JSON; handle malformed responses; validate required fields; sort by score desc; return normalized JSON.

  • Env var + secrets handling

    Use process.env for ANTHROPIC_API_KEY (and model name if configurable). Never log secrets.

  • Error handling + status codes

    Return 400 for bad input; 500 for LLM errors; include safe error messages.

Ranked results UI
Display ranked ads as cards showing headline, ad copy, score, and reasoning. Include loading + error states and clean formatting.
  • Build AdCard component

    Create /components/AdCard.tsx to render headline, ad_copy, score, reasoning; include rank index and consistent styling.

  • Main page layout

    Implement /app/page.tsx to compose InputForm + results list; manage state for loading, error, and results.

  • Loading + empty states

    Disable submit button during request; show spinner/text; show placeholder when no results.

  • API error UX

    Show a non-technical error message and optionally details for debugging in dev.

JSON contract + ranking rules
Define a strict response schema: array of 10 items with headline, ad_copy, score (1-10), reasoning; ranked best-to-worst by score. No per-criterion subscores in MVP.
  • Define TypeScript types for request/response

    Create shared types (inline or /lib/types) for payload and response items; enforce in UI.

  • Normalize + sort results server-side

    Ensure server returns results sorted by score desc; clamp score to 1-10; drop invalid items.

  • Example API response + documentation

    Provide README section with example request/response and env setup.

Milestones

Milestone 1

Milestone 1 — Core MVP flow
Implement core UI and API wiring: input form, /api/simulate Claude integration returning strict JSON, and ranked results displayed in cards with loading/error states.
$0

Assigned Features

  • Ad simulation input form
  • LLM-powered ad generation + scoring (Claude)
  • Ranked results UI
  • JSON contract + ranking rules

Milestone 2

Milestone 2 — Polish + production deploy
Hardening and release: improve prompt robustness, add defensive parsing, refine UI styling, ensure good error states, and deploy to Vercel with environment variables configured.
$0

Skills Needed

Full-Stack Developer
Build the Next.js 14 MVP with a clean UI, a secure API route integrating with Claude, prompt design for strict JSON output, and production-ready error handling and deployment to Vercel.
Next.js (App Router)ReactTypeScriptNode.js (Route Handlers)Anthropic Claude APIPrompt engineering (structured JSON)Vercel deploymentEnvironment variable managementUI styling (Tailwind CSS or CSS modules)Input validation & error handling