When working on a complex website, de-risk the development of new, intricate features by building them in a completely separate repository. Use "gray boxing" to nail the feel and get approval on the isolated prototype before attempting to integrate it into the main, complex codebase.
For complex, parallel tasks that might conflict, use `git worktrees`. This creates separate, tracked copies of the codebase, allowing multiple AI agents to work on different features simultaneously without creating merge conflicts in the main branch.
When stakeholders interact with a feature built in actual code, it feels nearly finished. This creates an "aura of inevitability," shifting the decision from allocating resources for exploration to a simple "yes/no" on shipping the feature, which dramatically accelerates buy-in.
To enable AI-powered prototyping without production risks, large tech companies are creating separate, forked repositories for designers. This "designer playground" approach avoids the friction of production environments (e.g., linting, deploys) while providing a real-world starting point for stateful design exploration.
Instead of building components directly in your main project, create a dedicated "playground" file. This allows for rapid, isolated experimentation with different parameters and effects, generating reusable code that can then be easily integrated into your application.
When facing a major technical unknown or skill gap, don't just push forward. Give the engineering team a dedicated timebox, like a full sprint, to research, prototype, and recommend a path forward. This empowers the team, improves the solution, and provides clear data for build-vs-buy decisions.
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.
A prototype-first culture, accelerated by AI tools, allows teams to surface and resolve design and workflow conflicts early. At Webflow, designers were asked to 'harmonize' their separate prototypes, preventing a costly integration problem that would have been much harder to fix later in the development cycle.
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.
Instead of starting in Figma, prototype complex web animations using "gray boxing," a technique from game development. By using basic shapes and code (like HTML/CSS/3JS) to define the core flow and feel, you can validate the interaction's energy before investing in detailed visuals.
When exploring an interactive effect, designer MDS built a custom tool to generate bitmap icons and test hover animations. This "tool-making" mindset—creating sliders and controls for variables—accelerates creative exploration far more effectively than manually tweaking code for each iteration.