Knak / 2026
Prototype Playground
Designed and built an AI-native prototyping tool inside the Knak monorepo that closed the loop between design, product, and engineering — generating production-ready UI from real design system components.
Design Highlights
Overview
I designed and built Prototype Playground directly inside the Knak monorepo so designers and front-end engineers could generate, iterate, and refine system-aligned UI with Claude Code. Every prototype uses real Vue UI components, CSS variables, design tokens, and application context, with Figma and Shortcut connected into the same design-to-production loop.
What I heard
Designers told me that external AI tools produced throwaway prototypes that ignored our design system. Engineers were still translating Figma mockups into production components by hand. PMs wrote Shortcut stories that described intent but never produced usable UI. Across the three groups, context disappeared at every handoff and smaller usability improvements struggled to compete for engineering time.
What I built
So I built the tool where the work actually lives: inside the monorepo. I integrated Claude Code with full application context, wrote custom Claude skills to enforce our standards, and trained the prompting on Vue UI components and design tokens. Generated output uses the same components, CSS variables, and constraints as the product from the first iteration.
How it works
I created a prompt-driven interface with a suggestion library, threaded refinement, resettable context, and element-level targeting for precise changes. I connected Figma for design import and export and Shortcut for product requirements, creating a bi-directional workflow between design intent, product specs, and production-ready code.
What moved
The Playground closed the gap between prototype and production by generating system-aligned output from day one. It kept design, product, and engineering context inside the monorepo, made smaller usability improvements easier to explore, and connected Figma, Shortcut, and production code in one reviewable workflow.
What I learned
I learned that AI prototyping becomes dramatically more useful when a real design system constrains the output. Building inside the monorepo kept prototypes honest and immediately usable, while custom Claude skills and system-aware prompting improved quality. The biggest gain was not generation speed; it was closing the loop between design intent and production code.