How I AI

DIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding

CJ Hess is a software engineer at Tenex who has built some of the most useful tools and workflows for being a “real AI engineer.” In this episode, CJ demonstrates his custom-built tool, Flowy, that transforms Claude’s ASCII diagrams into interactive visual mockups and flowcharts. He also shares his process for using model-to-model comparison to ensure that his AI-generated code is high-quality, and why he believes we’re just at the beginning of a revolution in how developers interact with AI. *What you’ll learn:* 1. How CJ built Flowy, a custom visual planning tool that converts JSON files into interactive mockups and flowcharts 2. Why visual planning tools are more effective than ASCII diagrams for complex UI and animation workflows 3. How to create and use Claude Code skills to extend your development environment 4. Using model-to-model comparison (Claude + Codex) to improve code quality 5. How to build your own ecosystem of tools around Claude Code 6. The value of bypassing permissions in controlled environments to speed up development *Brought to you by:* Orkes—The enterprise platform for reliable applications and agentic workflows: https://www.orkes.io/ Rovo—AI that knows your business: https://rovo.com/ *Detailed workflow walkthroughs from this episode:* • How I AI: CJ Hess on Building Custom Dev Tools and Model-vs-Model Code Reviews: https://www.chatprd.ai/how-i-ai/cj-hess-tenex-custom-dev-tools-and-model-vs-model-code-reviews • Implement Model-vs-Model AI Code Reviews for Quality Control: https://www.chatprd.ai/how-i-ai/workflows/implement-model-vs-model-ai-code-reviews-for-quality-control • Develop Features with AI Using Custom Visual Planning Tools: https://www.chatprd.ai/how-i-ai/workflows/develop-features-with-ai-using-custom-visual-planning-tools *In this episode, we cover:* (00:00) Introduction to CJ Hess (02:48) Why CJ prefers Claude Code for development (04:46) The evolution of developer environments with AI (06:50) Planning workflows and the limitations of ASCII diagrams (08:23) Introduction to Flowy, CJ’s custom visualization tool (11:54) How Flowy compares to mermaid diagrams (15:25) Demo: Using Flowy (19:30) Examining Flowy’s skill structure (23:27) Reviewing the generated flowcharts and diagrams (28:34) The cognitive benefits of visual planning vs. text-based planning (31:38) Generating UI mockups with Flowy (33:30) Building the feature directly from flowcharts and mockups (35:40) Quick recap (36:51) Using model-to-model review with Codex (Carl) (41:52) The benefits of using AI for code review (45:13) Lightning round and final thoughts *Tools referenced:* • Claude Code: https://claude.ai/code • Claude Opus 4.5: https://www.anthropic.com/news/claude-opus-4-5 • Cursor: https://cursor.sh/ • Obsidian: https://obsidian.md/ • GPT-5.2 Codex: https://openai.com/index/introducing-gpt-5-2-codex/ • Google’s Project Genie: https://labs.google/projectgenie *Other references:* • Mermaid diagrams: https://mermaid.js.org/ • Figma: https://www.figma.com/ • Excalidraw: https://excalidraw.com/ • TypeScript: https://www.typescriptlang.org/ *Where to find CJ Hess:* LinkedIn: https://www.linkedin.com/in/cj-hess-connexwork/ X: https://x.com/seejayhess *Where to find Claire Vo:* ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

CHCJ HessguestCVClaire Vohost

Feb 9, 2026·53m·Watch on YouTube ↗

📖 CHAPTERS

1. 1

   Meet CJ Hess: building a personal ecosystem around Claude Code

   CJ Hess shares why he’s become a Claude Code power user and how it enabled him to build an ecosystem of personal dev tools. The conversation sets up the theme: customizing AI-assisted development workflows to match how you think and work.

2. 2

   Why CJ prefers Claude Code over alternatives (and what matters beyond model IQ)

   CJ contrasts model ‘smartness’ with day-to-day usability, arguing the harness and UX of Claude Code make it especially effective. The emphasis is on steerability, deep follow-through, and how tooling amplifies model capability.

3. 3

   AI changes developer environments: from IDE choices to bespoke workflows

   Claire and CJ discuss how AI enables a new era of personalized developer setups—far beyond picking an IDE or linter. They highlight how agentic models can even handle tedious environment and configuration chores that used to linger for months.

4. 4

   Planning with markdown—and why ASCII diagrams hit a wall

   CJ describes a planning workflow many developers are converging on: iterating in markdown plans until confident enough to implement. But for flows and UI thinking, ASCII diagrams (and even Mermaid) feel limiting and cognitively taxing.

5. 5

   Introducing Flowy: JSON-based flowcharts and UI mockups generated by AI

   CJ unveils Flowy, a custom tool he built so Claude can output JSON that renders into clean flowcharts and low-fidelity UI mockups. The key idea is replacing hard-to-edit text diagrams with a machine-readable format that’s also human-friendly visually.

6. 6

   Flowy vs Mermaid: owning the constraints and evolving the tool + skills together

   The discussion turns to why CJ didn’t just use Mermaid: he wanted full control to add features and update the agent’s understanding in lockstep. He explains how custom skills teach Claude to read/write Flowy’s schema effectively.

7. 7

   Skills as living documentation: structure, examples, and iterative refinement

   CJ shows the Flowy skill markdown file and how he treats it as living documentation for agents. Claire highlights good skill patterns—purpose, quick start, schema, and examples—while CJ notes he often lets the model manage the file’s shape.

8. 8

   Demo setup: prompting Claude to explore the repo and generate diagrams first

   CJ demonstrates a workflow: ask Claude to re-anchor on prior plans, explore the codebase, and then generate both a user-flow diagram and an animation timing sequence in Flowy. Parallel exploration agents help gather context quickly.

9. 9

   Iterating visually: editing Flowy, leaving notes, and round-tripping to Claude

   CJ opens the generated Flowy diagrams, identifies issues (like timing), edits the diagram directly, and asks Claude to update based on notes. The chapter emphasizes tight feedback loops between human edits and agent updates using the shared JSON substrate.

10. 10

    From diagrams to UI mockups: generating screen states for the spinner feature

    CJ prompts Claude to generate Flowy UI mockups that represent different states of the spinner interaction. Even without perfect shape primitives, Claude works around limitations to create a useful representation of the intended UI.

11. 11

    Build directly from artifacts: skipping the markdown plan and shipping the feature

    With flowcharts and mockups in place, CJ tries a ‘just build it’ prompt, removing Claude from extended plan mode. The result: a working spinner UI that closely matches the mockups, demonstrating artifacts can effectively replace long textual specs.

12. 12

    Model-to-model review: using Codex (“Carl”) to critique Claude’s diff

    CJ explains his practice of having Codex review Claude-generated code for alignment with diagrams/specs and for ‘code smells.’ Codex is positioned as a critical reviewer that catches mismatches and suggests refactors for maintainability.

13. 13

    Lightning round: Genie 3 worlds, prompting style, and releasing Flowy

    CJ shares excitement about Google’s Genie 3 for generating explorable worlds and plays with a ‘Matrix lobster’ example. They close with CJ’s prompting philosophy (less yelling, more clear correction) and plans to release Flowy publicly with associated skills.