←Back/Engineering/Claude
AdvancedEngineering

Develop Features with AI Using Custom Visual Planning Tools

Turn a feature idea into a user flow, timing diagram, and UI mockups that your coding agent can use as the implementation plan.

Develop Features with AI Using Custom Visual Planning Tools

Source episode · 16:00

How I AI: CJ Hess on Building Custom Dev Tools and Model-vs-Model Code Reviews

with Claire Vo

CJ builds a spinner feature by turning one high-level request into a user flow, an animation timeline, UI mockups, and then working code.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A feature brief and the relevant repository context
  • A visual planning tool that stores diagrams as structured files, such as Flowy
  • An agent skill with the diagram schema and a few good examples

What you’ll make

A working feature implemented from reviewed user-flow, timing, and UI mockup artifacts.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Define the Feature and Request Visuals

Describe the behavior you want, point the agent at the relevant code, and request the specific planning artifacts you need before implementation.

Example prompt
Explore the existing code for the Tips & Tricks section. I want to replace the cards with a spinning wheel: the user presses a button, the wheel spins, selects a tip, and reveals that tip in a card below the wheel. Use the Flowy flowchart skill to create two artifacts before writing code: an animation timing sequence and a user flow for the page.

Ask for separate artifacts when they answer different questions. Here, the user flow captures behavior while the timing diagram captures the animation.

Step02

Generate and Review Flowcharts

Open the generated JSON files in the visual tool and inspect the sequence, edge cases, labels, and timing. Fix the plan while it is still cheap to change.

Keep the skill close to the tool. Include the current schema, required fields, valid styles, and examples that already render correctly.

Step03

Iterate on Plans Visually

Edit the diagram in the visual interface when something is wrong. Because the editor updates the underlying file, the agent can continue from the corrected artifact without a long explanation.

Example prompt
I updated the animation timing diagram so the wheel spins for four seconds instead of three. Read the updated file, confirm the new timing, and use it for the remaining planning work.

Change the source artifact instead of describing the same correction in every later prompt.

Step04

Create UI Mockups from Diagrams

Once the flow and timing are right, have the agent create low-fidelity screens for the important states: before the spin, during the animation, and after the tip appears.

Example prompt
Based on the approved user flow and animation timing diagram, create UI mockups with the Flowy UI mockup skill. Use existing Flowy mockup files in this repository as examples.
Step05

Build the Feature from Visual Plans

Give the coding agent the approved artifacts and let them carry the implementation detail. The visual files now serve as the plan and acceptance reference.

Example prompt
Build the feature from the approved flowcharts and UI mockups. When you are done, compare the implementation with each artifact and call out any intentional differences.

What good looks like

  • The diagrams make the feature states, transitions, and timing easy to review before implementation.
  • Changes made in the visual editor update the structured files the coding agent reads.
  • The finished feature follows the approved flow and mockups, including the intended animation timing and result state.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The generated diagram is invalid or hard to read
Add the missing schema rule and one correct example to the skill, then regenerate only the broken artifact.
The implementation drifts from the approved diagrams
Ask the coding agent to compare the current diff with each planning artifact, list the mismatches, and fix them one by one.

Keep building

Related workflows

How to Build and Run an E-commerce Business with AI as a Technical Co-Founder
advancedOperationsChatGPTCodex+1

How to Build and Run an E-commerce Business with AI as a Technical Co-Founder

A guide for solo entrepreneurs to manage business operations using AI. Learn how to source manufacturers, build and maintain an e-commerce site, and replace dashboards with voice commands, all without a human team.

Open
How to Prototype Complex Garments Using AI and 3D Modeling
advancedEngineeringChatGPTCodex

How to Prototype Complex Garments Using AI and 3D Modeling

Turn a complex, artistic concept into a manufacturable 3D model. This workflow shows how to use AI to generate a design from a photo and then create CAD files for 3D printing, even for previously 'unmanufacturable' items.

Open
How to Use AI for Fashion Design and Visualization from Sketch to Campaign
intermediateDesignChatGPT

How to Use AI for Fashion Design and Visualization from Sketch to Campaign

Learn to translate fashion sketches into a full suite of marketing visuals. This workflow covers creating a detailed design spec, generating a core product photo with AI, and iterating for different contexts like runway and influencer shots.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready