Build a Tier List Maker With AI (That Actually Works on a Phone)

A tier list looks trivial. A stack of colored rows labeled S, A, B, C, D, and a pile of items you drag into them until the ranking feels right. But it does a real job: it forces a vague opinion (“these are kind of good and these are kind of bad”) into a picture everyone can argue about in seconds. That is why they spread. You can build a tier list maker with AI in a few minutes, and it is a near-perfect first project, because the whole thing fits in one file and the payoff is immediate. You drag a card, it lands in a row, the ranking updates.

There is one catch, and it is the same one almost everyone hits. The part that makes a tier list a tier list, the dragging, is also the part AI gets subtly wrong by default. Get it right and you have a tool a whole group can use on their phones. Get it wrong and you have a page that works on your laptop and looks broken to half the people you send it to. This guide walks through building a tier list maker that actually works everywhere, lets people add their own items, and is good enough to put in front of other people.

TL;DR: List your items first. Ask AI for a single self-contained HTML file with labeled tier rows, a pool of unplaced cards, and drag-and-drop. The key instruction: build the dragging on Pointer Events (pointerdown, pointermove, pointerup), not the HTML5 drag API, so it works on touchscreens too. Ask it to save the arrangement so the ranking survives a reload. Then publish it as a live link so a whole group can rank on their own phones.

What does a tier list maker actually need?

Strip it down and there are only four parts. Naming them before you prompt keeps the AI from inventing a more complicated app than you want.

• The tier rows. Labeled bands, each a drop target. Classic is S, A, B, C, D (S being the “so good it beats A” meme tier), but your labels can be anything: Must-have, Nice, Skip, or Loved it, Fine, Hated it.
• The item cards. The things being ranked. Text is simplest; images make it pop. Each card can be picked up and moved.
• The pool. A holding area for items that have not been placed yet. You drag out of the pool into a row, and you can drag back.
• The drag itself. Pick up a card, move it, drop it in a row or the pool, and have the row reflow so cards line up neatly. This is the whole experience, and it is where the one real gotcha lives.

Why does the drag break on phones?

Here is the failure that catches almost everyone. You ask the AI for drag-and-drop, it works beautifully on your laptop, you publish it and send the link around, and the people who open it on a phone tell you nothing moves when they try to drag a card.

The reason is that there are two completely different ways to do dragging in a browser, and the AI tends to pick the one that is easier to write and quietly wrong for your use case.

The HTML5 drag-and-drop API (dragstart, dragover, drop, and the draggable attribute) is the one AI reaches for first, because it is the “official” drag API and takes very little code. The problem: those events do not fire for touch. On a phone, dragging a draggable element usually just scrolls the page or does nothing. Your tool is dead on arrival for anyone not on a computer.

The fix is to build the dragging on Pointer Events instead: pointerdown to pick a card up, pointermove to follow the finger or cursor, pointerup to drop it. Pointer Events unify mouse, touch, and stylus into one stream, so the same code handles a laptop and a phone. On touch you also want touch-action: none on the cards so the browser does not try to scroll while you drag.

You do not have to understand any of that to get it. You just have to ask for it. One sentence in the prompt (“use Pointer Events, not the HTML5 drag API, so it works on touch”) saves you the whole broken-on-phones round trip. It is the same principle as everything in making AI pages mobile friendly: the default is desktop-shaped unless you say otherwise.

The prompt that builds it

Write your items in plain text first. A tier list built around real content comes out far better than one full of “Item A, Item B.” Then paste them into a prompt that spells out the structure and the behavior. Here is a complete starting point you can copy and adapt:

Build me a tier list maker as a single self-contained HTML file.
No external libraries, no build step, everything inlined.

Tiers (one row each, top to bottom), with these colors:
S = red, A = orange, B = yellow, C = green, D = blue

Items to rank (start them all in a pool below the rows):
Margherita, Pepperoni, Hawaiian, Four Cheese, Veggie, BBQ Chicken

Layout:
- Each tier is a labeled colored band on the left with a wide drop
  area to its right that holds the cards placed in that tier.
- Below the rows, a "pool" area holds items that have not been
  placed yet.
- Cards are simple rounded rectangles with the item name, readable
  and large enough to tap.

Dragging (important):
- Implement drag-and-drop with Pointer Events (pointerdown,
  pointermove, pointerup), NOT the HTML5 drag API, so it works with
  both a mouse and a finger on a touchscreen.
- Set touch-action: none on the cards so the page does not scroll
  while dragging.
- When a card is dropped, place it in whichever row or the pool it
  was released over, and reflow the cards in that row neatly.

Saving:
- Save the current arrangement to localStorage so a reload keeps the
  ranking. Add a small "Reset" button to send all cards back to the pool.

Style: clean and modern, good color contrast, works well on a phone.
Return the complete HTML file.

The lines under “Dragging” are the ones that matter most. Leave them out and you will very likely get the HTML5 version that breaks on touch. If you want the model to reliably hand you one clean file instead of a fenced snippet you have to assemble, our guide on getting self-contained HTML from AI covers the exact phrasing.

How do you make it yours?

Once the base list works, improve it with plain-language follow-ups. This is where it goes from a demo to a tool you would actually send someone. Add changes one at a time and test after each, the same small-step loop covered in how to iterate on AI-generated pages.

• Let people add their own items. “Add a text box where I can paste items, one per line, and a button that adds them as cards to the pool.” Now it is a reusable template, not a fixed list. This is the single change that makes a tier list worth sharing.
• Image cards. “Let each card show a small image above its label, with an input to paste an image URL per item.” Visual tier lists (movies, logos, products) hit harder than text.
• Rename and recolor tiers. “Let me click a tier label to rename it, and pick its color.” Turns S/A/B/C/D into Loved / Liked / Fine / Skip for whatever you are ranking.
• Export the result. “Add a button that downloads the finished tier list as a PNG image.” Good for posting the ranking somewhere that is not interactive.

If a follow-up breaks the dragging, the fix is usually a precise note like the ones in polishing an AI page with follow-up prompts. The same build pattern, list the content, describe the behavior, ask for one clean file, is exactly how you would make a quiz or a spin-the-wheel picker.

Test it before you share

A tier list that works for six pizzas can fall apart on real use. Try the awkward cases deliberately:

• On an actual phone. This is the non-negotiable one. Open the live page on your own phone and drag a card between rows. If nothing moves, you got the HTML5 drag version, send it back with the Pointer Events instruction.
• A row that fills up. Pile a dozen cards into one tier. Do they wrap neatly, or spill off the edge? You may want the row to wrap cards onto multiple lines.
• Long item names. “The one with the extra garlic” should not break the card layout. Ask for wrapping or a sensible max width.
• A reload mid-ranking. Place a few cards, refresh the page. Does the arrangement come back? If not, the localStorage save is missing or broken.
• Dragging back to the pool. Make sure a card can leave a tier and return to the pool, not get stuck once placed.

Build your own vs a tier list website

Here is an honest comparison of the ways to get a tier list in front of a group.

The first three each have a catch. The free sites box you into their look and sprinkle ads over your ranking. A screenshot is frozen, nobody can move a card. Keeping the file solves the customization, but it still sits on your laptop where no one else can touch it. The last row is where it becomes a tool other people actually use.

Get it in front of people

A tier list is only fun when more than one person can argue over it. That is the last step, and it is where most AI projects stall, because the working file is stuck in a chat window or a folder on your machine.

This is where VisiblePage fits. Paste your tier list maker’s HTML, or drop a ZIP if the AI split it into files and images, and you get a live URL in seconds. Every part keeps working on the real page: the drag-and-drop, the pool, the saved arrangement, the add-your-own-items box. Because you are sharing the actual page and not a screenshot, someone can open the link on their phone and drag cards around live. It serves fast from the edge, so the page is responsive the moment it loads. Set it public for a community vote, or password-protect it for an internal team ranking. And because it is one canonical link, when you add items and republish, everyone’s link shows the updated list. No “tierlist_final_v2.html” making the rounds.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

Can AI really build a working tier list maker?

Yes. A tier list maker is a small, self-contained web app: labeled rows, a set of draggable item cards, and a pool to hold the ones you have not placed yet. A capable model builds the whole thing in one conversation. If you can list the items and name the tiers, the AI writes the layout, the styling, and the drag-and-drop for you.

Why does my AI tier list not work on my phone?

Almost always because the AI used the browser’s HTML5 drag-and-drop events (dragstart, dragover, drop), which do not fire on touchscreens. The fix is to ask for dragging built on Pointer Events (pointerdown, pointermove, pointerup) instead, because those fire for both a mouse and a finger. State that requirement in your prompt and test on an actual phone.

Can people add their own items to the tier list?

Yes, if you ask for it. Request a text box where someone can type a new item, or paste a list one per line, and a button that adds those as cards to the pool. That turns a fixed ranking into a reusable template other people can fill in with their own picks.

How do I share a tier list so the arrangement comes with it?

Ask the AI to save the current arrangement so it survives a reload, either in the page’s local storage or encoded in the URL. Then publish the page as a live link. With VisiblePage you paste the HTML or drop a ZIP and get a shareable URL right away, with the drag-and-drop still working for anyone who opens it.

Will the tier list still be draggable when I share it?

Only if you share the real page instead of a screenshot. A picture of a tier list cannot be rearranged. Publish the HTML as a live page and the dragging, the editing, and the saved arrangement keep working for whoever opens the link, on any device.