Chuki
01Product & PlatformHealth & nutritionLive
The web home of an AI food scanner: a barcode becomes a plain-language health score, with the reasoning one scroll below it.
Companion to a 1K+ download Play Store app
The person who designed it builds it.
Most Figma-to-code handoffs lose something — a spacing scale, an interaction, a state that was never drawn. When the designer and the developer are the same person, there's nothing to lose in translation.
DesignBuildGrowScale
01 — Scope
What this covers
- 01Front-end build in React and Next.js — component-accurate to the design, not approximately.
- 02Design tokens and a real component library, not one-off CSS per screen.
- 03Responsive behaviour across breakpoints, including the ones the Figma file didn't show.
- 04Accessibility built in — semantics, focus order, keyboard paths, contrast — not a retrofit.
- 05Performance: static rendering where it fits, tuned assets, a Lighthouse score you'd show a client.
02 — Fit
What a design engineer actually is.
Someone who sits between design and front-end and is fluent in both. It isn't a new skill set so much as an old one that stopped being split. It means design decisions get made with the build in view, and build decisions get made without a meeting. For you: a finished Figma file gets built the way it was drawn, by one accountable person.
03 — Work
Where this has shipped
Websites & BrandTravel & tourismLive
A travel operator's full catalogue — destinations, packages and themed holidays — organised around the three different ways people start planning a trip.
4.9★ across 612 Google reviews, surfaced on the site
Websites & BrandReal estateLive
A luxury villa project's website — architecture, configurations, interiors and location, structured around a single conversion: the brochure download.
East and West facing configurations, brochure capture, location proof
04 — Questions
Common questions
- Do you work from any Figma file?
- A well-structured one, yes. If the file needs work to be buildable, that's a short first step I'll quote separately.
- React only?
- React and Next.js are the default. Plain HTML and CSS for a marketing site. Vue or Angular case by case.
- Do you do the design too?
- Often — see the SaaS and mobile design engagements. But a build-only project from your file is completely normal.
- What do you hand over?
- A repo, a component library, a deployment, and documentation a next developer can read. Not a black box.
05 — More
Other engagements
- SaaS Product DesignIA, product UI and design systems for B2B platforms — built to stay coherent as the roadmap grows.View
- Mobile App DesigniOS and Android flows, interface and store assets — designed for the context the app is really used in.View
- MVP Design & BuildIdea to a shipped, validated product — scoping, design and front-end in one engagement, inside a quarter.View