Build one of these

The Persistent Gap was made with AI, from publicly available research. Here is how — and an argument for why you should make one of your own.

This site was made with Claude — Anthropic's Fable 5 model — by John Erik Metcalf. The research gathering, the essay, the hand-drawn SVG charts, and every line of code came out of a conversation with the model: describe what you want, look at what comes back, and push on it until it's right. No frameworks, no site builder, no design team. What used to take a studio now takes a clear idea of what you're after, a source of good material, and patience for iteration.

The good material is the point. Some of the most useful thinking in the world is hiding in plain sight — in journal archives, conference proceedings, government data series, and textbooks that only students under deadline ever open. Jorge Reina Schement spent five decades working out why some technologies reach everyone and others leave the same families behind, and until this site existed, the fastest way to encounter that framework was a paywalled 1996 journal article. That is the situation for thousands of researchers and their life's work. What's genuinely new is that AI can now help uncover that research, give it shape and beauty, and put it in front of people who would never have found it — our hope is that pages like this become a normal way for ideas to leave the library.

Before you prompt, think about

• Pick a topic with a hidden story. The best candidates are a researcher, framework, or finding that changed how a field thinks but never got a popular treatment. You're not summarizing a CV — you're looking for the puzzle, the moment the standard explanation broke, the idea a reader can walk away with and use.
• Gather what's public. Papers, archived essays, interviews, talks, government datasets, old reports. Ask the AI to catalog it all first, with a citation for every number, before any design work starts. The catalog becomes the spine of the site.
• Insist on sourced numbers. Every figure on a page like this should trace to a named source a reader can click. Verify the numbers against the sources before you ship — models are good researchers and imperfect stenographers.
• Use the public domain for imagery. The Library of Congress Prints & Photographs collection is a gold mine of archival photographs with no known restrictions.
• Test it like a reader. On a real phone, in a real browser, more than once. The last ten percent of quality lives there.
• Hosting is the easy part. One HTML file deploys free in minutes on Vercel or GitHub Pages.

If the research is yours

An honest note about how this site was made: we could only use what was publicly available. Schement's paywalled journal articles and the full text of his books were off limits — to us, and to the models themselves, which can't read what was never openly published. Which means the people who own that copyright are sitting on something valuable: data no one else has, not even the AI.

If you're a researcher or an author in that position, you are the one person who can make the definitive version of a page like this. You can hand the model the full texts you own, correct it where it's wrong, and shape the story the way only the person who lived the research can. If any of your work has ever been called "important, but hard to get into" — that's the signal. A beautiful, rigorous, readable explainer is now a weekend's work, and it will introduce your thinking to more people than the citation index ever will.

A prompt to start from

Copy this into Claude (claude.ai or Claude Code), fill in the brackets, and iterate from there. It compresses what worked for this site:

I want to build a beautiful single-page explainer website about the research of [RESEARCHER or TOPIC].

Step 1 — Research. Search for everything publicly available: papers, articles, interviews, talks, archived essays, and government datasets. Build a catalog of the key findings with a citation for every number. Only use sources we can legally read and cite; if something is paywalled, note it and move on. [If you own the rights to the research, say so here and provide the full texts — they will make the site far better.]

Step 2 — Find the story. Don't summarize a career; find the through-line. What was the puzzle? What finding broke the standard explanation? What framework can a reader take away and apply themselves? Structure the site as an essay in numbered parts, each carrying one idea, ending with a section where the reader uses the framework on their own.

Step 3 — Build it. One self-contained HTML file, no frameworks. Long-form essay typography: a serif face, generous line-height, margin sidenotes for citations. Hand-rolled SVG charts in the style of Edward Tufte — direct labels, minimal ink, range-frame axes, and a "view the data" table under every figure. A restrained historical palette (Sanzo Wada's A Dictionary of Color Combinations is a good source), checked for color-blind legibility. Archival public-domain photographs from the Library of Congress. Make the page fully responsive and test the charts at phone width.

Step 4 — Verify. Re-check every number on the page against its cited source, and clearly label anything that is your own analysis rather than the researcher's published work. Then help me deploy it (Vercel or GitHub Pages).

The bracketed lines matter more than the rest. The clearest thing you bring to this collaboration isn't technical — it's taste, and the judgment about which story is worth telling.

Made with Fable 5 by John Erik Metcalf. The site this page describes: The Persistent Gap.