scripod.com
How to build your own AI developer tools with Claude Code | CJ Hess (Tenex)

Overview

Shownote

Highlights

Transcript

Chapters

Pins

How to build your own AI developer tools with Claude Code | CJ Hess (Tenex)

How I AI

Feb 09
How I AI

How I AI

Feb 09
OverviewShownoteHighlightsTranscriptChaptersPins

Shownote

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 [https://www.orkes.io/]—The enterprise platform for reliable applications and agentic workflows Rovo [https://rovo.com/]—AI that knows your business — 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 [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 [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 [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 [https://claude.ai/code] • Claude Opus 4.5: https://www.anthropic.com/news/claude-opus-4-5 [https://www.anthropic.com/news/claude-opus-4-5] • Cursor: https://cursor.sh/ [https://cursor.sh/] • Obsidian: https://obsidian.md/ [https://obsidian.md/] • GPT-5.2 Codex: https://openai.com/index/introducing-gpt-5-2-codex/ [https://openai.com/index/introducing-gpt-5-2-codex/] • Google’s Project Genie: https://labs.google/projectgenie [https://labs.google/projectgenie] — Other references: • Mermaid diagrams: https://mermaid.js.org/ [https://mermaid.js.org/] • Figma: https://www.figma.com/ [https://www.figma.com/] • Excalidraw: https://excalidraw.com/ [https://excalidraw.com/] • TypeScript: https://www.typescriptlang.org/ [https://www.typescriptlang.org/] — Where to find CJ Hess: LinkedIn: https://www.linkedin.com/in/cj-hess-connexwork/ [https://www.linkedin.com/in/cj-hess-connexwork/] X: https://x.com/seejayhess [https://x.com/seejayhess] — Where to find Claire Vo: ChatPRD: https://www.chatprd.ai/ [https://www.chatprd.ai/] Website: https://clairevo.com/ [https://clairevo.com/] LinkedIn: https://www.linkedin.com/in/clairevo/ [https://www.linkedin.com/in/clairevo/] X: https://x.com/clairevo [https://x.com/clairevo] — Production and marketing by https://penname.co/ [https://penname.co/]. For inquiries about sponsoring the podcast, email jordan@penname.co.

Highlights

In this episode, software engineer CJ Hess shares his hands-on approach to building and refining AI-powered development tools that bridge the gap between planning and implementation.
00:00
CJ Hess uses JSON files with Claude Code to generate UI mockups
02:51
Claude Code has intent understanding and is steerable
04:47
Claude Code simplifies environment setup for non-engineers, like helping a designer get set up on Cursor
06:52
They've developed a tool to give JSON files to Claude Code and built skills for it
11:24
Flowy renders nodes and edges from JSON files, enabling Claude to understand designs in a more native way
14:55
Individual engineers can build v1 products themselves until hitting constraints
18:54
Claude launches multiple Explorer sub-agents in parallel to generate and load Flowy skills for preview
22:37
One doesn't need to know how to write skills as it can do so effectively
23:27
Flowy generated two diagrams—animation timing and user flow—as living documentation
31:11
On-demand software allows adding and deleting apps for quick visualization
31:39
Claude created a UI spinner mock-up which is better than expected
33:33
Claude built the feature, checked for TypeScript issues, and the result is close to the mock-up
35:40
CJ created Flowy, a tool for workflow diagrams and UI mock-ups using JSON schema, accessed via Claude Code skills
36:51
Codex is used to review Claude-generated code for smells and scalability improvements
41:54
Codex provides a pre-flight check for model-to-model evaluation
47:58
CJ now explains what went wrong and what he wants instead of yelling at AI

Chapters

Introduction to CJ Hess
00:00
Why CJ prefers Claude Code for development
02:48
The evolution of developer environments with AI
04:46
Planning workflows and the limitations of ASCII diagrams
06:50
Introduction to Flowy, CJ’s custom visualization tool
08:23
How Flowy compares to mermaid diagrams
11:54
Demo: Using Flowy
15:25
Examining Flowy’s skill structure
19:30
Reviewing the generated flowcharts and diagrams
23:27
The cognitive benefits of visual planning vs. text-based planning
28:34
Generating UI mockups with Flowy
31:38
Building the feature directly from flowcharts and mockups
33:30
Quick recap
35:40
Using model-to-model review with Codex (Carl)
36:51
The benefits of using AI for code review
41:52
Lightning round and final thoughts
45:13

Transcript

CJ Hess: Working with Claude is just such a delight. It just feels so steerable, and I think the one thing it really has is intent, understanding. When I wanted to dig deep, it just does it, and it's really enabled me to build a little ecosystem of my own ...