Promptles
Anti-Patterns

Verify the Translation

Don't trust pixel-perfect; diff against tokens and the screenshot.

Design-to-code is not a perfect roundtrip. Treat the output as a strong draft and check it: diff the rendered result against the screenshot, confirm it used the tokens you named, and look for the states and spacing the frame implied. Trusting 'pixel-perfect' without looking is how subtle drift ships.

Where you'll practice this

2 Promptles scenarios teach this principle directly. Each one drops you into a real engineering ticket and asks you to write the prompt you'd send to Claude Code.

  • Screenshot as Ground Truth

    Claude generated a component from a frame and it looks roughly right. But you've been burned before: last time the padding came out halved and a muted label was the wrong gray, and it shipped because nobody checked. You don't want to eyeball it again — you want Claude to verify…

  • Don't Trust Pixel-Perfect

    A teammate is about to merge an AI-generated implementation of a marketing section, calling it 'pixel-perfect, ship it.' You've watched this go sideways: small token drift, a missing focus state, spacing that's close-but-not-right. Before sign-off you want a concrete…

Other principles in Anti-Patterns