What You'll Build
A two-stage AI pipeline that reads your project with Claude Code slash commands, structures the results with ChatGPT, and spits out a ready-to-use HTML dashboard. Here's what the finished tool does:
- Uses Claude Code slash commands (
/init,/explain,/summary) to rapidly extract project metadata without writing a single analysis prompt from scratch - Pipes Claude's raw output into ChatGPT's structured output mode to produce a clean, schema-validated JSON object describing your project
- Generates a self-contained HTML dashboard file with sections for project overview, file structure, key functions, dependencies, and open questions
- Includes a regeneration workflow so you can refresh the dashboard any time your project evolves, using the same slash command shortcuts
- Produces a reusable JSON schema you can drop into any future ChatGPT structured output call to document any project automatically
What You'll Need
Two tools, no installs beyond what you probably already have:
You'll use Claude Code (in your terminal) for fast slash command extraction, then switch to ChatGPT (in the browser or API) for structured JSON output. A Claude Pro or Max plan and a ChatGPT Plus account both work fine.
You need a local project folder to point Claude Code at — even a small one with a few files is perfect. VS Code is ideal for viewing the generated HTML dashboard, but any editor does the job.
Let's Build It
We're going to move through this in five clean steps — two with Claude Code, two with ChatGPT, and one final pass where we generate the actual dashboard file. Follow along in order and you'll have something working by the end.
Run Slash Commands to Extract Project Data
Open Claude Code in your terminal and navigate into your project folder. This step is all about using slash commands as speed shortcuts — instead of writing long analysis prompts, you'll run three built-in commands back to back and copy the combined output into your notes. Think of this as using Claude Code the way it's actually designed to be used: fast, keyboard-driven, and precise.
/init (Wait for Claude to finish reading the codebase, then run:) /summary (Wait again, then run:) /explain What are the most important files in this project, what does each one do, and what are the main dependencies? List any unclear areas or open questions you noticed.
What to look for
After all three commands, you should have three distinct blocks of text from Claude: an initialization confirmation with a file tree, a high-level project summary, and a detailed explanation of key files and dependencies. Copy all three outputs — including any uncertainty Claude flagged — into a scratch document. This raw text is your input for the next step. Don't worry if it's messy; that's exactly what ChatGPT's structured output mode is going to fix.
Design a JSON Schema in ChatGPT
Switch over to ChatGPT now. Before you paste Claude's output, you need to tell ChatGPT exactly what shape the data should come back in. Structured output mode means ChatGPT will follow a strict JSON schema — no narrative fluff, no missing fields. This prompt gets ChatGPT to design that schema with you, so it's tailored to your project rather than generic.
I'm building a project dashboard generator. I need you to design a JSON schema I'll use with your structured output mode. The schema should capture everything needed to render a developer-facing HTML dashboard for any software project. The schema must include these top-level fields: - projectName (string) - oneLinerDescription (string, max 20 words) - techStack (array of strings) - folderStructure (array of objects with: path, purpose) - keyFunctions (array of objects with: functionName, file, whatItDoes) - externalDependencies (array of objects with: name, purpose, critical boolean) - openQuestions (array of strings — things that are unclear or need investigation) - suggestedNextSteps (array of strings) Return ONLY the JSON schema itself, formatted as a valid JSON Schema draft-07 object with types, descriptions, and required fields marked. Do not include any explanation text — just the schema.
What to look for
ChatGPT should return a single, clean JSON Schema object starting with {"$schema": "http://json-schema.org/draft-07/schema#", "type": "object", ...}. Every field you listed should appear with a type and description. If ChatGPT adds prose before or after the schema, ask it to remove everything except the JSON — you want something you can paste directly into a structured output API call or save as a .json file.
Parse Claude's Raw Output into Structured JSON
Now you're going to paste everything Claude produced in Step 1 into ChatGPT and ask it to parse that messy text into your schema. This is the core of the whole workflow — Claude does the codebase reading fast using slash commands, and ChatGPT does the data shaping precisely using structured output. Neither tool is doing the other's job; they're each doing what they're genuinely best at.
Below is raw output from Claude Code after I ran /init, /summary, and /explain on my project. Your job is to parse this into the JSON schema we just defined. Use structured output mode — return ONLY a single valid JSON object that matches the schema exactly. Do not include any text outside the JSON object. If a field cannot be determined from the Claude output, use an empty array or a clearly labeled placeholder string like "[Not found in analysis]". Here is Claude's raw output: [PASTE YOUR STEP 1 OUTPUT HERE — all three blocks, in order] Now return the populated JSON object.
What to look for
You should get back a single JSON object with every field from your schema populated. The folderStructure and keyFunctions arrays will be the longest — scan those to make sure the file paths and function names match your actual project. The openQuestions field is often the most useful: Claude sometimes surfaces assumptions or gaps you hadn't noticed. Save this JSON to a file called project-data.json — you'll need it in the next step.
Generate the HTML Dashboard
With clean, validated JSON in hand, you're ready to generate the actual dashboard. This prompt goes back to Claude Code — you'll use the /edit slash command shortcut to hand it your JSON and ask it to produce a self-contained HTML file. Because the data is already structured, Claude doesn't have to guess at anything — it just templates it out.
/edit dashboard.html Using the JSON data below, generate a complete, self-contained HTML dashboard file. Requirements: - Dark background (#0a0f1a), white headings, slate-colored body text - Sections in this order: Project Header (name + one-liner), Tech Stack (pill badges), Folder Structure (two-column table with path and purpose), Key Functions (cards with function name, file, and description), External Dependencies (table with name, purpose, and a red "Critical" badge if critical: true), Open Questions (styled warning list), Suggested Next Steps (checklist) - Include a "Generated by Claude Code + ChatGPT Structured Output" footer with today's date - Use only inline CSS and vanilla HTML — no external libraries, no JavaScript required - The file must open correctly by just double-clicking it in a file browser Here is the project JSON: [PASTE YOUR project-data.json CONTENTS HERE] Create the complete dashboard.html file now.
What to look for
Claude Code should write a complete dashboard.html file directly to your project folder. Open it in your browser by double-clicking — every section should be populated with real data from your project, not placeholder text. If any section is empty or says "undefined," that usually means a JSON field name didn't match what the template expected — go back to your project-data.json and check that the field names are exactly what Claude Code is using in the template.
Build a One-Command Regeneration Workflow
The real power of this system kicks in when your project changes. Instead of starting from scratch, you'll set up a tiny slash command shortcut in Claude Code that re-runs the whole extraction phase in one move. This step also locks in a reusable ChatGPT structured output template so the JSON side is equally fast next time around.
--- PART A: Run in Claude Code --- /help Based on the slash commands available, write me a single compound command or shell alias I can save that will: (1) run /init, (2) run /summary, (3) run /explain asking about key files, dependencies, and open questions — and pipe all three outputs into a single text file called raw-analysis.txt in my project root. Format it as a bash alias I can add to my .zshrc or .bashrc. --- PART B: Run in ChatGPT --- I have a working structured output workflow. Now save me a reusable prompt template I can use any time I update my project and need to re-parse new Claude output into my project dashboard schema. The template should have a clearly marked [PASTE CLAUDE OUTPUT HERE] placeholder and remind me to use structured output mode. Format it as plain text I can save to a file called dashboard-prompt-template.txt.
What to look for
From Claude Code you should get a clean bash alias — something like alias refresh-dashboard='...' — that you can paste straight into your shell config. From ChatGPT you should get a fill-in-the-blank prompt template saved as plain text. Together these two artifacts mean the next time you update your project, regenerating the dashboard takes about two minutes instead of starting from scratch. Test the alias by sourcing your shell config (source ~/.zshrc) and running it once to make sure it outputs cleanly.
Common Issues
Here are the things that trip people up most often on this project:
ChatGPT ignores the schema and returns prose anyway
This usually means you're using ChatGPT in a regular conversation rather than with structured output mode explicitly enabled. In the API, set response_format to your schema. In the ChatGPT interface, add "Return ONLY a raw JSON object. No markdown, no code fences, no explanation." at the very top of your prompt — it makes a big difference.
Claude Code's /init says "no files found" or hangs
Make sure you're running Claude Code from inside your project directory, not from your home folder or desktop. Run cd /path/to/your/project first, then launch Claude Code. If it hangs on a very large codebase, try running it in a subdirectory with just the core source files.
The generated dashboard.html has empty sections
This almost always means a field name mismatch between your JSON and the template Claude generated. Open dashboard.html in a text editor and search for the section that's empty — look at the variable name being referenced. Then check your project-data.json to confirm the field is spelled identically. Fix one, fix all.
/explain returns very generic output that isn't specific to my project
The /explain command works best when it follows /init — the initialization is what gives Claude the context it needs to be specific. If your /explain output feels generic, try re-running /init first, then immediately follow it with your /explain call in the same session without doing anything else in between.
The JSON from ChatGPT has trailing commas or is invalid
Paste your JSON into jsonlint.com to validate it quickly. If there are errors, paste the broken JSON back into ChatGPT with: "This JSON is invalid. Fix only the syntax errors without changing any values and return the corrected JSON object." This is faster than hunting for the issue manually.
What You Learned
You built something real and picked up four concrete skills in the process:
Slash Commands as Speed Multipliers
You used /init, /summary, and /explain as a three-command analysis sequence — the same workflow that would take 15 minutes of custom prompting done in about 90 seconds. That's what slash commands are actually for: eliminating setup friction on tasks you do repeatedly.
Structured Output Schema Design
You designed a JSON Schema from scratch and used it to constrain ChatGPT's output format. This is a transferable skill — the same pattern works for any situation where you need AI-generated data you can actually pipe into another tool, a database, or a template without manual cleanup.
Two-Model Hand-Off Workflows
You practiced the most powerful pattern in applied AI tooling: using different models for different strengths in sequence. Claude Code read and analyzed code fast using its command interface; ChatGPT structured and formatted data precisely using its output mode. Neither duplicated the other's work.
Repeatable Regeneration Systems
You didn't just build a dashboard — you built a system for regenerating it. The shell alias and saved prompt template mean this workflow has a near-zero startup cost next time. That's the difference between a one-off AI experiment and an AI-powered tool you'll actually keep using.
Tips for Going Further
You've got a working pipeline — here's how to push it further:
Add a diff view between dashboard versions
Save your project-data.json with a timestamp each time you regenerate it, then use Claude Code's /compare command or a simple diff prompt to highlight what changed between versions. Suddenly you have a lightweight project changelog.
Expand the schema for team handoffs
Add fields like primaryContributor, testCoverage, deploymentTarget, and knownBugs to your ChatGPT schema. Ask Claude to extract those too during the /explain step. The dashboard becomes a living handoff document you can share with any new developer joining the project.
Wire it to the ChatGPT API for full automation
Instead of copy-pasting between tools, use the ChatGPT API with response_format: {type: "json_schema", json_schema: {...}} and pipe the output of your Claude analysis shell script directly into an API call. The whole workflow becomes a single terminal command — ./generate-dashboard.sh — that outputs a fresh dashboard.html in under 30 seconds.
Use the same pattern for non-code projects
The slash command → structured JSON → HTML template pipeline works for anything Claude Code can read. Try it on a folder of markdown notes, a collection of config files, or even a directory of design specs. Swap out the schema fields to match whatever you're documenting — the two-model hand-off stays the same.