What You'll Build
You're going to build a Prompt Archaeology Lab — a single-page browser tool that brings together three skills you learned this week. You'll paste in an AI output you love, and the tool will help you reverse-engineer the prompt behind it, talk through your confusion using a rubber duck debugger panel, and checkpoint your best discoveries before you experiment further. Think of it as a personal research station for getting better at prompting.
- An Output Analysis panel where you paste an AI-generated result you want to reverse-engineer
- A Reconstructed Prompt card that displays the reverse-engineered prompt with a one-click copy button
- A Rubber Duck Debugger panel — a conversational area where you talk through confusion and the duck talks back
- A Checkpoint system that saves named snapshots of your prompt discoveries to localStorage so you can experiment freely
- A Dig History sidebar that lists all saved checkpoints and lets you restore any past session instantly
What You'll Need
ChatGPT (GPT-4o)
You'll use ChatGPT to generate all the HTML, CSS, and JavaScript for this project. A free account works for most steps, but GPT-4o gives better code quality.
A Text Editor
VS Code is ideal, but Notepad or any editor works fine. You'll save a single index.html file and open it directly in your browser — no server needed.
Let's Build It
Step 1: Build the Shell and Output Analysis Panel
Every archaeology lab needs a workbench. In this step you're asking ChatGPT to generate the full HTML skeleton for your tool — the dark-themed layout, the header, and the first major panel where you'll paste AI outputs you want to reverse-engineer. Getting the structure right now means every future step slots in cleanly without fighting the layout.
Build me a single-file HTML tool called "Prompt Archaeology Lab". It should be a dark-themed, single-page app (background #0a0f1a, surfaces #111827 and #1a2332, accent green #22c55e, accent violet #a78bfa). Use Google Fonts: DM Sans for body text and JetBrains Mono for any code or monospace text.
For now, just build the shell and the first panel. Include:
- A header with the title "Prompt Archaeology Lab" and a small subtitle: "Dig up the prompts behind great AI outputs"
- A two-column layout (main content left, sidebar right)
- In the main content column, a section titled "🔍 Output Analysis" with:
- A textarea (placeholder: "Paste an AI output you love here — something you wish you could recreate...") styled with a dark background, violet border, and green focus ring
- A "Reverse-Engineer This Output" button styled with a green background
- An empty results card below the button (placeholder text: "Your reconstructed prompt will appear here") with a dashed violet border and a disabled copy button
- The sidebar should just show a heading "📦 Checkpoint History" with a placeholder message "No checkpoints saved yet."
- Make everything responsive. No JavaScript yet — just the HTML and CSS structure.
- Output the full HTML file, nothing else.
What to look for: ChatGPT should return a complete, self-contained HTML file you can save and open in a browser immediately. Check that the two-column layout renders correctly, the textarea is prominent and easy to find, and the results card with the dashed border is visible below the button. The sidebar should be present but empty — that's intentional.
Step 2: Wire Up the Reverse-Engineering Logic
Now we bring the main feature to life. This step adds the JavaScript that takes whatever you paste into the textarea, sends it to a simulated analysis function, and displays a reverse-engineered prompt in the results card. Since this runs in a plain HTML file without an API key, ChatGPT will build a smart local heuristic engine that analyzes tone, structure, length, and style to reconstruct the likely prompt — good enough to learn from and experiment with.
Now add the reverse-engineering JavaScript to the existing file. When the user clicks "Reverse-Engineer This Output", run a local analysis function on the pasted text that detects these signals and builds a reconstructed prompt:
1. Tone detection — scan for formal/casual language markers and label it (e.g., "professional", "conversational", "technical")
2. Format detection — detect if the output uses bullet points, numbered lists, headers, paragraphs, or code blocks
3. Length instruction — categorize the output as short (<100 words), medium (100-300 words), or long (300+ words) and translate that to a prompt instruction like "Keep the response under 100 words"
4. Role/persona detection — if the text mentions expertise, a field, or gives advice, suggest a role like "Act as a [field] expert"
5. Specificity score — count concrete nouns and numbers; if high, add "Be specific and include real examples" to the reconstructed prompt
Combine all detected signals into a single reconstructed prompt string displayed in the results card. Enable the copy button once a result is generated. Show a small "Detected signals" section below the reconstructed prompt listing each signal found as a badge (colored chips: green for tone, violet for format, amber for length, cyan for role).
Add this JavaScript to the existing HTML file and return the complete updated file.
What to look for: Paste a paragraph of any AI-generated text into the textarea and click the button — you should see a reconstructed prompt appear in the results card along with colored signal badges underneath. The copy button should activate and actually copy the reconstructed prompt to your clipboard. If the badges don't show up, ask ChatGPT: "The signal badges aren't rendering — show me what the DOM looks like after the function runs and fix it."
Step 3: Add the Rubber Duck Debugger Panel
Here's where the rubber duck tutorial kicks in. You're adding a second panel to the main column — a conversational debugger you can type into whenever you're confused about why a reverse-engineered prompt doesn't feel right. The duck responds with structured Socratic questions that push you to think through your own confusion rather than just giving you answers. It's a thinking tool, not a chatbot.
Add a "🦆 Rubber Duck Debugger" panel below the Output Analysis section in the main column. This is a local, JavaScript-only tool (no API calls) that simulates a rubber duck debugging session.
Here's how it should work:
- A small duck emoji avatar (🦆) appears on the left of a chat-bubble-style UI
- The duck opens with a greeting message: "Quack! Tell me what's confusing you about this output or the reconstructed prompt. I'll ask you questions to help you figure it out yourself."
- Below the duck chat area, add an input field and a "Talk to the Duck" button
- When the user submits a message, the duck responds with one of a rotating set of Socratic debugging questions based on keywords in the user's input:
- If the user mentions "tone" → duck asks: "What tone were you actually aiming for? Describe it in three adjectives."
- If they mention "too long" or "too short" → duck asks: "What's the ideal length for your use case? What would a perfect response look like?"
- If they mention "format" or "structure" → duck asks: "Can you name one real example of the format you wanted? What's different about it?"
- If they mention "wrong" or "doesn't work" → duck asks: "What specifically is wrong? Try to describe it in one sentence."
- Default (no keywords matched) → duck asks: "Interesting. Can you walk me through what you expected to happen vs. what actually happened?"
- Style the duck messages with an amber left border and the user messages with a green left border
- The chat area should scroll if messages overflow
- Add this panel to the existing file and return the complete updated file.
What to look for: The duck panel should appear below the output analysis section and show the greeting message immediately on load. Type something like "the tone feels wrong" and hit the button — the duck should respond with the tone-specific question, and both messages should appear as styled chat bubbles. Try a few different inputs to make sure the keyword routing works. The chat area should scroll if you have a long conversation.
Step 4: Build the Checkpoint System
This is the checkpoint tutorial coming to life. You're adding the ability to save any reconstructed prompt as a named checkpoint — a snapshot you can restore later. Everything saves to localStorage so it persists between sessions. The key idea here (just like in the Claude Code checkpoint tutorial) is that you should be able to experiment freely because you can always roll back to a saved state.
Add a full checkpoint system to the existing file. Here's exactly what I need:
1. Below the reconstructed prompt results card, add a "Save as Checkpoint" section with:
- A text input for the checkpoint name (placeholder: "Name this discovery, e.g. 'Formal report tone'")
- A "💾 Save Checkpoint" button (green, disabled until a prompt has been generated)
2. When saved, store the checkpoint in localStorage as a JSON object containing:
- id: timestamp
- name: the user's chosen label
- originalOutput: the text they pasted
- reconstructedPrompt: the generated prompt
- signals: the detected signal badges array
- savedAt: human-readable date/time string
3. In the sidebar ("📦 Checkpoint History"), render all saved checkpoints as cards showing:
- The checkpoint name in bold
- The savedAt date
- A short preview (first 80 chars) of the reconstructed prompt
- A "Restore" button (violet) and a "Delete" button (rose/red, small)
4. Clicking "Restore" should populate the textarea with the originalOutput and re-display the reconstructedPrompt and signal badges in the results card, as if you just clicked the analyze button
5. Clicking "Delete" removes that checkpoint from localStorage and re-renders the sidebar
6. On page load, always read from localStorage and render any existing checkpoints
7. If there are more than 0 checkpoints, show a small count badge on the "📦 Checkpoint History" heading
Return the complete updated HTML file.
What to look for: After analyzing an output, type a name in the checkpoint field and click Save. The sidebar should immediately show a new card with the name, date, and prompt preview. Refresh the page — the checkpoint should still be there (localStorage persistence). Click Restore on a checkpoint and confirm the textarea and results card both populate correctly. The Delete button should remove the card from the sidebar without a page reload.
Step 5: Add the "Dig Session" Notes and Final Polish
Every archaeologist takes field notes. In this final step you're adding a session notes area at the bottom of the tool — a place to jot what you're learning as you dig through outputs. You'll also ask ChatGPT to polish the whole tool: smooth out any layout issues, add empty-state messages, and make sure the tool feels cohesive. This step is also a great chance to practice rubber duck debugging — if anything feels off after you see the final result, use the duck panel to talk yourself through what to fix.
Do a final polish pass on the complete file and add one more feature:
1. Add a "📓 Dig Session Notes" section at the bottom of the main column. It should include:
- A textarea (placeholder: "What are you noticing? What patterns are you finding in the prompts you reverse-engineer?")
- A "Save Notes" button that saves the textarea content to localStorage under the key 'digSessionNotes'
- On page load, restore any saved notes into the textarea automatically
- A small "Last saved: [time]" indicator that updates when notes are saved
2. Polish pass — fix these things across the whole file:
- Make sure all three main sections (Output Analysis, Rubber Duck Debugger, Dig Session Notes) have consistent card styling: dark surface background, rounded-xl corners, subtle border
- Add a smooth fade-in animation (CSS only, no JS) to the reconstructed prompt results card when content is added
- If the checkpoint sidebar has no checkpoints, show an illustrated empty state: the duck emoji 🦆 with text "No checkpoints yet. Analyze an output and save your first discovery!"
- Add a thin green top border accent to the page header
- Make the tool title in the header use a serif font if possible
- Ensure the whole layout works on mobile (stack columns vertically on small screens)
3. Return the complete, final, polished HTML file ready to use.
What to look for: The notes area should appear at the bottom of the main column, and saving then refreshing should restore your notes automatically. The empty-state message in the sidebar with the duck emoji should show up when there are no checkpoints. All three main panels should look visually consistent — same card style, same border treatment. On a narrow browser window, the sidebar should stack below the main content instead of sitting side-by-side.
Common Issues
🔴 The reconstructed prompt looks generic no matter what I paste
This usually means the signal detection keywords are too narrow. Ask ChatGPT: "The tone detector only catches formal/casual — expand it to detect 10 different tones including persuasive, empathetic, instructional, and humorous, with example trigger words for each." Adding more signal vocabulary makes the heuristic engine much smarter.
🔴 Checkpoints aren't saving or disappear on refresh
Open your browser's DevTools (F12), go to Application → Local Storage, and check whether the checkpoint data is being written. If it's empty, the save function has a bug. Paste your current JavaScript save function into ChatGPT and say: "This isn't persisting to localStorage — walk me through why and fix it." Nine times out of ten it's a JSON.stringify/parse issue.
🔴 The rubber duck panel doesn't respond to my messages
Check whether the button click handler is wired up correctly. Open DevTools → Console and look for JavaScript errors when you click "Talk to the Duck". If you see "Cannot read properties of null" on an element ID, the HTML IDs in the JavaScript don't match the IDs in the HTML structure — ask ChatGPT to audit all element IDs and fix any mismatches.
🔴 The layout breaks on mobile — both columns are too wide
This is almost always a missing CSS breakpoint. Paste your layout CSS into ChatGPT and say: "This two-column grid doesn't stack on mobile — rewrite the grid CSS so it's a single column below 768px using a media query." If it's using CSS Grid, a single line — grid-template-columns: 1fr inside a max-width media query — usually fixes it.
🔴 The copy button copies the wrong text
The copy button might be targeting a DOM element by ID before the results have been rendered into it. Try adding a console.log inside the copy function to see what text it's reading. Ask ChatGPT: "Make the copy button read the current innerText of the results card at the moment it's clicked, not at page load."
What You Learned
Reverse-Engineering Prompts
You turned the abstract skill of reverse-engineering AI outputs into a concrete, runnable tool. Every time you use the Output Analysis panel, you're reinforcing the habit of reading outputs analytically — looking for tone, structure, and specificity signals instead of just reading the words.
Rubber Duck Debugging
You built a tool that literally implements the rubber duck technique as a UI feature — which means you had to deeply understand how it works in order to code it. The Socratic question routing teaches you that productive debugging is about asking better questions, not getting faster answers.
Checkpointing Your Work
You implemented a real localStorage checkpoint system that mirrors how Claude Code's checkpoint feature works conceptually — save a known-good state, experiment freely, restore if needed. That mental model of "safe to try anything" is one of the most valuable habits you can build as an AI-assisted developer.
Iterative Prompting in Practice
You built this entire tool across five focused prompts — each one adding a layer without breaking the previous one. That's iterative prompting in practice: describe the structure first, add logic next, layer on features one at a time, then polish at the end. It's a workflow you can apply to any project from here on.
Tips for Going Further
Connect to a real AI API
The signal detection heuristic is smart but limited. Replace it with a real call to the OpenAI API — pass the pasted output and ask GPT-4o to return a JSON object with detected tone, format, length instruction, and reconstructed prompt. You'll get dramatically more accurate reverse-engineering.
Add a signal frequency chart
Track which signals appear most often across all your saved checkpoints and render a simple bar chart in the sidebar. After 20 or 30 digs, you'll start to see patterns in the kinds of outputs you're drawn to — that's genuinely useful self-knowledge about your prompting style.
Upgrade the duck with real AI responses
The keyword-routing duck is a great start, but you could wire it to an API so it gives genuinely Socratic responses tailored to what you type. Give it a system prompt like: "You are a rubber duck debugging assistant. Never answer directly. Always respond with one clarifying question that helps the user figure out the answer themselves."
Export your checkpoint library
Ask ChatGPT to add an "Export All" button that downloads your entire checkpoint history as a formatted JSON or Markdown file. That way your prompt archaeology discoveries are backed up outside the browser and you can share your best finds with other people learning to prompt.
Add tags and search to checkpoints
Once you have 30+ checkpoints the sidebar gets unwieldy. Ask ChatGPT to add a tag system (like "code", "writing", "analysis") and a search bar that filters checkpoints in real time. This turns your lab from a scratchpad into a genuine personal prompt library.