the board, on the wall, on a link.
draft night runs on a board. the platform ones are fine if everyone is in the platform, and useless the moment your league does something slightly its own way — keepers, an odd roster shape, a snake with a twist.
so somebody ends up with a spreadsheet on a laptop plugged into a television, retyping names.
a page built for your league has the teams, the rounds and the roster slots already right, and can be projected on the same television with rather more dignity.
a grid, a clock, and speed.
01 / what it isdraft night has one real requirement: entering a pick must be faster than saying it out loud, because twelve people are watching and the next person is already deciding. everything else on the board is display.
the reason to build your own is the league’s specifics — keepers already assigned, a third-round reversal, a roster that is not the default shape. those are one sentence to an agent and unavailable in most platforms.
- your teams, in draft order, snake or linear as you play
- the right number of rounds and roster slots
- picks entered fast, because the room is waiting
- whose pick it is, unmissably
- a clock, if your league uses one
- export of the completed draft
- what it holds
- teams, draft order, rounds, roster slots, and the picks as they happen
- where that goes
- localStorage on the machine running the board
- the order
- snake, linear, or your variant — implemented as you described it
- what it is not
- a player database. there are no rankings or projections in it
see one in action.
02 / examplea twelve-team snake draft, sixteen rounds, with picks filling in and the clock on the current one
the live example is still being built — the prompt below is the one it was made with.
copy this, then make it yours.
03 / starting prompta starting point, not a template — the point of an agent is that the result is yours. change the sections to match what you want, and remove anything you don’t need.
Build me a fantasy draft board as a single web page.
Ask me first:
- The league name and the teams, in draft order.
- Snake or linear, and any twist we use — a third-round reversal, keepers already assigned to teams, anything non-standard.
- How many rounds, and what the roster slots are.
- Whether we use a pick clock, and how long.
- Whether I want to mark positions or just names.
Take the league rules exactly as I describe them. Do not invent teams, players, rankings or projections, and do not include a player list — I will type names as they are picked.
WHAT IT DOES
- The board is a grid: rounds down, teams across, picks filling in as they happen.
- Entering a pick is the fastest possible interaction. The current slot is already focused; I type a name and press enter; it advances to the next pick automatically. This is the single most important thing on the page.
- Whose pick it is must be unmissable from across a room — name, round and pick number, large.
- Implement the draft order exactly, including the snake turn and any twist I described. Handle keepers by pre-filling their slots and skipping those picks.
- If we use a clock: a countdown on the current pick, startable and pausable, with a visible warning near the end. Do not auto-pick when it expires; just make it obvious.
- Undo the last pick, and edit any pick, because someone will be misheard.
- Export the finished draft as text I can paste into a chat, and as JSON.
DESIGN
- Built to be projected or cast onto a television, and still usable on the laptop driving it. Large type, high contrast, no reliance on colour alone.
- The grid should fit as much as possible on screen without scrolling during a pick.
- No animation that delays the next entry.
BE HONEST ON THE PAGE
- Say the board is stored on this device only, so it should run on one machine and everyone else should watch the screen.
- Do not claim player data, rankings, projections or any connection to a fantasy platform.
STORING THE DATA
- Save everything to localStorage in the browser, automatically, as I go. No
accounts, no login, no server call.
- On the page, say plainly that data lives in this browser only and does not
sync to other devices. Do not bury it.
- Give me an "export" button that copies or downloads everything as JSON, and an
"import" that reads the same JSON back. That is the only way my data can move
between devices, so it is not optional.
- Never lose what I have already entered. If the stored data is from an older
version of the page, read what you can rather than throwing it away.
DELIVERY
- Produce one self-contained HTML file. Inline the CSS and JavaScript.
- No build step, no server, no framework, no package install, no external
requests at runtime.
- Mobile-first and responsive; it has to be usable one-handed on a phone and
still look right on a laptop.
- Accessible: semantic HTML, real contrast, visible keyboard focus, labelled
controls, touch targets big enough to hit, and respect reduced-motion.
- Use placeholders where information is missing. Do not invent facts, numbers,
names, dates, prices, or results I have not given you.
- Before you call it finished, use it yourself: enter real-looking data, reload
the page, and confirm nothing is lost or mangled.
PUBLISHING
Publish the finished page to HTMLShare and give me the link.
Use exactly one of the two paths below, preferring the first. Make the call
directly. Do not route it through a code sandbox, container, or computer-use
session — that is where the request gets blocked, and it is never necessary.
1. An HTMLShare integration or connector, if you have one configured.
The page is permanent and owned by my account. Report the url and the
siteId. There is no claimUrl or manageToken on this path — do not go
looking for one, and do not switch paths in order to produce one.
2. Otherwise, publish anonymously over REST. No account, key, or signup is
needed:
POST https://api.htmlshare.net/v1/publish
content-type: application/json
{"html": "<!doctype html> ... "}
The reference is https://htmlshare.net/docs and, for the full schema,
https://api.htmlshare.net/openapi.json
Report these from the response, in your reply and never inside the page:
url the public page
claimUrl a private link that is mine alone. opening it is how I keep
the page past its 24-hour expiry, or set an email reminder
before it goes. it carries the manage token, so it must
never appear in the published HTML or anywhere a visitor
could see it.
manageToken the only thing that can edit or delete this page later. it is
returned once and never again, so tell me what it is.
Tell me which of the two you used. If the path you reach for first is
unavailable in your environment, say so and tell me what you are switching to
before you publish — a permanent page on my account and a 24-hour anonymous
page are different things, and which one I get is my decision, not a detail.
If I ask for a change afterwards, update the existing page instead of
publishing again, so the URL I have already shared keeps working — through the
same integration on path 1, or with the manage token as an X-Manage-Token
header on path 2.
RECIPE MARKER
Include this tag in the <head>, exactly as written:
<meta name="htmlshare-recipe" content="fantasy-draft-board">
It tells htmlshare which recipe the page came from, so the library can count
that this one was actually made. It carries nothing else.give it a url.
04 / publishing ithow you publish depends on how you’re working.
- with an integration
- if your assistant already has htmlshare connected — mcp or another supported integration — just ask it to publish the finished page and hand back the url. the page belongs to your account and is permanent. when you want a change, ask for an update to that same page rather than a new one.
- with no integration
- the prompt tells the assistant to post the html to the rest api instead, which needs no account and no key. it comes back with a live url you can open immediately, a private claim link, and a manage token. the claim link is how the page stops being temporary — keep it.
- by hand
- nothing stops you doing it yourself: have the assistant give you the html file and drop it on the htmlshare home page. same url, same page, one more step.
- what matters here
- you will make this once and use it once a year, so what matters is finding it again next august. claim it and give it a slug with the league name in it.
next season is eleven months away.
05 / keeping it aroundfine for the night itself — publish it in the afternoon, draft in the evening. it stops serving 24 hours later, with a 7-day recovery window.
claim it and next year’s draft is a five-minute edit rather than a rebuild. the league structure is the part worth keeping.
- keep it around
- the league setup is reusable next season, and an anonymous page is not there in august.
- custom url
- the league can be told one address once, and it still works next year.
- stable updates
- teams and rules change between seasons. edit the page, keep the link.
questions.
06 / questionscan everyone draft from their own device?
no. there is no shared state, so one machine runs the board and the room watches it. that matches how most in-person drafts actually work, and it is the honest limit of a static page.
does it have player rankings?
no — it contains no player data at all. you type names as they are picked. that keeps it accurate, since any list it invented would be out of date and probably wrong.
what if the laptop crashes mid-draft?
picks are saved as you go, so reopening the page on the same browser restores the board. a different machine starts empty, which is the argument for exporting periodically on a long draft.
can we use it for an online draft?
as a shared display on a call, yes — screen share the board while one person enters picks. it cannot be the draft system itself.