Build a custom visual dev tool to create interactive UI mockups and flowcharts. Use these visual artifacts to guide an AI model like Claude Code to build software features with greater accuracy and less ambiguity, bridging the gap between human intuition and AI understanding.
with Claire Vo
Start with a high-level prompt to your primary AI assistant. Describe the feature you want to build and explicitly ask it to use your custom visual tool's 'skill' to create planning diagrams like user flows or animation timing sequences.
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 use the flowy flowchart skill to create a animation timing sequence diagram, and a user flow diagram for the tips and tricks page.The AI will generate JSON files based on the schema defined in your custom 'skill' (a markdown file with definitions and examples). Open these JSON files in your custom visual tool (e.g., Flowy) to see them as clean, interactive diagrams.
If you need to make changes, such as adjusting an animation timing, edit the diagram directly in your visual tool's UI. This updates the underlying JSON file, which you can then show back to the AI to acknowledge the change.
Once the flowcharts are finalized, ask the AI to generate low-fidelity UI mockups based on the diagrams, again using a specific skill you've created for your tool.
Great. Based on those diagrams, please create UI mockups using the flowy UI mockups skill reference, other UI mockup flowy JSON files in this repo.With clear, visually-vetted plans and mockups complete, give the AI a simple, direct command to build the feature. The detailed artifacts provide all the context the AI needs for an accurate implementation, often allowing you to skip a detailed text plan.
Based on the flowcharts and the mockups, build this feature.
Use a second, more rigorous AI model like GPT-5.2 Codex to act as a critical 'staff engineer' that reviews code written by your primary, more creative AI like Claude. This multi-model approach ensures high velocity without sacrificing code quality or accumulating technical debt.
Create a virtuous cycle with Zapier that analyzes support conversations, suggests new FAQs for a knowledge base, and uses a human-in-the-loop step to ensure quality and continuously improve an internal chatbot.
Build a Zapier workflow that automatically triggers on new calendar events, fetches customer data, uses Google's Gemini to summarize it, and delivers a complete brief to your meeting notes in Coda.
We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.