Ask for the design-system receipt
Check what a generated interface actually uses before trusting its resemblance to the design system.
Chris Carter1 min readDesign systems
A sketch raises a question, a product frame defines constraints, code exposes real states, and shared review turns the prototype into a decision.
Open diagram at full sizeA screenshot can look consistent while the implementation recreates components, copies tokens, or skips important states. Ask for a short receipt that connects the visible result to the actual system.
This is a review aid, not an automatic approval. Follow the references into the code and use the findings to make the next engineering conversation specific.
Put it to work
- Identify the design-system package and the components imported from it.
- List the tokens used and any local values or style overrides.
- Show the implemented loading, empty, error, permission, and recovery states.
- Check the component APIs, semantics, and keyboard behavior against the system's documentation.
- Record remaining assumptions and the smallest change that needs shared review.
Hypothetical example: a form looks correct but replaces the shared field component with local markup. The receipt makes that difference visible before the pattern spreads to other screens.
Read the full essay
This note is adapted from “Use Figma as the Napkin, Not the Finish Line.” The essay develops the argument, includes an interactive framework, and links to further reading.