Turn generated code into an HTML explainer with Codex
Once the local coding harness existed, I asked Codex to make an HTML page explaining how the code worked, what the application added, and how someone could build something similar. It read the implementation and produced a code map and an explanation of the run loop. I pushed it to make the page more visual, with architecture diagrams and ChatPRD styling.
I also asked it to identify the interesting prompts in the code. The explainer traced the prompt builder, the generated worker prompt, the worker’s tool permissions, and the saved outputs. That gave me specific places to look when I wanted to understand how the agent was being instructed.
Codex then made a separate ten-slide HTML presentation with keyboard navigation and a link back to the explainer. Having the agent turn its implementation into something I could inspect and explain removed a separate documentation pass. My feedback went into the explanation and the diagrams while the code was still fresh.
# Explain this application
Adapted from my workflow; this is not the original transcript.
Read the implementation of the application I identify. Create a standalone HTML explainer for its owner that answers:
- What does it do, and when would I use it?
- What happens from the initial input to the final result?
- Which files own the important parts?
- Where do agent prompts come from, which tools can the agent use, and where are outputs saved?
- Which parts are implemented, and which still need configuration or development?
Use diagrams for the architecture and main execution path. Link explanations to the relevant source files. Distinguish observed behavior from intended behavior. Use the application’s existing visual style where available.
Check that the page opens, its navigation works, and its diagrams and explanations match the code. Keep example data free of secrets and private customer information.