DIY dev tools: How this engineer created “Flowy” to visualize his plans and accelerate coding

2026-02-09 · Source: How I AI · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Advanced, extended

Summary

CJ Hess, an AI engineer, developed "Flowy," a custom dev tool that visualizes planning and accelerates coding by generating UI mockups and flowcharts from JSON files. Hess leverages Claude Code's intent understanding and steerability to build an ecosystem of personal tools, including Flowy, which was almost 100% prompted. Flowy addresses the limitations of ASCII diagrams and Mermaid by providing an interactive editor that saves changes to JSON, allowing Claude to read and iterate on designs. Hess also employs a model-to-model evaluation workflow using Codeex to review Claude's generated code, identifying discrepancies between diagrams and implementation, and suggesting refactoring improvements. This approach emphasizes building custom, AI-native dev tools for enhanced efficiency and control over the development process.

Key takeaway

For AI Engineers seeking to optimize their development workflow, building custom, AI-native tools like Flowy can significantly accelerate planning and coding. You should consider creating your own visual planning interfaces that generate structured data (e.g., JSON) for LLMs, allowing for rapid iteration and clearer communication with the AI. Additionally, integrate a model-to-model evaluation step using a different LLM to catch discrepancies and identify refactoring opportunities, ensuring higher code quality and maintainability in your AI-assisted projects.

Key insights

Custom AI-native dev tools enhance planning and coding efficiency by enabling visual iteration and model-to-model evaluation.

Principles

• AI models excel at intent understanding.
• Custom dev tools can be AI-generated.
• Visual planning improves human comprehension.

Method

Develop AI-native tools using LLMs to generate visual artifacts (e.g., UI mockups, flowcharts) from structured data (JSON). Iterate on designs in a custom editor, feeding changes back to the LLM. Use a second LLM for model-to-model code evaluation.

In practice

• Build custom tools for specific AI engineering workflows.
• Use JSON schemas for AI-generated visual diagrams.
• Employ a second LLM for code review and refactoring suggestions.

Topics

• AI Engineering
• Flowy Dev Tool
• LLM Skills
• Model-to-Model Evaluation
• Visual Planning

Best for: AI Engineer, Software Engineer, Prompt Engineer

Related on AIssential

• 🎙️ This week on How I AI: How to build your own AI developer tools with Claude Code — Custom AI-native dev tools and model-to-model evaluation enhance AI engineering workflows and code quality.
• Top 10: Low-Code or No-Code AI Tools — Low-code/no-code AI tools democratize development, enabling rapid application creation and workflow automation for diverse users.
• Why AI Engineers Are Moving Beyond LangChain to Native Agent Architectures — LLM orchestration frameworks trade development speed for clarity, creating "abstraction debt" in production.
• Day 4 - Agentic Engineering/VIbe Coding an AI App from Zero To Production | 🔴 Live — AI-assisted development streamlines application building, from backend integration to UI design and testing.
• [D] Self-Promotion Thread — The community is actively developing diverse open-source tools and frameworks for ML education, research, and practical applications.
• How to build your own AI developer tools with Claude Code | CJ Hess (Tenex) — Custom AI-native tools enhance developer workflows by transforming AI-generated plans into interactive visual diagrams.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by How I AI.