A Handoff Workflow Reimagined with AI

For a very long time, our UI/UX workflow adopted a well-known sample: designers created screens in Figma, then builders translated these designs into code. Design and implementation occurred in separate instruments, with a handoff workflow in between.

That course of labored effectively after we had time to design and construct every expertise rigorously. On the most recent revamp of PubHub (a DevNet inner publication instrument), we didn’t. We would have liked to maneuver shortly, so we tried a distinct method: asking AI to construct the interface immediately from our consumer tales and backend APIs.

What adopted was a sequence of experiments that modified not solely our instruments, however how designers and engineers labored collectively. This weblog covers what we tried, what didn’t work, and the workflow we landed on, so different groups can adapt it.

A working product, with the unsuitable really feel

The AI-generated model labored finish to finish. Customers may transfer by means of the primary flows, and the interface was related to the backend. However “working” didn’t imply “completed.” The app didn’t comply with our visible language, some AI-generated elements weren’t intuitive, and several other workflows wanted cleanup.

Designer needed to assessment pages and flows on the working prototype one after the other, then refine styling and interactions. That raised a sensible query: how would possibly we leverage AI to expedite the workflow of creating design modifications and incorporating them into the ultimate product?

Making an attempt to deliver the interface into Figma

Our first choice was to transform the prevailing HTML pages into Figma, the instrument designers already use for mockups. With a Figma MCP connection, UI engineers may let Figma present context to a coding agent, which might make the corresponding modifications in code.

The thought was interesting: maintain the design work in Figma, and use AI to hold these modifications into implementation. In observe, three issues emerged.

• Element was misplaced in translation. The spherical journey between Figma and code missed interactions, full web page and button flows, and animations. These are precisely the elements of an expertise that make it really feel completed.
• Updates took longer than anticipated. Altering the HTML prototype by the use of Figma was slower than our timeline allowed. Some pages additionally needed to be reconstructed in Figma and reconnected into flows earlier than any refinement may start.
• The supply of reality turned unclear. With a Figma file and an HTML prototype evolving aspect by aspect, it was onerous for designers and remainder of crew to know which model was present.

Figma nonetheless did some issues effectively. It was the higher instrument for sustaining a library of belongings and for exact work on small, extremely detailed UI components. However it wasn’t the quickest place to refine an interface that already labored in code, beneath a good deadline.

Merging the design work with the prevailing implementation

We experimented one other route: utilizing an AI coding instrument to examine the prevailing prototype and alter its HTML immediately. This saved the design work within the interface that already existed, with no reconstruction step. The HTML prototype turned the one supply of reality.

Designers may then make modifications in levels, assessment every iteration, and provides the AI suggestions alongside the best way. As an alternative of first rebuilding the interface in a design instrument, design work occurred in opposition to a working implementation, together with the interactions and flows Figma had struggled to hold.

One sensible constraint surfaced shortly: token limits. Partway by means of the mission, designer ran out of tokens and moved from Cursor to Claude to Codex, switching instruments till limits reset. The work survived these switches as a result of the HTML artifact, not anyone instrument, held the state of the design. Groups adopting this method ought to plan for a similar factor.

With this method, designer may edit and ship working HTML pages shortly, turning out new iterations daily. Beneath the outdated Figma-first course of, a single web page took days.

The velocity compounded throughout the crew. Sooner design output meant sooner engineering checks, which meant sooner suggestions for the subsequent design iteration.

The brand new loop: design artifact, then implementation

The ensuing workflow is iterative:

1. Product crew defines consumer tales and backend APIs.
2. An AI coding agent builds an end-to-end model of the UI accordingly.
3. Designers assessment working HTML pages and flows, then refine the HTML prototype with an AI coding instrument.
4. Designers share the up to date HTML artifact to the builders, together with its design system, end-to-end flows for various personas, and a changelog describing what modified.
5. Builders give them to a coding agent, which works out and applies the design modifications to the actual mission.
6. The crew checks and evaluations the consequence, usually stay, and repeats the method.

The New Handoff Artifacts

The HTML prototype turned greater than a mockup. It was a handoff doc that engineers may use to breed the design precisely, and it was surprisingly effectively obtained. The next components made that doable:

• The HTML prototype. It turned the middle of this loop. It’s a concrete, inspectable artifact designers can refine immediately and builders can use to information modifications in manufacturing code.

• An embedded design system. Colours, typography, elements, and spacing lived alongside the pages, so engineers may reference the foundations quite than infer them from screens.
• A persona switcher. Our design required totally different consumer flows for various personas. By switching personas with a management within the prototype, engineers are capable of see every stream and its variations clearly.
• Changelogs. Every iteration recorded what had modified, so engineers may apply updates incrementally as an alternative of diffing complete pages.

Problem: Holding design and code in sync

Because the designer iterated, it turned onerous to inform what had modified between HTML variations. We first labored from a problem listing, prompting our coding agent one repair at a time, which was gradual and handbook.

So we requested the designer to incorporate a changelog with every new model. Now we give the changelog and the up to date HTML to the agent collectively, and it applies the modifications throughout the mission robotically. The handoff went from one-off prompts to a largely computerized replace step.

What we realized

The most important change wasn’t utilizing AI to write down extra code. It was shifting the design and engineering suggestions loop nearer collectively, till the road between the 2 roles began to blur.

That shift took some studying.

The sooner tempo modified the rhythm of the crew:

• Evaluations turned extra frequent. At occasions, designer made edits in actual time throughout conferences.
• Engineers examined sooner. With working prototypes arriving shortly, they might check, give suggestions, and even make minor design iterations themselves.
• Roles blurred. The separation between designer and engineer turned much less distinct. The entire crew may spend extra time on the expertise and the product imaginative and prescient, and fewer on implementation logistics.

In case your crew desires to do this method, these practices made the most important distinction for us:

• Begin from a working construct. Have an AI agent generate an end-to-end UI out of your consumer tales and API specs, then design in opposition to it quite than from a clean canvas.
• Maintain one supply of reality. Make the HTML prototype the canonical design. Use Figma the place it’s strongest, akin to asset libraries and wonderful element, with out sustaining a parallel copy of each display screen.
• Construct the handoff into the prototype. Embrace a design system, a changelog for every iteration, and a technique to view each persona or stream variation.
• Specify what the agent can’t infer. Doc secondary interactions and edge circumstances, or the coding agent will invent them.
• Plan for token limits. Count on to modify between AI instruments mid-project. As a result of the HTML artifact holds the design state, the work carries over.
• Shorten the assessment cycle. Overview extra usually, and be open to creating edits stay with engineers within the room.
• Maintain the designer’s judgment central. AI produces a useful first go shortly, however it doesn’t know your design language or which interactions really feel proper.

For us, the experiment produced a sensible sample: let AI create the primary working model, let designer refine a useful prototype that doubles because the handoff, and let a coding agent carry these refinements into the mission. That gave us a sooner path from an interface that labored to at least one that felt like our product.

This weblog is a part of the sequence of AI & Agentic Workflows in PubHub. To study extra about how we deliver the PubHub mission to stay with AI-assisted growth, learn right here.