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."
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.
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

