Killing the handoff: prototypes engineers finish, not rebuild

Yandex · Search & AI · Product Design Lead · 2025 – present

Summary

Context

Yandex Search & AI, a 20-year-old, logic-heavy product. I own the design-to-code stream.

Problem

Figma can't show how Search behaves, so engineers rebuilt every design in code and corner cases surfaced only after launch.

What I did

Built a Chrome extension (a CPO's idea) that swaps the new design into live Search
Moved prototypes into the production codebase, opened on production by a test ID
Proposed a code-first process, which the team adopted

Result

A prototype is now a pull request engineers finish, not a mockup they rebuild; 6 design stages became 5.

Situation

Figma can't show how a 20-year-old, logic-heavy Search behaves. Engineers rebuilt every design in code, and its corner cases surfaced only after launch.

Goal: The designer hands over working code; the engineer verifies it instead of rebuilding.

Action

Validate on live Search, not in a mockup

A Chrome extension, a CPO's idea that I built, swaps the new design into the DOM of live Search while the code stays untouched. Corner-case bugs surfaced before launch instead of after. But every production change broke it, and it ran on desktop only. I flagged both limits from the start; they became the case for real builds.

Animation of a browser on a ya.ru results page with the Alice AI quick answer on top: the extension icon is clicked, its New design toggle turns on and the answer switches to its new layout, with its sources moving into a Sites panel on the right, then it turns off again — The extension: one toggle repaints the AI answer on live Search; the words and the code behind them stay the same

Move prototypes into the production monorepo

An AI agent builds the change in a branch; CI assembles a test build. Anyone in the company opens it on production Search or Alice by a 6-digit test ID, on their own device. Instruction files in the monorepo teach the agent to write like our engineers, so they verify and finish the PR instead of rebuilding it. It works for changes to logic and behavior; new visuals still start in Figma.

Animation of two windows: a 6-digit ID is typed into a Test ID window and applied, and the ya.ru page beside it reloads with the AI answer in its new design, from the test build — A 6-digit test ID opens the prototype's build of the AI answer on production Search

Start in code, not in Figma

A custom AI prototype invented its own components, held together with tape, so someone had to rebuild them by hand in Figma. Generated on our own design system, the model reuses our components, and anything new it makes sits on our tokens. I proposed a code-first process and the team adopted it: that manual assembly is gone, and dev guides, launch marketing and leadership decks now come from the prototype. Figma stays for new visuals.

Result

6 → 5 design stages after the team adopted my code-first process
6-digit test ID opens each in-code prototype on production Search or Alice

Assistant

Ask me about Tim

Tamirlan Askar

Lead Product Designer · 7+ years