Projected Leaderboard— scored against the current live table
● PROVISIONAL
Scores below assume the league finishes exactly as it stands right now. Rankings will shift as the final games play out.
All Predictions
● RESTRICTED ●
Admin Access
Host controls for phase management and results entry.
● ADMIN ● HOST CONTROLS
Control Room
Phase management, results entry, game reset
● OPEN
PHASE
Lock / Reopen
Lock when everyone's submitted — picks become visible to all.
RESULTS
Final Table
Fill these when the season ends, or tap "Pre-fill from Live Table" to copy current standings.
FINAL TOP 5
FINAL BOTTOM 3
TEAM POOL
TIEBREAKERS
Bonus Outcomes
Auto-fill uses live data for rank/goals and the current vote leader for Most Hated. Golden Boot stays manual.
LIVE DATA
Refresh Table
PLAYERS
Manage Players
Delete test accounts or dropped players. No undo.
🔍 DIAGNOSTICS
Connection Health Check
If players are saving but not appearing in the list above, tap Run Diagnostics to see what's failing. Safe to run — no data is changed.
DANGER ZONE
Reset Everything
Wipes all picks and results.
● HOW THIS WAS BUILT ●
Vibe-coded
This whole site was built by chatting with an AI. Here's what made that conversation actually produce something usable.
The site you're looking at — the pixel avatars, the live table, the Firebase sync, the scoring engine, the 🏆 leaderboard — was built end-to-end by having a conversation with Claude. No templates, no boilerplate repo, no Stack Overflow. Just prompts and iteration.
The interesting thing isn't that AI can write code. It's that the quality of what you get is directly shaped by the quality of what you ask for. Below are the six prompting moves that actually moved this project forward, with the real prompts used.
Six things that worked
01
Start with the actual goal, not the solution
Bad: "build me a football app". Good: describe the real user need, the interaction, and the context.
"We want to create a simple team Premier League betting game based on the final 5 fixtures of this season. A ranking game based on everyone's prediction of the top 5 and bottom 3. I want a simple UI/website where someone can input their names, see the current standings, and drag around the team badges."
Why it worked: Contains the who (group of friends/colleagues), what (rank top 5 + bottom 3), when (final 5 fixtures), and shape (drag interaction). Claude doesn't have to guess; it can get on with it.
02
Numbered requirements get numbered answers
When you want multiple things, make them a list. It's easier for the AI to track every item and for you to check what was missed.
"1. Table needs more stats, esp goals, goal difference.
2. Certain outcomes (based on games left) are known. Bottom 2 is locked mathematically. Prefill this.
3. Badge icons should be more prominent — the main feature of the UI.
4. Gamify more betting tiebreakers — something a data source can auto-track.
5. Need a clear link to the leaderboard and clarity on where bets are saved.
6. Share it as a zip so I can push to GitHub.
7. Rename it PMD Sports Predictor.
8. Code it so we can rejig for the upcoming World Cup.
9. Include a share feature for a chat message + site link."
Why it worked: Nine completely different asks landed in one message. Because they were numbered, Claude could hit every single one and reply with a matching checklist. Without the numbering, at least three would have been missed.
03
Reference real things for style and shape
The fastest way to describe an aesthetic is to point at one. Cultural references, brand names, and specific products do more work than adjectives.
"Can you design pixel player top-half shots? Like Habbo Hotel-like avatars, based on the leading scorer of each club, wearing a jersey of that colour?"
Why it worked: "Habbo Hotel" is a one-word aesthetic brief. It conveys: chunky pixels, friendly proportions, saturated colours, 3/4 view, half-body shot. Three adjectives couldn't do that. Pair it with specific constraints ("top half", "leading scorer", "jersey colour") and you get original work in the right direction.
04
Push back when the logic doesn't add up
AI will confidently ship something that's internally inconsistent. The fix is to call it out specifically — don't just say "this feels wrong".
"Why did you lock Man City and Arsenal's positions in the top 5 as a done deal? Wait wait — I want you to double-check. In the 12345 boxes, ranking matters, yeah? So if Man City is at 1, it means the user predicts a first-place finish. That isn't locked in!"
Why it worked: The correction is concrete ("rank position #1 ≠ 'in top 5'"). It identifies the category error instead of just saying "looks off". Claude had to re-examine the feature, remove it, and switch to informational-only display. Whole game-logic fix from one question.
05
Bring creative ideas — the AI won't invent your vibe
AI is great at execution, average at taste. The best ideas in this site came from one-line creative suggestions.
"Maybe a funny stat could be to ask 'who is your least favourite team?' then followed by 'which is PMDF's most hated team?' Assign points on that."
Why it worked: Introduces a social mechanic the AI wouldn't have dreamt up on its own. The prompt includes the question format AND the scoring implication, so Claude can wire it up directly (every player votes → majority wins points → creates a reading-the-room mini-game).
06
Ask for subtraction, not just addition
Left alone, AI tends to over-build. UI accretes, copy gets longer, "helpful" labels pile up. Explicitly ask for cleanup with a clear rule.
"Clean up the clutter and unnecessary UI elements and text. If they have no added value to the user's gameplay or the admin's oversight, remove."
Why it worked: Gives the AI a specific rule it can apply ("must add value to gameplay or oversight") and delegates taste decisions. The storage-mode pill, the "where your picks are saved" explainer, the redundant scoring-info subtitle — all gone in one pass.
Try it yourself
Pick a small, real problem you have — a tracker, a calculator, a little tool your team keeps doing by hand. Open claude.ai and start with a goal, not a spec. Iterate in small chunks. Push back when something's off. Ask for cleanup at the end. You don't need to be a developer to make this work — you need to be a clear thinker about what you actually want.
Fun stats about this site: ~20 conversational turns, 15 files, ~140KB total, 0 bundlers, 0 frameworks, 1 embarrassing deployment loop, 0 stack traces understood by the person driving.
Share your picks
Copy the text below to send via message, Slack, or any chat.