What You'll Build
You're going to build a Codebase Onboarding Kit Generator — a simple HTML tool that takes a codebase summary (from Claude Code's /init command), a list of brainstormed onboarding questions (from a ChatGPT voice session), and produces a complete onboarding kit with a README, a "How This Project Works" explainer, and a new-developer checklist. This project ties together three real skills: automated code understanding, voice-first brainstorming, and AI-assisted documentation writing.
What You'll Need
Claude (claude.ai or Claude Code in your terminal) for the /init analysis and building the tool. ChatGPT with Voice Mode enabled for the brainstorming session. Both free tiers work fine here.
Any text editor to save your HTML file — VS Code, Notepad, TextEdit on Mac. You'll also want a notes app (Apple Notes, Notion, or a plain .txt file) to capture your voice brainstorm output before pasting it in.
Build It Step by Step
Run /init and Capture Your Codebase Summary
Before you build anything, you need real input data to feed your generator. Open Claude Code in any project you have on your machine — it can be a personal project, a tutorial repo, or even a cloned open-source project. Run the /init command so Claude Code analyzes the codebase and produces a structured summary. Copy that entire summary output and paste it into a plain text file — you'll use it as sample input when testing your tool.
/init
What to look for
Claude Code should produce a structured breakdown of your project — the main files and folders, what each key file does, the tech stack, and how the pieces connect. If it's a small project, the summary might be a few paragraphs. Bigger repos get a longer breakdown. Save this entire output — it's your "codebase fingerprint" and the raw material for your onboarding kit generator.
Voice-Brainstorm Your Onboarding Questions with ChatGPT
Now switch to ChatGPT and turn on Voice Mode — this is where the hands-free brainstorming tutorial pays off. Instead of typing, you're going to talk through what a brand-new developer would need to know when joining a project. Speak naturally, ramble a bit, think out loud. ChatGPT will help you shape rough thoughts into a clean list of onboarding questions and tasks. When the conversation feels complete, ask ChatGPT to summarize everything as a numbered list, then copy and paste that list into your notes file alongside your /init summary.
I want to brainstorm the things a brand-new developer would need to understand on their first day joining a software project. Help me think through it by asking me questions one at a time — things like what the project does, what the tech stack is, what files they should look at first, what the gotchas are, and what tasks they should complete on day one. After we brainstorm together, I want you to give me a final numbered list of onboarding questions and first-day tasks I can reuse for any project.
What to look for
ChatGPT should guide you through a conversational brainstorm, prompting you with follow-up questions rather than dumping everything at once. At the end, you want a clean numbered list — something like "1. What does this project do in one sentence? 2. What command do you run to start it? 3. What file should a new dev read first?" and so on. Aim for 8–12 items. That list becomes the second input field in your tool.
Build the HTML Layout and Input Form
Now let's actually build the tool. You'll prompt Claude to generate the full HTML page with two input areas — one for the /init summary, one for the brainstormed questions — plus a "Generate Kit" button and an output section. Keep everything in a single HTML file with embedded CSS and JavaScript so there's nothing to install or configure. Paste the prompt below into Claude (claude.ai works great here) and save the result as onboarding-kit.html.
Build me a single-file HTML tool called "Codebase Onboarding Kit Generator". It should have a dark theme (background #0a0f1a, surface cards #111827, green accent #22c55e). Include these elements:
1. A page title and a short description explaining what the tool does
2. A labeled textarea called "Claude Code /init Summary" — large, for pasting a codebase analysis
3. A labeled textarea called "Onboarding Questions (from brainstorm)" — for pasting a numbered list of questions/tasks
4. A green "Generate Onboarding Kit" button
5. An output section (hidden until the button is clicked) with three panels:
- "README Overview" — project name, one-line description, tech stack, folder structure, setup steps
- "How This Project Works" — a plain-English explainer written for someone who has never seen the codebase
- "Day 1 Checklist" — a checkbox list of tasks pulled from the onboarding questions
6. A "Copy Full Kit" button that copies all three panels as formatted plain text to the clipboard
The Generate button should use JavaScript to read both textareas and populate the three output panels. For now, have it intelligently parse the input text to extract key info rather than calling any API — just smart string processing and template filling. Use embedded CSS and JS only. No frameworks.
What to look for
Claude should return a complete, self-contained HTML file — no imports, no dependencies, just one file you can open in a browser. You should see the dark themed layout with both input textareas, the generate button, and a hidden output section. Open the file in your browser and confirm the layout looks right before moving to the next step.
Feed It Real Data and Refine the Output
Now test your tool with the real data you collected in Steps 1 and 2. Paste your /init summary into the first textarea, paste your brainstormed questions list into the second, and click Generate. Look at what comes out. The output probably won't be perfect on the first try — the README section might be too sparse, or the checklist might miss some questions. Use this prompt to give Claude specific feedback and get an improved version of the JavaScript parsing logic.
I tested the tool with real input. Here's what I found:
[describe what's working and what isn't — for example: "The README section only shows the first two lines of the /init summary instead of extracting the tech stack and folder structure. The checklist is not converting my numbered list items into checkboxes properly."]
Here is the actual /init summary I pasted in:
[paste your /init output here]
And here are the brainstormed questions I used:
[paste your questions list here]
Please update the JavaScript so it:
1. Extracts the tech stack by looking for lines mentioning file extensions, frameworks, or "built with"
2. Extracts the folder structure from any lines that look like directory paths or indented file trees
3. Converts every numbered item from the questions input into a checkbox list item
4. Fills in the "How This Project Works" panel with a 3-5 sentence plain English summary based on the /init content
Return the full updated HTML file.
What to look for
After this refinement pass, your three output panels should feel genuinely useful — the README should show real project details extracted from your /init summary, the plain-English explainer should read like something you'd actually hand to a new teammate, and the checklist should have all your brainstormed tasks as interactive checkboxes. If any section still feels off, repeat this step with more specific feedback about exactly which part isn't right.
Write a README for the Tool Itself Using AI
Here's where the week comes full circle — your tool generates READMEs for other projects, so it deserves a great README of its own. This is exactly what the AI README writing tutorial covers. Prompt Claude to write a complete, polished README.md for your Onboarding Kit Generator. You'll end up with a real open-source-ready documentation file you could drop into a GitHub repo right now.
Write a complete README.md for a project called "Codebase Onboarding Kit Generator". Here's what the tool does:
- It's a single HTML file tool with no dependencies
- Users paste a Claude Code /init summary into the first textarea
- Users paste a list of onboarding questions (brainstormed with ChatGPT Voice Mode) into the second textarea
- Clicking "Generate" produces three output panels: a README overview, a plain-English explainer, and a first-day checklist
- There's a "Copy Full Kit" button to copy everything to the clipboard
The README should include:
1. A project title and one-sentence description
2. A "Why This Exists" section (2-3 sentences on the problem it solves)
3. A "How to Use It" section with numbered steps
4. A "How It Was Built" section mentioning Claude Code /init, ChatGPT Voice Mode brainstorming, and AI-assisted README generation
5. A "Customizing" section with 3 suggestions for how someone could extend or modify it
6. A license line (MIT)
Write it in a friendly, practical tone — not corporate. Use proper markdown formatting throughout.
What to look for
Claude should return a fully formatted markdown README with proper headers, numbered lists, and clean prose — something you could literally copy into a README.md file and push to GitHub today. Notice how the "How It Was Built" section tells the story of this exact project — that's intentional. Good READMEs explain not just what a tool does, but how it came to be. Save this as README.md in the same folder as your HTML file.
Common Issues
The /init command isn't giving me much output
This usually happens with very small projects (a single file) or projects Claude Code can't fully navigate. Try running /init in a project with at least 5–10 files and a folder structure. If you don't have one handy, clone any popular GitHub repo (even a tutorial one) and run /init inside it.
ChatGPT Voice Mode isn't available to me
Voice Mode requires the ChatGPT mobile app or a supported browser with a Plus/Pro account. If you don't have access, just type your brainstorm conversation in the normal chat window — use the same prompt from Step 2, just typed instead of spoken. The output will be identical; you just won't get the hands-free experience.
The Generate button doesn't do anything when I click it
Open your browser's developer console (F12 → Console tab) and look for any red error messages. Copy the error and send it to Claude with "I'm getting this JavaScript error when I click Generate — please fix it and return the full updated HTML." Console errors are almost always fixable in one Claude turn.
The output panels show up blank or with placeholder text
This means the JavaScript isn't extracting the right content from your input. The parsing logic Claude writes works best when the /init output has clear section headers and bullet points. If your /init output is one long paragraph, add a note to your Step 4 refinement prompt: "My /init summary is in paragraph form, not bullet points — update the parser to handle that format."
The Copy button doesn't work
Clipboard access in browsers requires the page to be served over HTTP or HTTPS — it won't work if you're just double-clicking the HTML file to open it directly (file:// protocol). Fix it by running a simple local server: if you have Python installed, open a terminal in your project folder and run python3 -m http.server 8080, then open localhost:8080 in your browser.
What You Learned
Rapid Codebase Comprehension
You used Claude Code's /init command to produce a structured map of a real codebase in seconds — the same technique you can use any time you join a new project or open an unfamiliar repo.
Voice-First Brainstorming
You discovered how talking through a problem with ChatGPT Voice Mode produces more natural, complete ideas than typing does — and how to close a voice session with a clean, reusable structured list.
AI-Assisted Documentation
You practiced the full README writing workflow — giving Claude enough context about a real project to produce documentation that's specific, useful, and ready to publish, not generic filler text.
Multi-Tool AI Workflow Design
You experienced firsthand what it feels like to chain AI tools together — using the output from one tool as the input to the next, with each tool playing to its strengths in a single coherent workflow.
Tips for Going Further
Add a project-type selector
Add a dropdown that lets users pick their project type ("Node.js API", "React App", "Python Script", "Mobile App") and have the generator tweak the README template and checklist tasks accordingly. Prompt Claude to add conditional logic based on the selected type.
Connect it to a real AI API
Right now the tool uses JavaScript string parsing. The next level is hooking it up to the Claude or OpenAI API so the generation is actually powered by AI inference — meaning it can handle messy, unformatted input and still produce great output. This is a natural next project once you've covered API basics.
Export to Markdown, Notion, or GitHub
Add export buttons that format the output specifically for different destinations — a .md file download for GitHub, a Notion-formatted version using their block structure, or even a direct GitHub API call that creates the README in a repo. Each one is a separate small prompt to Claude.
Turn your brainstorm questions into a saved template
Your ChatGPT voice brainstorm produced a great list of onboarding questions — but right now you'd have to re-do that session for every new project. Add a "Save as Default Template" button to your tool that stores the questions list in localStorage, so it auto-populates every time you open the tool.