Designing in Code

Bridging pixels and production with React, Storybook, and real AI workflows

Company

My Prototyping Lab

Industry

Tech / Design

Tags

Coded Prototype

Live Design System

Design-to-Code

AI Tooling

Duration

2 months

Why I Built It

After years designing AI products at Graft, I wanted to test myself differently: Could I design and ship a live product without a handoff? Could I build a UI system that scaled, visually and technically? Could I prove I wasn’t just fluent in design, but fluent in implementation? So I gave myself a constraint: build a working design system and coded prototype in weeks, not months. I called it Bright Bites. “I didn’t want to wait for an engineer to tell me it worked. I wanted to see it work.”

The Concept: AI, Packaged Simply

Bright Bites was both a technical test and a conceptual prototype: An app to help small business owners use AI as a co-pilot, improving conversion copy, SEO, and UX. It reflects a lesson I learned at Graft: Users don’t want flexibility. They want clarity, trust, and specific problems solved.

The Stack: What I Used and Why

Frameworks & Tooling: → React – core app framework → Storybook – for component isolation and live documentation → GitHub Pages – dual-branch deployment (app + Storybook) → Framer – for early visual prototyping Design-to-Code Workflow: → Sketched flows by hand → Prototyped interaction ideas in Framer → Build components using React, with styled JSX and clean prop contracts → Used ChatGPT and Claude to optimize logic, edge cases, and polish animations → Deployed live, component library and product, using optimized build settings

Technical Highlights

Typed, modular component design: I wrote all components with TypeScript and explicit prop interfaces, keeping logic self-contained and avoiding prop drilling. Layout helpers like <Spacing /> and <Divider /> made spacing and rhythm consistent across the app. State and scale clarity: By keeping logic co-located with UI components and only passing minimal props, the system is easy to maintain, test, and extend. If I needed to grow this product, I wouldn’t rewrite it, I’d scaffold on top of it. Deployment architecture: Storybook runs on a separate GitHub Pages branch to avoid conflicts. "You can’t design for engineers if you don’t understand where their systems strain. Bright Bites helped me analyze the development pipeline firsthand, so I can embed design where it adds the most value."

Why It Matters

Why It Matters

Why It Matters

Why It Matters

This wasn’t just a design exercise. It was proof that I can prototype real products, not just mockups. I don’t stop at Figma or Framer. I build coded components, hook up logic, and test interactions in the browser, so what I design actually works, and scales. I prototype in React, not just design tools I design systems that scale from sketch to deployment I can turn AI UX into working code, not just pitch decks I debug, ship, and polish, without waiting for a ticket cycle I don’t just collaborate with engineers, I am one when I need to be Designing in code helps me see what’s possible, move faster, and bridge the gap between idea and implementation.

Proof of Work

Proof of Work

Proof of Work

Proof of Work

Storybook Component Library - https://veruzka.github.io/bright-bites/ Bright Bites Live App - https://veruzka.github.io/bright-bites/ GitHub Repo – https://github.com/Veruzka/bright-bites

Create a free website with Framer, the website builder loved by startups, designers and agencies.