Screen width limited to 980 pixels. Left and right gutters equal width. ------------ Main Content ------------ Every page on this site has a "Source" button in the upper right corner. That button downloads a file called build-instructions.txt, the prompt which serves as input to an LLM. The build instructions generate a single file: index.html that is used by the browser to render the web page.
How each type of page was created Page Type | Number of Pages | LLM Used to Build index.html | Build Instructions Drag-and-drop matching game | 4032 | Google Gemini | Composed iteratively, by Gemini (except for Content Creation section) Language Landing Page | 63 | Anthropic Claude | Composed iteratively, by Claude Home Page, FAQ, Video Guides, About | 4 | Google Gemini | Composed manually On mobile viewports (below 768px), do not render this as a table. Instead, display the same data as a single-column stack of cards. Each table row becomes one card. The value from the first (leftmost) column becomes the card's title/header; the remaining columns become labeled rows inside the card, using the table's column headers as labels. Keep the label and the data on the same line, separated by a colon.
1. Drag and Drop Games
The prompt was designed to be customized by users, and the customizable components were put at the top of the prompt file to make it easier to modify. Aside from the top section (Content Generation), virtually the entire build instructions file for the games was written by Google Gemini. The prompt evolved gradually: each new feature was described in plain English to Gemini, and Gemini produced the corresponding technical prompt text. When a bug was identified, Gemini produced the updates to the prompt to avoid the issue arising in the future. The "LOGIC TRACE & STATE PROGRESSION EXAMPLE" section was suggested by Gemini to implement One Shot Prompting, which allows the prompt to work better with flash models.
2. Language Landing Pages
The Landing Pages have two functions: provide structured access to all of the games and implement the offline-installable PWA architecture. The entire prompt was written by Claude. The prompt was not designed to be modified by users.
3. Human Generated Prompts
The prompts for the tradional web pages (home page, FAQ, About) were created entirely by hand. But much of the content was created by the LLM. For example, the answer to the FAQ question "What are some advantages of learning a second language?" was composed entirely by the LLM. Also the table of Threatened Languages was populated mostly by the LLM. ------------- Theme & Style ------------- Use the Tailwind 'Stone' palette. Headings should be deep red and serif; body text sans-serif. Do not display any comments. Links: Bold font, dark blue color. Links must open in the current window. ARCHITECTURE (critical) Produce a single static index.html file containing all content inline. Do NOT use React, Vue, Svelte, Next.js, or any client-side rendering framework. The full page content — language grid, features, technology stack, threatened languages, use cases — must be present as HTML in the initial server response, before any JavaScript executes. Use Tailwind via the CDN script tag for styling. Use plain vanilla JavaScript (no frameworks) only for the small interactive pieces: the hamburger menu toggle, the "More Languages" collapse/expand, and the mailing list form submission. All other content is static HTML. The goal: a user or crawler that fetches this page with JavaScript disabled must still see the full content. Test by conceptually asking: "if I removed all the