Knak / 2026
Prototype Playground
Gave designers, product managers, and engineers one place to turn ideas into reviewable UI built from Knak's real components, reducing translation between prototype and production.
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
Designers could explore interactions using the same components and constraints engineers would ship, while product managers could bring requirements into the working experience instead of another handoff artifact. Engineering received reviewable, system-aligned UI with less interpretation and rework. For Knak, the Playground made smaller usability improvements more economical to explore and connected product intent, design decisions, and production code in one durable 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.