To rapidly iterate on interactive ideas in code, create your own version of "Command D." Instead of hard-coding values, build a simple control panel with variables for parameters like speed or distance, allowing for easy adjustment and testing of multiple variations.
Related Insights
Instead of being limited by off-the-shelf software, designers can dramatically accelerate their process by building bespoke tools. MDS used the AI tool V0 to create a custom bitmap icon builder, enabling rapid prototyping of a unique interactive element.
To test the interaction between physical buttons and the on-screen UI, the designer used a simple, reprogrammable keyboard from Etsy. The OS recognizes it as a standard keyboard, allowing for rapid, low-cost simulation of custom hardware controls directly within a Figma prototype.
Vercel's Pranati Perry explains that tools like V0 occupy a new space between static design (Figma) and development. They enable designers and PMs to create interactive prototypes that better communicate intent, supplement PRDs, and explore dynamic states without requiring full engineering resources.
AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).
The data-driven prototyping approach separates the UI from the content. This enables rapid iteration, allowing you to generate entirely new versions or localizations of a prototype (e.g., a trip to Thailand instead of Paris) simply by swapping a single JSON data file, without altering any code.
All tools are fundamentally decision-making aids. A great tool, like a color picker, isn't just about precision; it's about providing a quick feedback loop to compare options and a safety net (like undo) to explore changes without fear. This allows users to dial in their choices effectively and without destructive consequences.
Historically, resource-intensive prototyping (requiring designers and tools like Figma) was reserved for major features. AI tools reduce prototype creation time to minutes, allowing PMs to de-risk even minor features with user testing and solution discovery, improving the entire product's success rate.
Instead of providing a vague functional description, feed prototyping AIs a detailed JSON data model first. This separates data from UI generation, forcing the AI to build a more realistic and higher-quality experience around concrete data, avoiding ambiguity and poor assumptions.
Leverage AI as an idea generator rather than a final execution tool. By prompting for multiple "vastly different" options—like hover effects—you can review a range of possibilities, select a promising direction, and then iterate, effectively using AI to explore your own taste.
For complex, one-time tasks like a code migration, don't just ask AI to write a script. Instead, have it build a disposable tool—a "jig" or "command center”—that visualizes the process and guides you through each step. This provides more control and understanding than a black-box script.
