DIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding
CJ Hess (guest), Claire Vo (host)
In this episode of How I AI, featuring CJ Hess and Claire Vo, DIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding explores engineer builds Flowy to turn AI plans into visual artifacts 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.
Engineer builds Flowy to turn AI plans into visual artifacts
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.
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.
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.
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.
Key Takeaways
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.
Get the full analysis with uListen AI
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.
Get the full analysis with uListen AI
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.
Get the full analysis with uListen AI
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.
Get the full analysis with uListen AI
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.
Get the full analysis with uListen AI
You can often skip long plans if diagrams and mockups are explicit enough.
In the demo, CJ uses flowcharts + UI mockups as the effective “plan,” then prompts Claude to build the feature directly, relying on the artifact specificity to constrain implementation.
Get the full analysis with uListen AI
Second-model review is a pragmatic antidote to vibe-coding code smells.
CJ uses Codex to review the git diff across buckets (spec alignment, smells, refactor suggestions), catching mismatches (pointer landing between dots) and recommending componentization/constants.
Get the full analysis with uListen AI
Notable 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
Questions Answered in This Episode
What does Flowy’s JSON schema look like at minimum (nodes/edges/styles), and what parts are most error-prone for the model?
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.
Get the full analysis with uListen AI
How did you decide what belongs in the Flowy “flowchart” skill vs the “UI mockup” skill, and when do you split a skill into smaller ones?
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.
Get the full analysis with uListen AI
You mentioned spacing rules evolving over time—what concrete layout heuristics ended up making the biggest quality jump (grid, padding defaults, snap rules)?
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.
Get the full analysis with uListen AI
How do you prevent Flowy mockup shapes from over-constraining the real UI implementation (the “mockup dictates component shape” problem you called out)?
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.
Get the full analysis with uListen AI
In the spinner demo, you intentionally skipped a markdown plan—what are your red flags that tell you ‘this needs a written plan’ anyway?
Get the full analysis with uListen AI
Transcript Preview
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 want it to dig deep, it just does it, and it's really enabled me to build a little ecosystem of my own tools around it.
I think environment setup and developer setup is such an underappreciated use case. One of the things that I know you really care about is effective planning, and you've come up with a way that you do your planning that I think is pretty unique.
So I've played around with this tool to basically give Claude these JSON files, and there's a whole set of skills I've built around this that Claude Code can use to write these out, and then these actually end up generating nice-looking UI mockups. I will say this is a dev tool that was almost 100% prompted. [upbeat music]
Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive, here on a mission to help you build better with these new tools. Today, I have CJ Hess at Tenex, and if you've seen him on X, he is building some of the most useful tools and flows for being a, quote-unquote, "real AI engineer." We're gonna get a sneak peek in his tool, Flowy, that he vibe coded for himself, and he's gonna show us how he uses model-to-model comparison to make sure his code is great. Let's get to it. This episode is brought to you by Orkes, the company behind open-source Conductor, the platform powering complex workflows and process orchestration for modern enterprise apps and agentic workflows. Legacy business process automation tools are breaking down. Siloed low-code platforms, outdated process management systems, and disconnected API management tools weren't built for today's event-driven, AI-powered, cloud-native world. Orkes changes that. With Orkes Conductor, you get a modern orchestration layer that scales with high reliability, supports both visual and code-first development, and brings human, AI, and systems together in real time. It's not just about tasks, it's about orchestrating everything: APIs, microservices, data pipelines, human-in-the-loop actions, and even autonomous agents. So build, test, and debug complex workflows with ease. Add human approvals, automate back-end processes, and orchestrate agentic workflows at enterprise scale, all while maintaining enterprise-grade security, compliance, and observability. Whether you're modernizing legacy systems or scaling next-gen AI-driven apps, Orkes helps you go from idea to production fast. Orkes, orchestrate the future of work. Learn more and start building at orkes.io. That's O-R-K-E-S dot I-O. CJ, welcome to How I AI.
Thanks, Claire. It's good to be here.
So I've seen a lot of Claude and AI engineering power users, and I still think you're, like, a super power user of some of these tools, and it's not just because you're creating real production code with what you're building, which is really nice to see, and I think a subset of what we're seeing out of folks using these tools. You also build tools for yourself to make the process of AI engineering better, and you share those tools with other people, who then validate that they're actually helpful. So why are you so excited about, in particular, Claude Code, and what has it changed for you as, as we were talking before the show, a, quote-unquote, "real software engineer"?
Install uListen to search the full transcript and get AI-powered insights
Get Full TranscriptGet more from every podcast
AI summaries, searchable transcripts, and fact-checking. Free forever.
Add to Chrome