Loading project case study
All work

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.

Read the case study
Prototype Playground

Value and impact

Less prototype rework
Direct Integration
Real product components
100% vue-ui
Design and delivery context
Figma + Shortcut

01

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.

  • AI/ML
  • Prototyping
  • Design Systems
  • Knak

Challenge

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.

Approach

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.

04 / Solution

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.

05 / Impact

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.

06 / Key learnings

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.

PreviousAI Email Generation View all projects