How I AIDIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding
EVERY SPOKEN WORD
45 min read · 9,269 words- 0:00 – 2:48
Introduction to CJ Hess
- CHCJ 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 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.
- CVClaire Vo
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.
- CHCJ Hess
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]
- CVClaire Vo
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.
- 2:48 – 4:46
Why CJ prefers Claude Code for development
- CVClaire Vo
CJ, welcome to How I AI.
- CHCJ Hess
Thanks, Claire. It's good to be here.
- CVClaire Vo
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"?
- CHCJ Hess
Like a lot of people, the Opus 4.5 moment was a big one.
- CVClaire Vo
Mm-hmm.
- CHCJ Hess
Um, but I've been on Claude Code, I don't know, maybe last May, but for me it was really about the harness they have, and like, I see a lot of arguments about Codex and Claude Code, and I'd honestly argue GPT-5.2 is a smarter model, but, like, working with Claude is just such a delight, like, in Claude Code. It just feels so, like, steerable, and I think the one thing it really has is, like, intent understanding. Maybe I'm not giving, you know, Opus and Cursor, like, the, the shot it deserves here, but there's something about in Claude Code, like, when I want it to dig deep, it just, it just does it. It feels to, like, pick up on my intuition just in the prompts. Um, and it's really enabled me to almost, like, build a little ecosystem of my own tools around it, around Claude Code, kind of particularly with skills now, um, that just, like, keep making it better and better for me because it's Claude Code plus, like, this system of skills and tools that, um, I've built around it. So it's r- it's, like, really hard for me to get
- 4:46 – 6:50
The evolution of developer environments with AI
- CHCJ Hess
out of it.
- CVClaire Vo
Yeah, what I love about this moment as a software engineer is, you know, back in the, in the olden days, you sort of had, like, your choice of, like, "What's gonna be my IDE, and am I gonna use Vim?" And like what, you know, "What are my, my set of approved tools as an engineer that I can use to make... You know, what linters are we using as a team?" All this kind of stuff. Like, there's stuff that you could do to customize your developer environment, but now you can really take it to the next level, and you could have a totally different AI engineering workflow than your colleague sitting next to you, and it's totally fine 'cause it's making you individually a lot more efficient and effective, and you're building them yourselves for pretty cheap, so there's not that cost or that hurdle of evaluating new things in your stack.
- CHCJ Hess
Yeah, there's even like... It's almost like, one, you now have the brains of Claude to almost, like, do some dirty work on the dev tooling. Like, I think, you know, pre any of kind of the newer gen models that just really can handle the agentic loop, and, you know, sitting with, like, a broken linter and just accepting it and having, like, ignore comments everywhere so that [chuckles] you know, I, I just, I just would give up. And now it's like, I feel like I can almost trust it to be like, "What's wrong with this config? My IDE isn't matching what's in the project. Okay, we have to resolve this," and just-... kind of solving those, like, chore problems that I feel like previously just ended up being forever problems.
- CVClaire Vo
Yeah, and for the non-engineers watching or listening right now, y- I think environment setup and developer setup is such an underappreciated use case. Yesterday, I onboarded a designer who had literally, has kind of, like, sat out some of this AI stuff, has literally not downloaded anything, used anything, and she's on Cursor, Claude Code, nodes running, Homebrew's installed, and I was like, "Just ask-
- CHCJ Hess
That's awesome
- CVClaire Vo
... Claude Code to do it. Say, like, 'Help me understand this repo and get my computer set up to run.'" And it just- And I said, "And then it- just tell it it can accept all tools" [chuckles]
- CHCJ Hess
Yeah.
- CVClaire Vo
And let it go-
- CHCJ Hess
Just figure it out
- CVClaire Vo
... and come back
- 6:50 – 8:23
Planning workflows and the limitations of ASCII diagrams
- CVClaire Vo
to your laptop later. And it's pretty great. I mean, we're really, really spoiled right now. So let's dive into some of your actual workflows, and 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.
- CHCJ Hess
Yeah, so there's kind of the classic plan. So I'm gonna swap over to Cursor here. I have in this just, like, your classic .plans folder, just throwing plans in here, and I really love this format. I think a lot of people are kind of converging on this, of, like, iterating on markdown, having one file where you're just, like, working through the plan, reviewing the plan, and by the end of that, you can almost feel confident just letting it write the code. But the one, like, piece that I hated that I found really valuable was these ASCII flowcharts. So if you're just listening, it's all those, like, boxes and arrows that Claude draws, and, you know, [chuckles] there's always the ones where... This one actually looks pretty clean. Yeah, there's always this, like-
- CVClaire Vo
[chuckles]
- CHCJ Hess
... misalignment of that edge character. I don't know why we haven't figured that out yet. But for things like UI mockups, things like, you know, flowcharts of how navigation's gonna work, how a certain system is gonna work, I really like this visual way to think about things, but I really hate staring at these ASCII, like, diagrams. Even things kind of like Mermaid and everything just didn't feel exactly what I was going for.
- 8:23 – 11:54
Introduction to Flowy, CJ’s custom visualization tool
- CHCJ Hess
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, not in super high fidelity or detail, but, you know, I can kind of guide it the direction I need. And up here, this, this white text might be a little hard to see, but basically this is [chuckles] a flowchart on this tool, Flowy, and how it works.
- CVClaire Vo
So for, for the listeners, what I love about this is Flowy is a tool that you built. This isn't... You're saying like, "Oh, I was playing with this tool." It's like, no, you built this tool- [chuckles]
- CHCJ Hess
Yeah, and-
- CVClaire Vo
... for your, for yourself.
- CHCJ Hess
This was, um, this was my first experiment with a Ralph loop. I'm still not certain how confident I am in them, 'cause I had to do a little bit of cleanup, but overall, I will say this is kind of a dev tool that was m- almost 100% prompted.
- CVClaire Vo
Yeah. And so what you said is, you know, I love plans, I love the idea, and, and I just have to take a minute. Again, I'm the oldest lady on the internet. So-
- CHCJ Hess
[chuckles]
- CVClaire Vo
... way back in, in the day, two decades ago, when I was first doing, um, product management and web design, we did so many flowcharts, so many user journey charts, and then so many wireframes, and so many, like, low-fidelity mocks, then high-fidelity mocks. And what I love about what you're building is you're building the AI native version of that. That piece has not gone away for anybody. It hasn't gone away that you said, like, "When you click this, it goes to this, and these are the steps, and these are the branches," and all that. And it hasn't gone away that you have to look at designs and say, "Yeah, this is kind of what I want," but now you can have AI create them. And at first, you had AI create, AI create them in Markdown, very, very low fidelity. And I have to take a side journey that, you know, a year ago, I was, like, extremely delighted that it was making ASCII mar- markups, and now it's just not good enough.
- CHCJ Hess
Yeah.
- CVClaire Vo
And so you've taken these, like-
- CHCJ Hess
That's the shifting expectations on these models.
- CVClaire Vo
Yeah, exactly. And so you've taken these Markdown markups that were useful, and you said, "Now make them really useful by building this sub-application, um, that can run them for you." And it's a combination of, it seems like, workflow diagrams and step-by-step mockups.
- CHCJ Hess
Yeah, so there's kind of... Basically, what I wanted was JSON file. It can render, and it can have nodes and edges like any flowchart, and then roughly be able to stack them, change the colors, and get us, you know, something that looks like this, where we have a couple different screens, and we have these somewhere between a wireframe and a true mockup that just can help me point the model in the right direction. Um, the other big thing for me was iterating on this. I'm not gonna go in that Markdown file and try to, like, [chuckles] write new shapes and combine them. Um, so for this, this is also an editor, and as you edit it, all these changes save to that JSON file. So you can then point Claude back at it and say, "Hey, I know you did this, but actually, let's say I want a step here, and I'm gonna bring this up and add some edges." And then you can be designing in here, almost like you're in Figma or Excalidraw or something, and then Claude can just read the file, and that's, like, a more native way for it to understand what
- 11:54 – 15:25
How Flowy compares to mermaid diagrams
- CHCJ Hess
everything looks like.
- CVClaire Vo
And you mentioned Mermaid diagrams, and so I have this question, which is: One of the benefits of Mermaid diagrams is that's a syntax that these LLMs know well and can parse and actually reason about. Do you feel like... Have you created a skill where Claude Code can understand and read this JSON? Like, how did you train it to read your kind of proprietary dev tool and documentation?
- CHCJ Hess
... Yeah, so right now there's two main skills I use. There's a third one that's just an overview, basically, kind of the high-level view of what the commands are, what a, what a Flowy file would look like. And then I have one that's very specific about flowcharts and one that's about UI mockups. And to make these, I basically sat with- sat in the repo of the tool itself, had a bunch of, like, Explore sub-agents going, and then started to make the first UI mockups and the flowcharts, and started to guide it on, "Okay, you put these two close. We need a rule about, like, spacing and how to think about spacing." And just incrementally, I've been building that up, where if I'm working with this and something goes wrong, uh... Almost an example here would be this, like, white text on these, you know, pastel notes, kind of hard to read. I would essentially hop into the place where I have these skills and say, "Here's what happened. Give me a suggestion on how to improve this skill so this doesn't happen again," and then iteratively just keep building that skill. And [chuckles] the first flowcharts this thing made were, you know, shapes stacked on top of each other. It didn't make any sense. Um, but it's come a long way, not much without many changes to, like, the underlying app. It's really just been about, like, getting Claude to understand and know the skill. Um, and I find that works better than something like Mermaid, just because I really feel the power of building my own dev tools now, and that I, I really don't wanna hit the constraints of Mermaid, if that makes sense.
- CVClaire Vo
Yeah.
- CHCJ Hess
I wanna be able to say, "Okay, I want a new feature in Flowy. I'm gonna build it, I'm gonna update skills," and I can be confident that Claude can actually work with that and understand the new feature.
- CVClaire Vo
Yeah, one of the things that I've really observed in myself as a engineer is, as more and m- as I access more and more of my dev tools through, like, an MCP or config as code, or any of these things, I start to realize it's very easy for me to extend [chuckles] what they've built and customize it to myself. And so I do think, you know, of all the places, dev tools a t- dev tool's an interesting one, where, one, your users are super cheap, and two, they're capable [chuckles] of, of, of forking what you've built, and three, there's so much open source, that I really do think there's gonna be this trend towards build... I used to be, when I, you know, I ran these big product and engineering orgs, they used to ask me, "Build versus buy?" And I was like, "Oh, my God, please just buy it. Like, please just take my credit card and buy it-
- CHCJ Hess
Yeah
- CVClaire Vo
... and let's not waste our time." And now I've flipped to, "Of course, we should build this." Until we hit some constraint, we should build it. And certainly, individual engineers, if something's useful, you should just build something yourself, at least for, for V1.
- CHCJ Hess
Yeah, it's almost not worth spending the extra money anymore. I mean, I've seen... I feel like I'm seeing this pattern on Twitter, but it's everyone's posting some product, some ridiculous pricing tier, and saying, "Someone please vibe code this," you know? I feel like that's happening
- 15:25 – 19:30
Demo: Using Flowy
- CHCJ Hess
all across SaaS.
- CVClaire Vo
Yeah. So can you show us how you'd either create one of these Flowys, use one in your Claude Code? Like, how does this actually work?
- CHCJ Hess
What I was thinking is, I have this Tips and Tricks section in this little, like, demo Claude Code Guide app. My whole background's in mobile development, so this was the easiest thing for me to spin up. But basically, I kinda don't like these cards. I almost want this to be a little more fun. Let's say you want, like, a spinner wheel. It lands on something, and then it shows you the tip. The development flow for me usually looks like hopping in here. I have some funny aliases, but I'm a fully bypass permissions guy, so Kevin, in my terminal, actually routes to Claude with bypass permissions.
- CVClaire Vo
Okay, so you've named different permission scopes as aliases in your terminal if-
- CHCJ Hess
Oh, yeah.
- CVClaire Vo
For, for our listeners, we have an episode, very recent, of John Lindquist, who actually shows how to set up those aliases for Claude Code. So definitely check out that, that episode for if you wanna set this up. I just have a classic, like, CC, and then I'm gonna make a CC scary. That will make me... That'll be my, like, dangerous permission.
- CHCJ Hess
Oh, yeah. Yeah, I'm, [exhales] I'm more and more in this Kevin mode today. I find that a lot of, like, projects where I'm, you know, solely working on it or working within the team I'm on, we have all the, like, rules set up in Git, that if I do something [chuckles] horrible, it-
- CVClaire Vo
Yeah
- CHCJ Hess
... it's okay. But there are definitely times, like, if I'm creating a PR, every now and then, I still do it by hand, but I have a lot of skills that do a lot of those workflows, run the pre-flight checks, and make sure we're all good before pushing it up. But besides that, I'm, I'm kind of okay running dangerously bypass most of the time these days.
- CVClaire Vo
Great. So you go into Kevin, AKA Claude Code, and what do you do?
- CHCJ Hess
So for this, my prompt would probably be something along the lines of, "Look at our previous plans, and then explore the code base." Just wanna re-anchor it a little bit, especially on a fresh chat. "On the Tips and Tricks section, I want to create a spinning wheel, where a user presses a button, the wheel spins, and then that is one of the tips. After that, the tip should pop up in a card just below the spinner." Then, kind of the next step, and what I've been doing more and more, which is not how I initially started using this tool, is actually having it make the flowchart of-... you know, how the code's gonna work, a system diagram, anything like that. In this example, I'd actually want both kind of the user flow and an animation timing sequence. I've found this to be super helpful with, like, complex animations. So I would say, "Then use the Flowy flowchart skill to create a animation timing sequence diagram and a user flow diagram for the tips and tricks page." So we'll send off Claude. It's gonna do a little bit of exploration. Oftentimes- Yep, there it is. [chuckles] I actually really like these Explorer sub-agents, um, and oftentimes I'll kick off three, four, or five in parallel just to look at different places, especially if I'm in a larger code base. But just gathering all the context around it, this is a, a small app, so I don't imagine this will take too long. Then Claude's gonna load up this Flowy skill, write it out, and we should be able to look at that in
- 19:30 – 23:27
Examining Flowy’s skill structure
- CHCJ Hess
the Flowy editor and then play around before we actually implement it.
- CVClaire Vo
While we're waiting for this to load, can we look at that Flowy skill just a little bit, just to see how you've structured it?
- CHCJ Hess
For sure. So let's first, uh... I'll just show you the supporting files.
- CVClaire Vo
Yep.
- CHCJ Hess
This one's just a Skill MD. This shows you how almost hands-off [chuckles] I am with some of these skill files, particularly the ones that I build myself. Um, I find that-
- CVClaire Vo
Yeah, we have a, we have a Skill 101 episode, and it's like, it's a, it's, it's a markdown file- [chuckles] ... in a folder.
- CHCJ Hess
It, it's a markdown file, and sometimes, this might be a specific example, but with Flowy, it's very squishy, I would say. I go in there, I change something quick. I say, "Update the skill," and really, the process of refinement is me using it and seeing what failed. So here, I don't super care how this file is set up, as long as when I make an update, afterward it's performing better. Like, I almost feel good letting the model manage what this looks like. So let's read through it. Has a bunch of examples in here. Let me scroll up to the top. I'm sure there's some overview. Great. So again, classic overview. "Hey, we're gonna make flowcharts and architecture diagrams. They're gonna render on this port. Here's where you're gonna make them." It knows that, like, the Flowy app looks for this .Flowy folder, kind of gives it some high level on, like, what does the metadata look like? What do you include? Nodes and edges. And then starts digging into the specifics, right? So we have the different shapes, what a rough kind of schema looks like. You've got your styles, you have icons that you can use, and then starting to list out the properties. So I wouldn't say this is anything super crazy or even too long and detailed, but this encapsulates all the pieces that Claude needs to know, and you can almost see here, like, as feature development happens, how this skill grows. So recently, I'd set up this whole, like, semantic color system just to have somewhat of consistent themes. Sometimes [chuckles] Claude liked to pick some crazy colors, and this section just popped into the skill, right? So as I'm doing development on Flowy, part of every plan for code in Flowy is updating documentation and updating the related skills.
- CVClaire Vo
Yep, and I find myself in this loop so frequently, very, very similar to you with skills, which is like, I'm happy, the skill works, and then when the skill doesn't work, I update the skill, and as long as the update got me what I want, I move on with my... [chuckles] We'll move on with my life.
- CHCJ Hess
Yeah.
- CVClaire Vo
The, the AI can read, read the markdown. So and, and a couple of things I wanna call out, though, for folks that are writing skills or reading skills that are important, if you scroll up real quick, is, um... Yeah, so I think there's a couple things. It's like: What's the purpose of the skill? What's its name? Quick start, I think, is really nice. Like, you know, you need these things in order to run the skill. Here's the schema or the template or the framework withit- within which you're operating. Here's some customization of it, and then at the end, it's like, "Here are good examples of, of what works," and I think that's a pretty solid skill. The good thing is, you don't have to know how to do that. You can just have, uh, Claude's skill to write skills or just no skill, but it's pretty good at it, to write skills, and then you end up with, with something like this, which I think is really great. And it can do this. I'm presuming you had it do this from building Flowy and then saying, "Okay, build me a skill to use this based on the code that exists in the repo."
- CHCJ Hess
Yeah, I have, I have a, like, meta skill that is all about making skills.
- 23:27 – 28:34
Reviewing the generated flowcharts and diagrams
- CHCJ Hess
Um, one thing I will say it looks like it violated is I actually prefer, like, a pre-flight section sometimes after quick start, just to give it, like, "Hey, you have to make sure we're meeting all these requirements first." Quick start here is kind of doing that, but there are definitely some examples, mainly in, like, Git workflows, where I really want those pre-flight checks. But absolutely, this is essentially managed by the agent, and it's updated as we're doing development. So this is almost like a living, living documentation, and there's docs for people, and there's docs for agents, and those just end up being skills.
- CVClaire Vo
Yep, great. Okay, so let's go back and let's see if it's made you a Flowy.
- CHCJ Hess
Sweet. So looks like it made two. I usually like to zoom out, um, and read the high level in the chat. This looks about what we want. If we hop back over to here, we can see we have these new- these two new ones, animation, timing, and user flow.... So these ones have been super helpful to me lately. Again, I'm not loving how this white [chuckles] is looking on this pastel note, but high level, we want the user to tap a wheel. The button's gonna do a little scale animation, and there's gonna be some haptic feedback, and then we're gonna go through this spin animation, do a brief pause, and then reveal the tip that it lands on. This is great. This is exactly what I'd want. Maybe I want the animation to be a little longer. I can actually come into here, [chuckles] and you can tell like the-
- CVClaire Vo
Uh-oh, we have font color issues. [chuckles]
- CHCJ Hess
You can tell dark mode is new. [chuckles] Um, but I can flip it real quick.
- CVClaire Vo
Yeah.
- CHCJ Hess
But if we hop down here, sometimes I even just put a note that might be me being lazy and not adding certain features, but [chuckles] maybe I want this to actually be a four-second animation-
- CVClaire Vo
Mm
- CHCJ Hess
... instead of a three-second. I want this to be 4,000 milliseconds and not 3,000 milliseconds. I'll just throw in that note. I'll hop back to Claude. "I left a note on the animation timing. Please take it into consideration and update that flowchart." While Claude is working on that, we can check out the user flow, but basically, the goal there is to have this diagram, you know, written here, which is a little small, but written here say, "For this animation-
- CVClaire Vo
Right.
- CHCJ Hess
... we don't want it to be 3,000 milliseconds. We want it to be 4,000." On the user flow, again, we captured kind of the behavior that we want. Again, it's not perfect. There are rough edges on the bugs here, but we're gonna go into this tab. We're gonna tap tics and- tips and tricks. This is gonna open up to this screen. They're gonna tap. We're gonna check the different states of currently spinning, um, and finally, we're gonna have this random target that we land on, and the card animates in. This is great. This is kind of exactly what I was looking for here. Um, in a more complicated system, I often will start high level, then start making more granular ones, but for something like this, this seems to cover the needs we have. I will say, I have no idea how it's going to handle the UI mock-up, but the next step would be to prompt it to do that. So after it finishes this, I'd say something along the lines of, "Great. Based on those diagrams, please create UI mockups using the Flowy UI mockup skill. Reference other UI mockup Flowy JSON files in this repo."
- SPSpeaker
[upbeat music] Meet Rovo, your AI teammate, connecting knowledge, people, and workflows, so teams can work smarter and move faster. It helps people find answers, make decisions, and automate work securely and with context through search, chat, agents, and studio. Rovo runs on the teamwork graph, Atlassian's intelligent layer that unifies data across your first and third-party apps, so no knowledge gets left behind, and you always get personalized AI insights from day one. And the best news? It's already built into Jira, Confluence, and Jira Service management paid subscriptions, so the power of Rovo is already at your fingertips. Know the feeling when AI turns from tool to teammate? If you Rovo, you know. Discover Rovo, AI that knows your business, powered by Atlassian. Get started at rovo.com. That's R-O-V, as in victory, O.com.
- CVClaire Vo
[upbeat music]
- 28:34 – 31:38
The cognitive benefits of visual planning vs. text-based planning
- CVClaire Vo
You know, I think this is so cool. It's such a great example of, like, build your own dev tool, you know, interact with your agent, Claude Code, how you want, create a, a shared language between you and your AI agent. What I also really appreciate is Claude one-shotted your flow pretty close. It was like, "Yeah, that's what I want," and it probably could have done that or would have done that really well in a plan in Markdown.
- CHCJ Hess
Mm-hmm.
- CVClaire Vo
What I find, though, is my human brain is increasingly blind to code in Markdown. Like, staring at it and just the cognitive overhead of reading, like, step by step, "Is this actually what I want?" is hard when it's just text, even if it's accurate. And so even giving... Oh, hold on. Side news, people. Quick.
- CHCJ Hess
[chuckles]
- CVClaire Vo
Breaking news: Polly, the Claude bot, just joined this podcast. This laptop is closed.
- CHCJ Hess
Polly, wow. [chuckles]
- CVClaire Vo
This laptop is closed. She is not alive right now. I don't know where she is. [chuckles]
- CHCJ Hess
I think Polly's gonna take over.
- CVClaire Vo
[chuckles] So, um, we're gonna boot Polly, the Claude bot. Thank you for joining, Polly. This actually freaks me out.
- CHCJ Hess
[chuckles]
- CVClaire Vo
Uh, we will do a follow-up on my sentient lobster. I guess it's, it's the open Claude bot now, but we're gonna bounce her, [chuckles] bounce her around if-
- CHCJ Hess
If you don't hear from us, Polly got us. It's all over.
- CVClaire Vo
Okay, she might just be on, on the rest of the episode. I don't know how, I don't know how to help this, so [chuckles] we'll just-
- CHCJ Hess
Well, I guess-
- CVClaire Vo
She's like-
- CHCJ Hess
I hope, I hope Polly likes flowcharts.
- CVClaire Vo
[chuckles] She'll do show notes for us. But what I'm saying is, like, being able to read that Markdown is one thing. Being able to look at a flowchart and just say, "Yep, this is exactly what I want," is super helpful. So that's just one thing that I think is really nice about a tool like this, is even if the content is sa- is the same, the ability to change the form factor is, is really useful.
- CHCJ Hess
Yeah, it's, 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, and I almost think there's, like-... I, this has yielded like a ton of random ideas for me, but I think this is like a whole new paradigm that I think dev tooling around AI has not super leaned into yet. But how you're going back and forth with an agent, I think is gonna look so much different by the end of this year than what we're doing right now, where it is, you know, a lot of markdown, a lot of prompting.
- CVClaire Vo
Yeah, I completely agree. And I think the question is gonna be, you know, who's gonna build that UI? Who's gonna own it? Is it gonna be just, like, an open source thing that we all get on? Is it gonna be an extension? Is, is Claude Code gonna just generate these kinds of assets? Or really exciting- I think what's kind of fun is this, like, on-demand software idea, which is... You know, imagine Claude Code's like, "We're not on the same page. I just added an app for you to visualize this real quick. Go to this URL and look at it. Does this look right? And then we'll just delete that app." I, so I think there's just, like, some interesting ways this can, um, can manifest,
- 31:38 – 33:30
Generating UI mockups with Flowy
- CVClaire Vo
I think in, in the future. Okay, so it created the user- Has it created the UI yet? Oh, spinner mock-up.
- CHCJ Hess
Okay, great. So looks like Claude spun up a mock-up here. This is actually better than I thought. I was almost thinking one of those, like, circles with wedges as the spinner, and I know there are not shapes in Flowy that can support that, but looks like Claude kind of worked around it and then built out this wheel. We have both a couple of mock-ups to show the different states and the full, like, flow between spinning it, waiting these four seconds for it to load, and then it actually loading in. Again, for this app, this looks great. I will say editing some of the UI stuff right now isn't the easiest thing, but if I were to come in here and say, "Claude tips and tricks," I could then do a similar thing, hopping back to Claude and saying, "I made a change to the title on one mock-up. Make it everywhere else." This kind of feels like when you prompt it and say, "Add..." You know, [chuckles] "Add two pixels of spacing there," and it's just is a tiny diff, but definitely for, like, dragging around boxes, it's helpful.
- CVClaire Vo
You know, our, our fingers get tired. I can't copy and paste everywhere. No, what I was gonna say is so funny, is you're apologizing, like, "Oh, some of the UI is broken," and we're in this world where you're like, "Yeah, my Figma that I vibe coded, where I can-
- CHCJ Hess
[chuckles]
- CVClaire Vo
... do mock-ups in a web browser, there's, like, some rough edges on it. I spent, you know, two hours on it, but I think it's so-
- CHCJ Hess
Yeah, it was an afternoon. It's not perfect yet, but... [chuckles]
- CVClaire Vo
It's so much more than we were able to do before. Okay, so this is awesome. You're updating this, and then I'm presuming you would just point Claude to these assets and flows and say, "Let's
- 33:30 – 35:40
Building the feature directly from flowcharts and mockups
- CVClaire Vo
make a plan and go."
- CHCJ Hess
Yeah. For something like this, I've basically been doing this thing more recently, where I'm letting the agent do more and more to see where it surprises me. I think with any new change, even like the new Claude Code tasks system they released the other day, I just really like to push the agents and see what they can do. So here, I'm actually gonna skip the plan and say, "Based on the flow, uh, based on the flow charts and the mock-ups, build this feature," and I'm gonna keep it that simple. We've specified the behavior we want. We've specified how it wants- how it should look. Claude here is even gonna enter plan mode, and I'm actually gonna take it right out of it, and we're [chuckles] gonna see if the just build it prompt worked here.
- CVClaire Vo
Perfect.
- CHCJ Hess
Great! Looks like Claude built this out. It even checked for any TypeScript issues, which is great.
- CVClaire Vo
Mm.
- CHCJ Hess
We're gonna hop over here. We have a nice little spinner.
- CVClaire Vo
Ooh.
- CHCJ Hess
It's looking pretty close to this mock-up. I will say, there is a limiting thing here, where shapes that are made in the mock-up then dictate the shapes that are made on the UI when sometimes we want something else.
- CVClaire Vo
Yep.
- CHCJ Hess
But just for this example, I think this is gonna work out. We're gonna spin it. It's gonna spin.
- CVClaire Vo
Ooh, la, la.
- CHCJ Hess
Landed on one of them, and we get the tip. [clapping]
- CVClaire Vo
I love it. It's so good.
- CHCJ Hess
Atta boy, Claude.
- CVClaire Vo
And it's just, again, for anybody who is internet elderly like me, it is just back to the original, like, make your workflow diagram, do your wireframes, polish the copy, give your quote, unquote "engineer" some detailed step-by-step specs. Don't make them think. And then, you know, it used to be, get it in a sprint, wait for somebody to prioritize, like-
- CHCJ Hess
Yeah
- CVClaire Vo
... cry a little bit, wait for the code, blah, blah, blah, and now it's like, "No, just, just build it," and, and it's here. So this
- 35:40 – 36:51
Quick recap
- CVClaire Vo
is such an awesome flow. And then I wanna- so I wanna recap really, really quickly what we covered. So we covered, uh, you know, markdown plans, the limitations of some of the visualizations in that. You created your own tool, Flowy, which does a combination of workflow diagrams and UI mockups using a, a JSON schema, that then you access through skills that you have developed over time using Claude Code. In your development processes, go into Claude Code, ask it to create a Flowy diagram and UI. You can talk, quote, unquote, "between the UI and Claude Code" 'cause it's all just code as the underlying substrate between you two in terms of communication. And then once they are ready to go, you bypass plan life, you're living dangerously, and you build it, and you get something that's really close. And we built this thing in, you know, just a few minutes. This is awesome.
- CHCJ Hess
Yeah, no, I mean, I think that flow... I will say, a lot of times there's a markdown file involved, but-... for something like this, I, I feel like I can trust it at this point. You know, something like Opus 4.5, with this level of detail, already has all it needs. This almost, like, serves as
- 36:51 – 41:52
Using model-to-model review with Codex (Carl)
- CHCJ Hess
the plan.
- CVClaire Vo
Now, I have to call you out, though, 'cause you, you say you can trust it, and yet today you posted, or recently you posted on X, that you do occasionally use Codex to check Claude's work. You wanna just talk us through that workflow? You don't even have to show it, unless you want to.
- CHCJ Hess
For sure. I'll kick it off.
- CVClaire Vo
Yep.
- CHCJ Hess
I will say, Codex takes its time.
- CVClaire Vo
[laughs]
- CHCJ Hess
Um, but over here, I have another funny alias, but my Codex setup is under Carl.
- CVClaire Vo
[laughs]
- CHCJ Hess
[laughs] If I kick off Carl, I often don't have any crazy, like, skills or prompts here. I almost want it to do a review more broadly, and then describe the issues it's seeing. So I'm not running any specific skill or any specific prompt here, because I'm more concerned on the, I guess, like, things that aren't clear, rather than something that's like a logical bug. At this point-
- CVClaire Vo
Mm
- CHCJ Hess
... I feel [chuckles] like I'm mostly a, a QA person, and if there's something that's logically wrong, I've definitely found that I'll find it, or if I have something in the docs in here, it'll find it. Codex always finds those types of things.
- CVClaire Vo
[laughs]
- CHCJ Hess
But I almost wanna look for, like, the code smells, like-
- CVClaire Vo
Yeah
- CHCJ Hess
... you know, is there just a cleaner way? So I usually just prompt it with, "Take a look at our current git diff-
- CVClaire Vo
Mm-hmm
- CHCJ Hess
... and give me a report on the following." And there's kind of four buckets, I would say. One, for the plan or diagram artifacts we have, does the code accurately reflect them? Two, are there any general code smells? And three, if we were to do this again, and take a different approach to refactor code around it, to overall improve this code base, what approach would be best? I want it to find places where we could have done this better, because I find that Claude is very eager [chuckles] sometimes, and maybe jams things in there without thinking about the bigger picture. And Codex, I don't think, is much better when it's writing code, but when it reviews, it almost always is like, "You've implemented this pattern, but it fits nicely if you just rebuild this system a little bit." And that just keeps your code base, like, away from all the vibe coding sins of having, you know, n- 10 format date functions all over your code.
- CVClaire Vo
Yeah, so I, I love this. I was gonna say, like, twin stars, because one of the things that I do when I, um, vibe code too close to the sun, which is I harness the power of Claude Code or whatever, and I just bite off a, like a fe... Like, a big, big old thing. And if you've ever done this with AI, you know, either Claude Code or Cursor, or whatever, and you sort of have a general idea of a feature, but then you're specifying the requirements as you go, as you see it, you sometimes end up with a monster diff. And when- what I've done a lot with that is I say, "Okay, this is basically what I want. Now, go write me a plan to re-implement this in a sane way, and then let's re- like, completely rebuild it." And so you can do this, like, review it and tell me how you do it better. You can also say, like, "This is a reference code base of, like, ex- kind of what I want to achieve. Let's go actually build a plan to build it in a more extensible, scalable way," and I found that to be a really useful flow as well.
- CHCJ Hess
Oh, I like that.
- CVClaire Vo
Yeah.
- CHCJ Hess
It's almost like... You're almost telling it like, "Hey, this isn't the real thing."
- CVClaire Vo
Yeah.
- CHCJ Hess
Hypothetically.
- CVClaire Vo
It's like... Yeah. It's kinda like code as spec, where it's like, now that code is so cheap to generate, you can say, "Generate a bunch of code. This isn't it- this isn't production. I'm fine throwing it away. Now, go build the, like, clean, clean version of it." So that co-
- CHCJ Hess
Absolutely
- CVClaire Vo
... that is a version of this I think is useful. I also agree, though, that Codex is, like, kind of a really good, curmudgeonly staff engineer that will look at your code and tell you what's wrong with it. Um-
- CHCJ Hess
Oh, yeah
- CVClaire Vo
... so I like, I like the model for this use case as well.
- CHCJ Hess
Every now and then I'll throw in, like, a "be extra critical," and then bringing that, [chuckles] bringing that prompt back to Opus, it gets a little sad, so-
- CVClaire Vo
[laughs]
- 41:52 – 45:13
The benefits of using AI for code review
- CHCJ Hess
[laughs]
- CVClaire Vo
So I wanna look at this just for... Again, you said Codex can, can take its time-
- CHCJ Hess
Yeah
- CVClaire Vo
... but it's going through and really checking if the feature aligns with the current code. Um, it's identified some issues, uh, use effect-
- CHCJ Hess
Mm-hmm
- CVClaire Vo
... just haunting us from every corner of, of our apps, so, um, that's a good one. And looking at some of the animations, which are probably pretty hard just, again, like, with our human eyes, to parse and visualize and understand.
- CHCJ Hess
Great. Okay, Codex, I was actually surprised it took this long. So it's talking about the diagram. It's kind of going through and mentioning a mismatch. It's saying the wheel rotation adds some of the segment angles, but the dots are defined at different angles-... this makes the pointer land between the dots rather than on the dot, which I believe is correct.
- CVClaire Vo
Mm-hmm.
- CHCJ Hess
So it noticed kind of-
- CVClaire Vo
Yep
- CHCJ Hess
... essentially this discrepancy, that we have a mock-up that has the arrow landing on a dot, and over here in the app, the arrow lands between the dots. So kinda little things like that-
- CVClaire Vo
Mm-hmm
- CHCJ Hess
... particularly around the, the checking the discrepancies, I really like when it finds. And then at the bottom, we have this, like, if we refactored this again, let's pull some of these things out into components.
- CVClaire Vo
Yep.
- CHCJ Hess
Let's make some constants. Kinda just, like, some classic, you know, one-shotted vibe code-y tips. And oftentimes from here, I'll actually just have Codex write it. Medium, GPT-5.2 Codex-
- CVClaire Vo
Yeah
- CHCJ Hess
... whatever the [chuckles] full model name is.
- CVClaire Vo
[laughs]
- CHCJ Hess
Um, I've found it's fine at editing files and writing them. Um, previously, like, you know, when GPT-5 first came out and they were working on Codex, that would've taken, like, 15 minutes-
- CVClaire Vo
Yeah
- CHCJ Hess
... so I'd hop back-
- CVClaire Vo
Yeah
- CHCJ Hess
... to Claude. But nowadays, I would, I would basically just say, "Great, please make those improvements." Maybe given more time, I would think up a more thoughtful prompt, make a plan about this, all those things, but here, I'll just kick it off.
- CVClaire Vo
Well, I mean, you did spell it correctly, so you did put some quality into, into this.
- CHCJ Hess
Yeah, I was, I was about to hit Enter, but-
- CVClaire Vo
[laughs] Okay, so, ah, I think this is a really, really great flow, and I would highly recommend it. You know, I, I think we're all trying to figure out, like, where does code review happen? There's also code review agents. There's also your CICD pipeline, which you said has a lot of ga- guardrails around it, so nothing hits prod that's really terrible and is gonna break the app. And I think this is just a great flow, especially I think for software engineers out there working on teams. Like, this is such a great flow to say, "Hey, designer, you gave me a spec. This is kind of what I'm gonna build. Are we good? If so, I'm gonna go." And then same with this loop on, um, kind of model-to-model evaluation, which is if you're a more junior engineer or early career, and you're gonna do your first couple PRs into, um, a company, it's nice to get that pre-flight check from a smart model to just say, "I thought about, oh, we could factor it this way," or, "I chose not to do this component that way." I think it's really useful. So this is a great-
- CHCJ Hess
Yeah
- CVClaire Vo
... just solid software engineering
- 45:13 – 53:07
Lightning round and final thoughts
- CVClaire Vo
flow. Love to see it. Okay, we're gonna skip to lightning-round questions. Thank you for showing us all the stuff that you're doing here.
- CHCJ Hess
Of course.
- CVClaire Vo
Let's talk about something fun. What are you most excited about right now in AI, outside of all this coding stuff?
- CHCJ Hess
I'm very deep in the code world, but I really like... Google released Genie 3 Access the other day.
- CVClaire Vo
Mm-hmm.
- CHCJ Hess
And I only- you only get, like, 60 seconds to play around in a world, but it's really fun, and I can totally see, you know, five months from now, six months from now, if we can get a 10-minute version, I think they can go viral. I think a ton of people are gonna have fun with them. I think that's, like, a big next step that isn't quite there but is super close.
- CVClaire Vo
Yeah, I, um- for those that don't know, Genie is this sort of, like, generate-a-explorable world. It sort of creates a video game-style world that you can, like, walk through and look through for 60 seconds. I don't know if you're... Are you showing it? I don't think you're showing it right now.
- CHCJ Hess
Oh, let me pop to this tab. Whoops.
- CVClaire Vo
I can pull it up, too. We can pull it up. Ah! [laughs]
- CHCJ Hess
Ooh. I have a Claude primed. Um-
- CVClaire Vo
Is it Mike, or is it Polly? [laughs]
- CHCJ Hess
I think this is Polly.
- CVClaire Vo
Which one?
- CHCJ Hess
I d- I didn't know Polly wears a leather jacket, but... [laughing]
- CVClaire Vo
[laughs] Okay, so you g- you used Nano Banana to, like, create an image, and then that image, you can create a world. It's kind of amazing.
- CHCJ Hess
Yeah.
- CVClaire Vo
Um-
- CHCJ Hess
It's really interesting how... I did not expect it to take an image and then make it.
- CVClaire Vo
Yeah.
- CHCJ Hess
But they have this whole flow on Project Genie if you have the-
- CVClaire Vo
Ultra
- CHCJ Hess
... I don't, I- yeah, I can't juggle all the account names.
- CVClaire Vo
It's cool.
- CHCJ Hess
But, um, one of the high accounts at Google, and it'll actually give you a prompt structure, where you're describing the environment, and then you describe your character. So I think for this, I just said, "An animated lobster in the Matrix." I did not specify [chuckles] a leather jacket, to be clear.
- CVClaire Vo
[laughs]
- CHCJ Hess
Um-
- CVClaire Vo
I guess in the Matrix, they're all wearing leather jackets, so [laughs] ...
- CHCJ Hess
Yeah, maybe let's make him cooler. Make him-
- CVClaire Vo
Cooler.
- CHCJ Hess
[laughs] Make the lobster be in a suit with sunglasses.
Episode duration: 53:07
Install uListen for AI-powered chat & search across the full episode — Get Full Transcript
Transcript of episode LC1mKvLWZ2E
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