Pixel Poke / Guides

How to hand off CSS changes to a developer without screenshots

A CSS handoff is the moment a design change moves from the designer to the developer who ships it. Pixel Poke makes that handoff exact: you change the element visually on the live page and copy out the resulting CSS, so the developer gets values instead of a description.

By Itamar Katan, the designer who built Pixel Poke · How Pixel Poke was designed

The problem with "can we make this 16px?"

Most visual feedback arrives as words and screenshots. The developer has to translate it back into CSS, and small details get lost: which element, which breakpoint, which state, and what the new value really is.

When the designer can make the change directly on the page, the translation step disappears. The developer receives the same values the designer saw.

How the handoff works

  1. Open the page in Chrome and turn on Pixel Poke with Alt+Shift+D.
  2. Select the element and edit it visually: text, typography, colors, fills, spacing and layout. Drag, resize or nudge it with the arrow keys, with snapping and smart guides.
  3. Repeat for every element that needs to change. Pixel Poke keeps track of each edit.
  4. Copy the result. You can copy clean CSS, one rule for each changed element, or copy written handoff instructions ready to paste into a ticket.
  5. Paste it where your team works: a ticket, a pull request comment or a chat message.

Details that survive the handoff

  • Design tokens: connect your token file (plain JSON, DTCG or Style Dictionary, Tokens Studio or a Tailwind config) so values map to your system’s names instead of raw hex codes.
  • Stubborn styles: when a page uses !important, the preview still wins and the exported CSS keeps the same declaration, so what you saw is what ships.
  • Notes: pin a comment to an element to explain why a change matters, not only what changed.

FAQ

How do I give a developer exact CSS values for a design change?

Make the change visually on the live page with Pixel Poke, then copy the CSS it generates. You get one rule for each changed element, with the values you actually chose.

Do I need access to the source code?

No. Pixel Poke works on the rendered page in Chrome. You do not need the repository, a build setup or developer tools.

Can the exported CSS use our design tokens?

Yes. Connect a token file in the extension settings and Pixel Poke can bind values to your token names.