The exact prompts I used to vibe-code a World Cup app from an open-source repo. Saved 2026-06-22.
Base repo: github.com/26worldcup/26worldcup.github.io — MIT-licensed React 19 + TS + Vite, no backend
Work in this open-source repo: <https://github.com/26worldcup/26worldcup.github.io>
Clone it, read the code to understand how it's built, then make all of the
changes below in ONE pass. Don't ask me questions — make reasonable decisions
and keep going until everything is done and working.
1) RENAME
Rebrand the app everywhere to "The PickPick", with "Cup 2026" as a small
subtitle under the masthead. Remove the words "World Cup" and "FIFA" and any
official emblem or logo from the UI. Keep the real team and player names. Keep
the original MIT license/attribution credit (a small line in the footer is fine).
2) NAVIGATION
Primary nav = only these four: Schedule, Groups, Bracket, Predict.
Move everything else (broadcast/where-to-watch, stadium map, weather, referees,
stats/golden boot, calendar export, and any other secondary pages) into a footer
link list. Do not delete those pages — they must still work from the footer.
Set the default language to English and hide the language switcher (leave the
underlying translations in place).
3) RESKIN — newspaper / broadsheet
Cream/off-white background, near-black text. Serif headlines. A masthead at the
top showing "The PickPick" in large serif type with "Cup 2026" as a small
subtitle. Thin black rules between sections, small all-caps kickers/labels,
tables with hairline borders. Clean, print-like, highly readable. One restrained
spot color (a deep red) for the masthead rule and active links only — otherwise
black on cream.
4) NEW FEATURE — "Predict": you vs. the model
Add a new page at /predict, linked in the primary nav.
- The user fills out their own knockout-bracket prediction, picking winners from
the Round of 16 through to a champion.
- For each matchup, show the app's existing forecast win probability for the
teams — reuse the real data already in the app, do not invent numbers.
- Save the user's picks to localStorage so they persist on reload.
- When the bracket is complete, the user must enter their email to reveal their
completed bracket and a shareable results card (a styled element meant to be
screenshotted) showing: their champion pick, how many picks agreed with the
model's most-likely outcome (X of Y), their single biggest disagreement with
the model, and the app name. Email is required to reveal.
- For now, store the submitted email in localStorage and leave a clearly marked
placeholder for a real email provider (backend comes later). Do not add a
backend.
RULES
- Keep every existing page working (now reached from the footer).
- Fully static, no backend — localStorage for picks and the captured email.
- Match the existing code style and patterns.
- When you're done, run the production build and the type-checker, fix anything
that fails, and do not stop until the build passes clean and the Predict page
works end to end. One pass, fully finished.
In this same app ("The PickPick"), add the legal pages — one pass, don't stop
until the build passes.
- Add a Privacy page and a Terms page, both linked from the footer next to the
existing Credits/attribution line.
- Privacy: standard policy for a free, ad-free app that collects a user's email
(note that email is currently stored client-side / will move to an email
provider). Use clear placeholder text I will replace before launch.
- Terms: standard terms, and must include a "for entertainment only — not
betting or gambling" disclaimer and a "not affiliated with FIFA or any
official governing body" note. Placeholder text I will replace before launch.
- Match the newspaper styling. Run the production build and type-checker and
fix anything that fails before finishing.