Documenting the design

You’ve been iterating design rounds with an AI and it’s finally been approved by stakeholders. You’re ready to hand it off to the developers, but where do you add all your comments and notes?

Preparing for the handoff

As nice as it would be to just hand off a link to the prototype, there are no doubt many places where you’ll need to add design notes and commentary to the design. While there are software tools that will let you do that, it can become costly ensuring everyone who needs to access the design and notes can do so. So what I’ve been experimenting with is uploading screens to a shared platform such as Figma (or Miro), laying out the designs in a screenflow from sign-in to sign-out, with all the alternative flows in between.

Manual vs automatic vs somewhere in-between

The brute force approach to uploading screens to your platform of choice is manually copying and pasting each screen as you work through each flow. The benefit of this approach is that you capture screens in the state you wish for your particular flow. Once you’ve pasted the screen, add a post-it or comment to the pasted item and document to your heart’s content.

If your flow is fairly straightforward and there aren’t a lot of alternative flows, you can try automating screen upload by giving your AI the destination URL and then simply asking it to push each screen in the flow from start to finish to the platform. Grab a coffee and hopefully by the time you return, you’ll see the series of screens laid out on the workspace before you. Then it’s a matter of rearranging and then adding notes. If there are any screens, or screen states that got missed during this process, you can supplement them by adding them manually.

If you’re using the Figma MCP, your coding agent can apply an overlay to the browser. You step through the app, click the area (or whole screen) you want captured, and the AI uploads it in the background. This semi-automatic approach keeps you in control while saving copy/paste keystrokes.

How to handle updates

Whichever approach or combination of approaches you use, you’ll now need to update screens after the initial creation of the workflows. My typical approach is to make updates to the prototype, validate them as per your process and then push up revised screens to the platforms. The semi-automatic or manual approach probably works best unless you’re needing to replace the entire flow. I’d like to experiment with AI to see if it will be able to identify and replace changed screens itself. The goal is to keep the design documentation living alongside the code, not as a one-time deliverable.

This is a ‘timbit’ post — an idea to expand on in the future