Refcat

A design handoff that explains behavior, not just screens

Refcat team10/27/2026

A developer can inspect a mockup and still have unanswered questions. Where does this content come from? Which action is allowed for a free account? What happens if the request fails? Is this label a sample or the final copy?

A useful handoff makes those decisions accessible at the point of implementation. It does not need to be a large specification. It needs to connect the screens to the rules, states, and evidence behind them.

Begin with the task and its boundaries

Write a short description of who uses the feature, what they are trying to accomplish, and where the flow begins and ends.

For example: “An admin selects up to 50 existing accounts and creates temporary subscription discounts. Each account receives a separate code. The admin can review failures and retry remaining recipients.”

This description already exposes several implementation questions: account selection, batch limits, discount terms, per-account identity, and partial completion. A polished form on its own may conceal all of them.

State the boundaries too. If sending emails is a separate action, say so. If existing paid invoices are not changed, include that rule near the discount behavior. Boundaries prevent a reasonable-looking implementation from expanding beyond the intended feature.

Annotate decisions where they matter

Keep short notes beside the relevant screen or transition. A note about retry belongs next to the failure state, not in a distant document.

Distinguish final decisions from open questions. “Use the customer's name with email underneath” is a decision. “Should the deadline use the operator's timezone?” is a question that needs resolution. Do not let an unresolved question look like a requirement by placing it in a finished mockup.

Link supporting references when they clarify the reasoning. A Refcat project can hold the flows you compared, while the handoff names the specific choice they informed. Engineering should not have to reverse-engineer your research board to find the intended behavior.

Describe the data contract in plain language

List the information the interface needs and which system owns it. Separate account metadata from billing state, and distinguish current values from historical records.

For a usage dashboard, “active users” needs a definition: which events qualify, which time window applies, and whether anonymous visitors are included. A number from a real database can still be misleading if its label describes something else.

For an export, distinguish authorization, conversion completion, and download action. These are separate facts. Naming them correctly helps both the implementation and the eventual analytics.

If an interface uses placeholder content, label it. Replace placeholders before acceptance checks so realistic names, long emails, empty fields, and large counts get exercised.

Specify states and permissions together

Include loading, empty, success, failure, and partial-success behavior. Add the permission or plan condition that changes each action.

A feature flag may control whether a capability is available, but server authorization must still enforce the underlying access rules. Hiding a button is not enough to define who can perform the action.

For batch operations, explain whether completed items stay completed after a retry. For forms, explain what input remains after an error. For destructive actions, specify the confirmation and the destination afterward.

Agree on acceptance scenarios

Use a handful of scenarios that design and engineering can run together. For the discount example:

  • Select accounts by name and email, including two people with the same name.
  • Paste a list containing duplicates and an unknown account.
  • Create promotions with valid terms and review each resulting code.
  • Simulate one recipient failing while others succeed.
  • Retry the failure and verify that successful recipients do not receive duplicate promotions.

These scenarios are more useful than checking whether the implementation resembles a single screenshot. Add keyboard use, narrow screens, and meaningful status announcements to the review.

Review the working flow

Once implemented, inspect the real interface with representative data. Follow the error paths and compare the result with the agreed behavior. Record any remaining limitation precisely rather than treating a successful build as proof that the feature works end to end.

Close the handoff when the important decisions are reflected in the working product and unresolved issues have clear owners. The goal is shared understanding that survives the move from design file to code.

Stop designing from a blank canvas. Brief your agent.