Skip to content
How I AIHow 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._

CJ HessguestClaire Vohost
Feb 8, 202653mWatch on YouTube ↗

At a glance

WHAT IT’S REALLY ABOUT

Engineer builds Flowy to turn AI plans into visual artifacts

  1. CJ Hess shares an AI-native development workflow that upgrades traditional markdown planning by adding visual flowcharts and UI mockups generated from a JSON schema in his custom tool, Flowy.
  2. He demonstrates prompting Claude Code to explore a repo, generate Flowy diagrams (user flow + animation timing), produce UI mockups, and then implement the feature directly from those artifacts.
  3. The conversation highlights why CJ prefers Claude Code for its “steerability” and intent understanding, and how skills act as living documentation that evolves as the tool evolves.
  4. To counteract “vibe coding” drift and code smells, CJ uses Codex as a second-model reviewer to validate spec alignment, catch discrepancies, and recommend refactors before merging.

IDEAS WORTH REMEMBERING

5 ideas

Steerability can matter more than raw model intelligence in day-to-day coding.

CJ notes GPT may be “smarter,” but Claude Code feels more responsive to his intent, which makes iterative building and tooling workflows smoother and faster.

AI makes dev-environment setup a high-leverage, underused workflow.

They describe onboarding by asking Claude Code to understand the repo and set up dependencies/tools, turning historically painful setup into an agentic “come back later” task.

Text-only plans break down when humans need to validate complex behavior.

CJ finds ASCII/Mermaid diagrams insufficient for quickly verifying UI/interaction logic; visual artifacts reduce cognitive load versus reading dense markdown steps.

A shared “artifact language” bridges human visual thinking and LLM text reasoning.

Flowy’s JSON files let CJ edit visually (like Figma/Excalidraw) while Claude reads/writes structured data, creating a two-way interface between human and model.

Skills work best as iterative, failure-driven documentation.

CJ updates Flowy skills whenever outputs fail (spacing, colors, readability), treating skill files as living docs that co-evolve with product features and constraints.

WORDS WORTH SAVING

5 quotes

Working with Claude is just such a delight. It just feels so steerable, and... it really has intent understanding.

— CJ Hess

I really like this visual way to think about things, but I really hate staring at these ASCII... diagrams.

— CJ Hess

This is a dev tool that was almost 100% prompted.

— CJ Hess

It’s almost like I want to see it visually, and Claude wants to see it as Markdown, so we can kinda speak in our own way.

— CJ Hess

Codex is... a really good, curmudgeonly staff engineer that will look at your code and tell you what’s wrong with it.

— Claire Vo

Claude Code vs Codex tradeoffs (steerability vs review)Environment setup as an AI use caseMarkdown planning workflows and ASCII diagram limitationsFlowy: JSON-driven flowcharts and UI mockupsSkills as living, agent-readable documentationDemo: spinner-wheel feature from diagrams to codeModel-to-model review for quality and refactoring

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

Add to Chrome