# The MPC Marketing App

**Live version:** recruitergtm-mpc.vercel.app. Open it before you build, so you know what you are aiming at.

**Where to run it:** Claude Code, or the Claude app with a project folder.

**You do not need this file.** Everything below the line is the prompt, and it is the same text that is on the slide. Copy it from either.

---

You are building me a mini app called the MPC Marketing App. One HTML file, runs in the browser.
No database, no login, no server, no API key. I open the file and it works.

MY NICHE, WHICH DECIDES EVERYTHING BELOW: I place GTM Engineers and Ops Integrators into recruitment
agencies. Every candidate this app ever handles is that kind of person, and every buyer is an agency
owner. Do not build me something generic that could market any candidate to any company.

STAGE 1 - ASK ME FOR MY BRANDING FIRST. Write no code yet. Ask these six in one numbered message, then stop:
  1. My agency name, exactly as I write it.        4. My logo: I drop the file in, you use the filename.
  2. My brand colour as hex. No idea? Ask for      5. My font, or say you will use Inter and why.
     my website and read the colour off it.        6. My sign-off, word for word, for outreach messages.
  3. A second colour, or derive one.
Write all six into brand.json so every app I build after this reads it instead of asking me again.

STAGE 2 - BUILD IT. One index.html, CSS and JS inline. Three tabs: Candidate, Target list, Send log.

TAB 1, CANDIDATE, in three columns.
  LEFT, the input. A drop zone that accepts PDF and .docx as well as pasted text. Use pdf.js and
  mammoth.js from cdnjs, both read in the browser, nothing uploaded. When you rebuild lines out of a
  PDF, only insert a space where there is a real horizontal gap between text items, because pdf.js
  emits ligatures as separate items and a naive join turns "qualified" into "quali fi ed". Test that.
  Under the drop zone: reference code (MPC-01), job title, years, location, notice, rate, hours, and
  a box for their three strongest points. Everything saves to the browser as I type.

  Then the part that makes this mine: scan the CV for the tools a GTM Engineer actually runs and show
  them as chips so I can see what it found. Look for at least Clay, Apollo, Instantly, HeyReach,
  Smartlead, Lemlist, Apify, n8n, Make, Zapier, Claude, ChatGPT, HubSpot, Salesforce, Attio, Bullhorn,
  Loxo, JobAdder, Vincere, Airtable, SQL, Python, Sales Navigator, cold email and deliverability.
  Also pull out the sectors they have worked and their years. Those chips drive the ranking.

  MIDDLE, the profile. Live preview on white, my colours, my logo, the reference where the name would
  be. Never the real name, never the email, never the phone: I decide when the client learns who this
  is. Sections: why this one, stack, sectors worked, availability. Footer says "Name and contact
  details on request". A Download PDF button using the browser's own print, A4, one page.

  RIGHT, and this is the point of the app: THE TEN AGENCIES WORTH PITCHING THIS CANDIDATE TO, ranked.
  Score every agency in my target list against this candidate and show the top ten with a number, the
  role to pitch to, and the reason in plain English. Score on:
    - tools we share with them: they already run what this candidate runs, so there is no ramp
    - what outbound they run today: nothing running scores highest, then manual, then basic
      sequences, then a full engine. An agency with nothing running is the easiest pitch I have.
    - their size: 2-5 and 6-15 score highest, because they feel every hour and can sign without a board
    - sector overlap between what they recruit and what this candidate has worked
    - same market or timezone
    - what this candidate brings that they do not have yet
  Under each one, a button that writes the outreach message from those same facts: opens on their
  situation, names the candidate by reference not by name, says what changes, ends with an offer of
  the one-pager. Under 120 words. Leave {{FirstName}} where I have not stored a name. Never write a
  line that would work for any candidate and any agency. Also a Log a send button.

TAB 2, TARGET LIST. This is the engine, so make it easy to build. A form to add an agency: name,
website, location, size band, what outbound they run today, what they recruit, their tools, and
optionally the buyer's name and role. A bulk paste box, one agency per line, comma separated. Export
to CSV. A table of everything with a remove button. Build in a Load sample list button with a dozen
clearly-marked [SAMPLE] agencies so the ranking works the moment I open it, and make them obviously
fake so I never mistake them for real ones. Store no contact details beyond a name and a role.

TAB 3, SEND LOG. Date, agency, who, candidate reference, channel, status. Click the status to move it
Sent, Replied, Meeting, Placed, Dead. Export CSV. Saves in the browser.

STAGE 3 - THE RULES YOU DO NOT BREAK.
  The real name, email and phone never appear on the profile or in any message.
  Nothing leaves the browser. No uploading the CV, no analytics, no sending anything anywhere.
  Never invent a fact about a candidate or an agency. Empty field, leave the line out.
  Never invent a named decision maker or a contact detail. Rank the firm and name the role to pitch
  to. Finding the actual person is a separate job with separate tools, and a guessed name gets me
  ignored at best. If I have stored a name, use it.
  Never write outreach that would work for any candidate. Too little to go on, say so on screen and
  tell me which field to fill.

STAGE 4 - PROVE IT WORKS. Load one invented GTM Engineer and the sample agencies so it works the
second I open it, with a button that clears both. Then use it yourself: upload a PDF CV, check the
chips found the tools, check the ranking order makes sense and the reasons read as English with the
verbs agreeing. Fix what is wrong before you show me. Then tell me the three things you would add
next and wait for me to pick one.

STAGE 5 - PUT IT ONLINE. Walk me through Vercel one step at a time, waiting after each: make the free
account, npm i -g vercel, run vercel from this folder, then vercel --prod. Confirm the live address
works in a browser. If the address asks for a login, deployment protection is on, so tell me where to
switch it off. Then ask whether this should be public or private, because it holds my candidate
pipeline, and set up whichever I pick.