Skip to content

Design ThinkingProfiles

Vibe coding makes prototyping close to code, closer to users

Meet Quirine, a computational design manager exploring how AI reshapes the way her team builds and test ideas

  –   The estimated reading time is 9 min.

Illustration of a smiling woman with blonde hair sitting at a desk, in front of colorful bookshelves and green potted plants. Handwritten text above reads “Quirine van Walt Meijer.”.

Quirine van Walt Meijer is a computational design manager passionate about transforming raw ideas into valuable product experiences. She has gone from designing voice agents for cars to building tools for developers in Core AI. Her background in industrial design engineering helps her think about systems, people, and the messy middle where ideas take shape. 

Today, she and her team design experiences for developers who are building agentic systems and applications, striking a balance between functional and tasteful design. Her goal is to build delightful and intuitive experiences for developers through iterative prototyping with her team. Lately, her team has been vibe coding, bringing their ideas to life in more meaningful ways. We sat down with Quirine to learn more. 

What is vibe coding? 

At its essence, vibe coding refers to creating digital experiences where the creator expresses interaction goals in natural language, and an AI system translates that into working code and prototypes. The user acts like a creative director, guiding, testing, and refining AI-coded experiences instead of writing it line by line.  

What inspired your team to start exploring vibe coding in your design process? 

Design is evolving, and so are the ways we work. We are seeing a shift where designers prototype closer to code, test ideas in context, and collaborate more deeply across disciplines. A trend we are seeing across disciplines. 

Vibe coding allows designers to explore ideas with immediacy and intent. In our team, vibe coding is a way to sketch out the future of our next product experience, letting us innovate rapidly and see our ideas come to life at speed. It gives designers a way to move beyond Figma mockups and into interactive, testable experiences that reflect the complexity of real-world use. If we have an idea for uplifting an experience or spinning off a new feature, vibe coding lets us prompt, context engineer, and prototype that future much faster. It allows us to better communicate our ideas to our stakeholders by presenting them with something they can click through and understand. 

Vibe coding has now become another essential tool in our designer belt. We are learning as we go, figuring out how to ideate securely, make confident decisions, and stay open to what the future of design might look like. 

How has vibe coding changed the way you collaborate and design? 

Vibe coding has fundamentally transformed how we prototype and design. Before, our process was more focused on how things looked, relying on UI and mockups that present a visual user journey. Now, with vibe coding, we can prototype in environments that are much closer to the real thing, shaping not just the appearance, but the actual behavior of our experiences directly in the browser. That shift is powerful as it opens real time feedback loops. While taste and visual polish matter, vibe coding lets us bring motion, constraints, and accessibility considerations into the process much earlier. By collaborating with AI and engaging in prompt engineering, we can quickly surface those messy, real-world edge cases and “unhappy paths” that traditional workflow handoffs often miss until much later. This immediacy is incredibly rewarding, because we see our ideas come to life in code, closer to how our engineering partners would build them. 

We have also found ourselves ideating with developers earlier in our processes, deepening the mutual respect for each discipline. Our UX engineers in the team have empowered us in our learning journey around vibe coding through context engineering. They have set up collaborative environments, provided contextual information and tools in a secure format such that AI can accomplish our needs, and helped designers, PMs, and others get hands-on with our internal vibe coding tool.  In the spirit of prototyping through vibe coding, Will Eastler on my team built an internal computational prototyping tool that helps us share ideas in standard HTML, CSS and JavaScript. He recently wrote an article about this on the Microsoft Tech Community blog if folks would like to learn more. 

Through this, we are learning how to think structurally, closer to coders. We are understanding GitHub’s folder organization, and the logic behind application design. It has created an engaging middle ground where design, product managers and engineering come together, making the process more transparent, collaborative, and more impactful for everyone involved. 

What are some common fears designers have about vibe coding, and how did you build an inclusive culture to help overcome these fears? 

One of the most common fears I have seen among designers is the feeling of not being “technical enough” or wondering if they should just stick to what they know as coding can feel out of reach. This is not unique to design. It is something that crosses many disciplines. In our team, we have worked hard to create a safe space for experimentation, where everyone can play, learn, and grow together. As mentioned, our UX engineers have been instrumental in this, guiding designers through the process and reminding everyone that we are all learning as we go. We celebrate every small win, whether it is a first commit or a comprehensive new prototype, and we have built a secure environment where people can try things out without fear of failure. 

What is truly rewarding is seeing designers realize that, through vibe coding, they can directly address accessibility and create more inclusive experiences. Prompt engineering their way with ARIA requirements, tabbing, and reflow for different screen sizes right from the start. These are aspects that often felt abstract or delayed in traditional tools. It is a mindset shift, and it takes time. By sharing our “coded sketchbooks” and supporting each other, we are making vibe coding more approachable and collaborative. No matter which tool you use, there will always be differences, but at its core, vibe coding is about opening the process, learning together, and bringing ideas to life in a way that is more real and inclusive. 

How do you see vibe coding evolving in the next year or two? 

Looking ahead, I see vibe coding and context engineering become even more of a team sport, bringing together people from different disciplines to create in a truly collaborative way. As a Dutch designer, I am reminded of Johan Cruyff’s wisdom: “You play football with your head, because the ball is quicker than your legs.” In the same way, our work with vibe coding is about using our judgment, context, and human oversight to guide the process, as our tools become faster and more capable than ever. The pace of change in AI is relentless. There is always a new model, a new drop, and a new tweak that promises to make things better. But it is not about chasing every update; it is about applying our expertise, making sure the tools serve our context, our industry, and most importantly, our end users. 

As we continue to use and develop vibe coding tools, especially internally, it is crucial to keep our data secure and within our own domain. We have built internal environments where designers can experiment freely, knowing their work is protected and reviewed. But as more tools and providers emerge, we all need to be mindful of where our data goes and how it is used. The evolution of collaborative vibe coding will depend on our ability to stay human. This involves thinking critically, nuance, and remembering that, no matter how fast technology moves, we are steering the process. Play with your head, stay alert, and let your creativity and human judgment lead the way. 

What advice would you give to other design teams who are curious about trying vibe coding but do not know where to start? 

Worry less about achieving perfection and focus more on understanding and shaping behavior. The real value of vibe coding comes from seeing how your ideas work in context. These tools will continue to evolve and eventually catch up with your product’s styling and polish, but the most important thing is to just start—pick a secure vibe coding tool, begin small, and center your efforts on your users and their context. As you experiment, you will quickly discover how prompt and context engineering can bring your ideas to life, and you will learn whether your initial concept holds up or needs refinement. 

Do not keep your discoveries to yourself. Share what you have learned, invite others to collaborate, and, if possible, pair up with engineers. There is so much to gain from working side by side, seeing how developers approach problems, and letting them challenge or validate your solutions. GitHub Copilot is incredibly helpful in VS Code and getting comfortable in these environments will make you a stronger, more well-rounded designer. Vibe coding is about embracing the process, learning together, and letting curiosity drive you forward. 

Read more

To stay in the know with Microsoft Design, follow us on Twitter and Instagram, or join our Windows or Office Insider program. And if you are interested in working with us at Microsoft, head over to aka.ms/DesignCareers.