How I AIDIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding
CHAPTERS
- 0:00 – 4:47
Meet CJ Hess: why Claude Code feels uniquely “steerable”
CJ explains why he enjoys developing with Claude Code, emphasizing its intent understanding and how naturally it follows his prompts. He frames Claude Code as the foundation for an ecosystem of personal tools he’s built around it.
- •Claude Code feels more steerable than alternatives for CJ
- •Strong “intent understanding” helps it dig deep when asked
- •CJ builds a personal tooling ecosystem around Claude Code
- •Skills + tools layered on Claude Code make it hard to switch away
- 4:47 – 7:06
AI changes the developer environment: from IDE preferences to custom AI workflows
Claire and CJ discuss how AI has shifted developer setup from standard IDE choices into highly personalized workflows. They highlight how modern models can resolve configuration and environment “chore problems” that engineers used to avoid.
- •Developer workflows can now be individualized without heavy cost
- •Models help with tedious setup/config issues (linters, IDE mismatch, repo setup)
- •Environment setup is an underappreciated high-leverage AI use case
- •Agentic loops make formerly “forever problems” solvable
- 7:06 – 8:24
Planning in markdown—and why ASCII diagrams break down
CJ shares his planning approach using markdown plans in a .plans folder, a format many engineers now converge on. The pain point: ASCII flowcharts (and even Mermaid) don’t provide the visual clarity he wants for UI and system flows.
- •Markdown planning files are effective for iterative spec/plan refinement
- •ASCII diagrams are visually painful and often misaligned
- •Visual thinking matters for navigation flows, system behavior, and UI
- •Mermaid still didn’t match the experience CJ wanted
- 8:24 – 10:45
Introducing Flowy: a prompted dev tool for flowcharts + UI mockups
CJ introduces Flowy, a custom tool he built (mostly via prompting) to render JSON into clean flowcharts and low-fidelity UI mockups. Claire frames it as an “AI-native” version of classic product flowcharts and wireframes.
- •Flowy renders JSON into flowcharts and UI mockups
- •Built largely through prompting; CJ calls it a dev tool experiment
- •Targets the gap between text plans and visual comprehension
- •Reimagines classic PM/design artifacts for AI-driven building
- 10:45 – 11:55
Why JSON + an editor beats text diagrams: iterative visual design loop
CJ explains the core design: a JSON schema with nodes/edges and styling that can be edited in a GUI-like editor. This makes iteration easy and gives Claude a file it can read as a more “native” representation than fragile text diagrams.
- •Flowy files: nodes/edges + colors + layout, rendered from JSON
- •Editor saves changes back into JSON for iteration
- •Claude can re-read the JSON after human edits and adjust accordingly
- •Goal: a Figma/Excalidraw-like workflow without hand-editing diagram text
- 11:55 – 15:33
Flowy vs Mermaid: building your own tool + updating skills as features evolve
They compare Mermaid’s advantage (LLMs already know it) with CJ’s preference for owning the constraints by extending Flowy directly. CJ describes his workflow of improving Flowy by updating agent skills whenever outputs fail (e.g., spacing, contrast).
- •Mermaid is LLM-native, but constrained by its syntax/features
- •CJ prefers extending Flowy + updating skills to match new features
- •Skills evolve via iterative feedback: fix failures, add rules (spacing, colors)
- •Confidence comes from controlling both tool and agent instructions
- 15:33 – 17:20
Live workflow demo setup: “Kevin mode” Claude Code with bypass permissions
CJ shows his practical terminal workflow, including permission-scope aliases that route to Claude Code with bypass permissions. They discuss when dangerous permissions are acceptable and how guardrails (git rules, checks) mitigate risk.
- •Terminal aliases map to different Claude Code permission scopes
- •CJ often runs with bypass permissions in personal/team-safe contexts
- •Guardrails in git/CI reduce damage from risky agent actions
- •Automations/skills can run pre-flight checks before PRs
- 17:20 – 19:34
Generating Flowy artifacts: user flow + animation timing diagrams from the prompt
CJ prompts Claude to explore the repo and create two Flowy flowcharts: a user flow and an animation timing sequence for a spinner-wheel feature. They review the generated diagrams, then iterate by adding a note (e.g., changing animation duration).
- •Prompt includes feature intent + request for two diagram types
- •Explorer sub-agents gather context across the codebase
- •Flowcharts capture states: tap, spinning gate, landing, tip reveal
- •Human edits diagrams (notes) and Claude updates artifacts accordingly
- 19:34 – 31:32
Inside the Flowy skill file: lightweight structure, examples, and living docs
They open the Flowy skill markdown and discuss what makes it work: purpose, quickstart, schema guidance, and examples. CJ notes he’s hands-off about formatting—he refines the skill based on failures and treats it as living agent documentation.
- •Skills are markdown files that define how the agent should operate
- •Effective skills include purpose, quickstart, schema/templates, examples
- •CJ uses a meta-skill to generate and maintain other skills
- •Skill updates follow real failures (e.g., semantic color system added)
- 31:32 – 33:31
UI mockups in Flowy: multi-state spinner designs and quick iterative edits
Claude generates a Flowy UI mockup for the spinner wheel with multiple states (spinning, loading, loaded). CJ highlights how he can tweak a title or element in the mockup and then ask Claude to propagate the change consistently.
- •Flowy can produce low-fidelity UI mockups with different UI states
- •Claude works around shape constraints to approximate a spinner wheel
- •Edits can be made in the editor and synced across mockups via Claude
- •Even imperfect mockups significantly accelerate alignment and building
- 33:31 – 36:51
From diagrams to shipped feature: skipping the plan and “just build it”
CJ demonstrates a high-trust workflow: using the Flowy diagrams and mockups as the plan, then instructing Claude to implement directly. They run the feature and confirm behavior (spin, land on a tip, show the card).
- •Artifacts (flowcharts/mockups) can substitute for a long markdown plan
- •CJ intentionally tests limits: minimal prompt, maximal execution
- •Claude implements, checks TypeScript issues, and produces a working UI
- •Result matches the mockup closely, with some shape-driven constraints
- 36:51 – 45:20
Model-to-model review: using Codex (“Carl”) to critique Claude’s changes
CJ explains how he uses Codex as a reviewer—looking for code smells, mismatches with diagrams, and better architectural approaches. Claire adds a pattern: generate a big diff quickly, then ask for a clean re-implementation plan to avoid “vibe coding sins.”
- •Codex review prompt focuses on diff vs artifacts, code smells, refactor ideas
- •Reviewer model catches mismatches (e.g., pointer landing vs dot angles)
- •Codex acts like a critical staff engineer; Claude can be too eager
- •Strategy: treat generated code as spec, then rebuild cleanly for production
- 45:20 – 53:07
Lightning round: Genie 3 worlds, prompting style, and releasing Flowy
They discuss Google’s Genie 3 and generating explorable worlds from prompts/images, including a humorous “Matrix lobster” example. CJ shares a calmer prompting style (treating models like junior devs) and previews plans to release Flowy plus its skills publicly.
- •Genie 3: short playable worlds; fun, near-viral potential
- •Example: image-to-world generation with quirky outcomes (backwards lobster)
- •Prompting technique: constructive feedback over yelling, with clearer intent
- •CJ plans to open-source/share Flowy and associated skills soon
