Hackathon prototype
Hackathon: Design Validation Without the Full Stack
A hackathon prototype that validates designs against live data - without building the full stack.
Problem
Designs look great in review. Reality is messier.
The gap. We design with beautiful images and complete data - but production entities often have sparse metadata, missing images, or truncated strings. By the time we discover the experience is broken, it's already been built and flighted.
The workaround doesn't scale. Even deliberate "sparse data" examples in design reviews are hand-crafted edge cases - not real-world data. And building in actual Bing to test against live data requires standing up the full stack, which isn't something you do mid-design iteration.
The same design, different realities - ideal data in Figma versus what real entities actually look like in production. Click to expand.
Approach
A coded prototype with purpose-built validation controls.
Why code? I explored Figma plugins and variable-linked data files, but landed on vibe coding a prototype directly in HTML using Claude. The decision came down to control - no plugin constraints, full flexibility, functionality on the fly.
Two parts. Inside a browser frame: a responsive implementation of the redesigned Local Result card. Outside it: controls purpose-built for design validation. Instead of debating hypotheticals in review, the team could look at actual Bing entities and ask - does this hold up? What breaks first?
Prototype
Responsive, interactive, and connected to real data.
The prototype runs fully in the browser - drag to resize, toggle the controls, and switch between real Bing entities to see how the design holds up across different data densities, locales, and breakpoints.
Switch between 11 and 12 column grid - Bing is currently mid-transition between the two.
Toggle the layout grid on and off for quick alignment checks at any viewport width.
Render the UI in German to pressure-test the layout with longer strings.
Each tab is populated with real data fetched directly from Bing - so instead of hand-crafted edge cases, we see how the design holds up across entities with wildly different amounts of information.
What's Next
Making data-driven prototyping replicable for the team.
Reception was overwhelmingly positive. The prototype unlocked conversations that design reviews couldn't - grounded in real data, real edge cases, real breakpoints.
They were excited to see this tool that eliminates the need to go through the stack to test design against real data. This is truly going to be a game changer!
Sanutha Venketraman, Principal Software Engineer at Microsoft AI
The next step: making it replicable. Getting the prototype accurately vibe coded took real effort starting from scratch. I'm working with the design systems team to build a starter template - pre-loaded with Bing components, design tokens, grid, and core UI - so future designers can spin up a data-validation prototype without the setup cost.