001timetable0
Carris Tram 28 timetable, Martim Moniz to Campo de Ourique, Lisbon
Carris enamel-yellow tram signage crossed with azulejo tile geometry; solid saturated yellow with a tile-pattern band
DataLight
A machine-built directory — one language model, one brief per page
I asked a language model to build 100 standalone web pages, one short brief each — a subject, an aesthetic, a typeface pairing, one memorable idea — every page written as a single HTML file with its CSS and JavaScript inline, no frameworks, no build step. 72 of them finished before the run hit its usage limit, and they are all here. Open any card to read the exact prompt that produced it; like, dislike or bookmark them and the board reorders by what people vote up.
The full prompt I gave, word for word — the single brief that produced all of this. (It asked for 100; 72 finished before the run hit its limit.)
Create 100 standalone HTML files in a folder named ./hundred/. Each file is one complete page: HTML, CSS, and any JS inline in the same file. No frameworks, no build step, no external assets except Google Fonts links. Every file must open in a browser and look finished. Three rules: 1. Every page must look stunning. Ship-to-a-client quality. 2. Zero repetitive designs. No two pages may share a visual identity. 3. Full creative mode. Take aesthetic risks. Boring is the only failure. STEP 1 — WRITE THE MANIFEST FIRST (before any HTML) Write ./hundred/MANIFEST.md: a table with 100 rows. Columns: number, filename, subject, page type, aesthetic direction, hero device, display typeface, body typeface, base palette (4-6 hex values), layout archetype, the one motion moment, the one memorable element. Hard quotas for the manifest (check them before moving on): - 100 different subjects. Real, specific things: a Lisbon tram timetable, a mycology field guide, a jazz club's 1958 season, a deep-sea cable status board, a kid's dinosaur quiz, a wine cooperative, a satellite launch countdown, a haiku archive, a bike repair co-op. Spread across industries, eras, moods, and audiences. - At least 25 different page types: landing page, poster, portfolio, dashboard, recipe, museum placard, poem, timetable, product page, playable mini-game, generative art piece, interactive toy, typographic experiment, data story, quiz, countdown, zine, menu, ticket, manifesto, map, ledger, lookbook, weather panel, album page, and more. - No display typeface used more than 3 times. No body typeface more than 5 times. - No background hue family used more than 8 times. Include pages built on saturated color, pure white, deep black, mid-tones, photographic-feeling gradients, textures, and patterns. - No hero device repeated more than 4 times. Options include: giant type, live canvas animation, interactive demo, SVG illustration, a single sentence, a table, a diagram, an image grid, a clock, a form, a game board, empty space with one object. - No layout archetype more than 6 times: asymmetric split, full-bleed single column, magazine grid, sidebar dominant, radial, diagonal, stacked panels, horizontal scroll, masonry, centered stage, marginalia, poster-scale single screen. - Aesthetic directions are derived from the subject, not picked from a list. Seeds if stuck: Swiss grid, Bauhaus, Art Deco, risograph print, blueprint, medieval manuscript, terminal, paper cutout, claymorphism, isometric, ASCII, retro-futurist, botanical plate, cartographic, museum wall text, Memphis, Y2K, brutalist concrete, Japanese ma, Victorian handbill, punk flyer, lab notebook, airline cockpit. BANNED because they are AI-design defaults, not choices: - Cream #F4F1EA background with serif display and terracotta accent. - Near-black background with one acid green or vermilion accent. - Hairline-rule broadsheet layout with zero border radius as the go-to "editorial" look. - The SaaS card kit: identical rounded cards, one radius everywhere, the same soft grey shadow, gradient blobs as decoration. - ALL-CAPS tracked eyebrow labels above headings. Middle-dot meta strings (A · B · C). Arrows appended to link text. Monospace for every small label. #0B0B0B or #111 pretending to be black. - Accenting one word in a headline in italic or a different color. - Fade-and-slide-up on every section. Hover lift on every card. - Numbered markers 01 / 02 / 03 unless the content is actually a sequence. - Lorem ipsum, "Lorem Corp", "Acme", or generic marketing copy. Write real, specific copy for each subject. STEP 2 — REVIEW THE MANIFEST Re-read all 100 rows. If any two rows would be confused for each other at a glance, or any row reads like a default you would produce for any brief, rewrite it. State what you changed. STEP 3 — BUILD ALL 100 Filenames: 001-slug.html through 100-slug.html. Build each page fully according to its manifest row: - One memorable element per page. Everything around it stays disciplined. - Typography is the personality: deliberate scale, weights, line length under 80 characters, generous line height. - Structure encodes information. Borders, numbers, and dividers only where they mean something. - One orchestrated motion moment per page, not scattered effects. Respect prefers-reduced-motion. - Quality floor without announcing it: responsive to 360px, visible keyboard focus, readable contrast. - Real content throughout. Every page tells you what it is within two seconds. Write every file completely. No placeholders, no "similar to above", no "remaining files follow the same pattern", no skeletons. Do not stop at 10, 25, or 50 to summarize or ask if you should continue. Do not ask me anything. Keep writing files until all 100 exist. You may parallelize with subagents, each assigned specific manifest rows, but you own the final duplicate check. STEP 4 — VERIFY Run ls ./hundred/*.html | wc -l and confirm 100. Open the manifest one last time and confirm every row has a matching file. Then write ./hundred/index.html (not one of the 100): a gallery linking all pages with their number, subject, and direction, designed as its own 101st distinct piece. Report only when all 100 files plus the index are on disk. In the final message, list any manifest rows you changed during the build and why.
| Where the tokens went | Tokens | Rate /M | Cost |
|---|---|---|---|
| Output (the code) | 2,875,571 | $50.00 | $143.78 |
| Cache writes | 11,691,790 | $12.50 | $146.15 |
| Cache reads | 42,945,619 | $0.25 | $10.74 |
| Fresh input | 611,227 | $10.00 | $6.11 |
| Whole run | 58,124,207 | $306.77 |
Every builder ran on claude-fable-5-1. Token counts are summed from the run's own request logs across all 72 pages (plus the retries the rate limit forced), then priced at Fable 5.1's published rates: $10/M input, $50/M output, $12.50/M cache writes, $0.25/M cache reads. The real spend is the 2.9M tokens of code the model actually wrote.
Nothing matches those filters. Clear the search or reset the tags.