The gap between mock-up design and functional software
For years, digital product design has been built around static design tools. These tools create a controlled space to explore ideas, refine visuals, and communicate intent. But at the end of the day, a static design is just that: a picture of a product, not the product itself.
We’ve relied on prototypes to bridge this gap, but they often fall short. Clickable screens simulate interaction, but rarely capture the real behaviors, constraints, and nuances of a live experience. Real products are dynamic, shaped by responsiveness, animation, and state changes that static designs struggle to represent.
Moving beyond static design limitations
A static canvas only takes us so far. Many design decisions, how something responds to input, how animations feel, how navigation flows, can’t be fully evaluated until we interact with a real version. Traditionally, refining these details meant building high-fidelity prototypes or waiting for engineers to code a working version. Both time-consuming and costly processes. As a result, designers have often been expected to get everything “right” before development starts. This pressure can discourage bold ideas and limit creative exploration.
But what if designers could interact with real, working versions much earlier in the process? What if we could experiment in code without the traditional barriers? With AI-assisted coding tools, designers are discovering they can now move beyond faking interactions and go straight to testing real ones, leading to more confident design decisions.
Code as a creative medium
Good code is inherently structured and organised, which may seem at odds with using it as a medium for creative exploration. In reality, creativity thrives in code when we approach it as a space for experimentation rather than just execution. Traditionally, designers have been locked out of this space, but AI-assisted coding environments are changing that and giving designers hands-on access to code in ways that lower the barrier to entry.
Unlike traditional design tools, which are abstracted from the final product, designing in code allows iteration in the same medium that the product will ultimately run in. This means you can see and feel the real impact of your decisions and how interactions behave, how components respond, and where things break much earlier in the process. It surfaces gaps that are often hidden in static designs and helps align design intent with how the product will actually function.
Designing directly in code exposes real-world constraints that often remain hidden in visual design tools. Just as building materials influence a building’s construction, designs created in visually unrestricted software may not easily translate to the limitations of a development codebase. Working directly with code reveals these constraints early, allowing designers to account for them rather than discovering them too late in development.
Exploring multiple ideas fuels innovation
One of the biggest advantages of designing with code is the ability to quickly explore multiple ideas. If we only refine within familiar design patterns, we risk stagnation: producing designs that feel safe but uninspired. Even unpolished or unconventional alternatives often spark the most innovative ideas. Having the ability to build and test variations at speed encourages us to push boundaries and find new, innovative solutions.
This is where the concept of “vibe coding” comes in. A term generally used to poke fun at designers working with code in an intuitive, less structured way, it actually captures an important truth about the creative process. Design isn’t about having the perfect solution from the start. It’s about playing with possibilities. Responding to what feels right, and evolving ideas based on what we learn.
Low-cost experimentation leads to better outcomes
One of the major blockers to creativity has always been the cost of iteration. In traditional workflows, committing to code meant investing significant time and resources, making teams hesitant to explore beyond the first viable solution. But when designers can independently generate functioning prototypes quickly, the risk of exploring alternative ideas is dramatically reduced.
This shift means we’re no longer locked into a single design too early. Instead, we can explore multiple directions, gather feedback, and refine our ideas in ways that better reflect real-world constraints and user needs. But with that freedom comes a new challenge: knowing when to stop.
Boundaries make better prototypes
The ability to build more realistic, interactive prototypes at speed is powerful. But it also makes it easier to overbuild. Just because you can create a complex feature doesn’t mean you should, especially when your goal is to test a specific idea.
This isn’t a new challenge. Even before AI tools, teams had to distinguish between prototypes and production code. The key is staying clear on the purpose of the prototype. Are you validating a flow? Demonstrating a key interaction? If so, a lightweight version may serve you better and waste less time.
Without clear boundaries, it’s easy to fall into the trap of building systems that aren’t needed, only to later discard them entirely for production-grade implementations. Being intentional about fidelity helps align teams, manage expectations, and focus energy where it matters most: on learning, testing, and iterating.
The future of product design
The worlds of design and engineering are becoming more closely aligned, yet the mindsets we bring to code remain at opposite ends of the spectrum. And that’s a good thing. This difference is what drives innovation. Designers push creative boundaries, while engineers ensure feasibility and scalability. If designers were too concerned with perfecting code early on, their exploration would be stifled. Conversely, if engineers approached their work with the same imagination as designers, quality and stability would suffer.
This evolution of design, where code becomes a tool for exploration, means design is no longer a fixed blueprint but a dynamic, evolving process. Code isn’t just execution; it’s a tool for discovery. The best products aren’t designed first and built later; they emerge through real interaction, iteration, and collaboration. We’re not just creating polished screens; we’re shaping experiences in their real environment.
For me, working this way has created a stronger connection to the end product and a sense of creative ownership often missing from traditional workflows.
As the tools evolve, so does our approach. But one thing remains constant: creativity, iteration, and collaboration will always be at the heart of great design.
