When using "vibe-coding" tools, feed changes one at a time, such as typography, then a header image, then a specific feature. A single, long list of desired changes can confuse the AI and lead to poor results. This step-by-step process of iteration and refinement yields a better final product.
Building complex, multi-step AI processes directly with code generators creates a black box that is difficult to debug. Instead, prototype and validate the workflow step-by-step using a visual tool like N8N first. This isolates failure points and makes the entire system more manageable.
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).
AI development tools can be "resistant," ignoring change requests. A powerful technique is to prompt the AI to consider multiple options and ask for your choice before building. This prevents it from making incorrect unilateral decisions, such as applying a navigation change to the entire site by mistake.
The most creative use of AI isn't a single-shot generation. It's a continuous feedback loop. Designers should treat AI outputs as intermediate "throughputs"—artifacts to be edited in traditional tools and then fed back into the AI model as new inputs. This iterative remixing process is where happy accidents and true innovation occur.
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.
Instead of fighting for perfect code upfront, accept that AI assistants can generate verbose code. Build a dedicated "refactoring" phase into your process, using AI with specific rules to clean up and restructure the initial output. This allows you to actively manage technical debt created by AI-powered speed.
A powerful but unintuitive AI development pattern is to give a model a vague goal and let it attempt a full implementation. This "throwaway" draft, with its mistakes and unexpected choices, provides crucial insights for writing a much more accurate plan for the final version.
The panel suggests a best practice for AI prototyping tools: focus on pinpointed interactions or small, specific user flows. Once a prototype grows to encompass the entire product, it's more efficient to move directly into the codebase, as you're past the point of exploration.
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.
The initial fortune-telling app was too generic. By providing simple, natural language feedback like "make it kid-friendly" and "more concrete," the developer iteratively guided the AI to produce a more suitable user experience without writing a single line of code.