How to build your own AI developer tools with Claude Code | CJ Hess (Tenex)
How I AI
Feb 09
How to build your own AI developer tools with Claude Code | CJ Hess (Tenex)
How to build your own AI developer tools with Claude Code | CJ Hess (Tenex)
How I AI
Feb 09
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.
CJ Hess demonstrates Flowy, his custom-built tool that transforms JSON-defined specifications into interactive flowcharts and UI mockups—replacing static ASCII diagrams with dynamic, editable visual assets. He emphasizes visual planning’s cognitive advantages over text-based workflows and shows how Flowy integrates tightly with Claude Code via structured skills, enabling bidirectional refinement between design and code. Rather than relying on generic diagramming tools like Mermaid, he builds purpose-built utilities for precise control and rapid iteration. Hess also advocates a model-to-model review process: using Codex (Carl) to critique and refactor Claude-generated code, catching code smells and improving scalability before production. This dual-model strategy supports higher-quality, maintainable output while reducing planning overhead—allowing features to be built directly from flowcharts and mockups in TypeScript. He highlights the growing trend of individual engineers shipping tailored dev tools, enabled by increasingly capable foundation models like Claude Opus 4.5, and underscores a shift toward collaborative, diagnostic prompting over trial-and-error interaction with AI.
00:00
00:00
CJ Hess uses JSON files with Claude Code to generate UI mockups
02:51
02:51
Claude Code has intent understanding and is steerable
04:47
04:47
Claude Code simplifies environment setup for non-engineers, like helping a designer get set up on Cursor
06:52
06:52
They've developed a tool to give JSON files to Claude Code and built skills for it
11:24
11:24
Flowy renders nodes and edges from JSON files, enabling Claude to understand designs in a more native way
14:55
14:55
Individual engineers can build v1 products themselves until hitting constraints
18:54
18:54
Claude launches multiple Explorer sub-agents in parallel to generate and load Flowy skills for preview
22:37
22:37
One doesn't need to know how to write skills as it can do so effectively
23:27
23:27
Flowy generated two diagrams—animation timing and user flow—as living documentation
31:11
31:11
On-demand software allows adding and deleting apps for quick visualization
31:39
31:39
Claude created a UI spinner mock-up which is better than expected
33:33
33:33
Claude built the feature, checked for TypeScript issues, and the result is close to the mock-up
35:40
35:40
CJ created Flowy, a tool for workflow diagrams and UI mock-ups using JSON schema, accessed via Claude Code skills
36:51
36:51
Codex is used to review Claude-generated code for smells and scalability improvements
41:54
41:54
Codex provides a pre-flight check for model-to-model evaluation
47:58
47:58
CJ now explains what went wrong and what he wants instead of yelling at AI
