Capability template for design and user experience
Design handoff record
Before engineering starts, the design owner gets one record built from the approved design: every state, token, breakpoint and content rule either covered or flagged, with each unstated behaviour written as a question. The engineer confirms the questions are resolved.
Listed under
Add it to a workflow in the Fully Powered Planner, beside the teams and roles that will run it. Book a fit call
The outcome
A static design shows one moment of each screen. The engineer still has to build the moments it leaves out: what the button does while it is working, what the list shows when it is empty, what happens to a long name on a narrow screen. Those gaps often surface mid-build, one message at a time, and each one is answered from memory or guessed.
This capability puts them on one page before the build begins. For every item in the design, the record lists the states it needs, marks each as shown in the design, documented by the component, or unstated. It names the tokens the design uses with their values, the layout shown at each screen width, the rule for each piece of content, and what each control does. Every gap is a numbered question addressed to the design owner. Nothing is filled in on anyone's behalf.
The design owner answers the questions and approves the record. The engineer confirms that every question is resolved and nothing is left to inference.
Who starts the work, and when
The design owner, or the designer who prepared the design, starts it when an approved design is ready to hand to engineering. Run it again if the design changes after handoff, with the corrected files. The engineer reads the finished record before estimating or building.
What they supply
- An inventory of the approved design: one row per component in one state at one width, with its screen, kind, content fields and tokens. A person writes this inventory, or exports it from the design tool; the assistant reads only what is written, so for a large design it takes real work.
- The component references: which states each component documents in your design library.
- The token list: names and values.
- The content rules: longest value and what happens when a value is longer.
- The interaction decisions made so far, if any.
- A few settings: the smallest supported width, your breakpoints, and who the design owner and engineer are.
What comes out
One record in a fixed order: items with their states and tokens, responsive behaviour by screen and breakpoint, content rules, interactions, the numbered questions for the design owner, anything set aside, and a sign-off block for the two people who decide. If a section has nothing in it, the record says None.
The record creates no design and invents no intended behaviour. Where the design says nothing, it asks.
An invented example
Illustrative example with invented data. The company, the product and every detail are made up. A design owner at an invented parcel-tracking company, Quillon Parcels, is handing one approved screen to the engineer who will build it.
What the person supplies
Settings: product Quillon Parcels customer web app; design Track a parcel, version 3; smallest supported width 360 px; breakpoints Small from 360, Medium from 768, Large from 1200; design owner and engineer as roles; today 2026-11-10.
Design inventory (item_id,screen,width,component,kind,state,content,tokens,description):
D1,Track a parcel,1280,Tracking field,Field,default,Tracking number,color.text.default; space.4,Label above a single-line input
D1,Track a parcel,390,Tracking field,Field,default,Tracking number,color.text.default; space.4,Same field at full width
D1,Track a parcel,1280,Tracking field,Field,error,Tracking number,color.text.error; space.4,Red outline and the message We cannot find that number under the input
D2,Track a parcel,1280,Track button,Control,default,,color.action.primary; space.5,Filled button labelled Track beside the field
D2,Track a parcel,1280,Track button,Control,disabled,,color.action.disabled,Grey button while the field is empty
D3,Track a parcel,1280,Delivery timeline,Data,default,Carrier note; Status label,space.6; color.text.default,Up to five events newest first with a note under each
D3,Track a parcel,390,Delivery timeline,Data,default,Carrier note; Status label,space.6; color.text.default,Events stack with the date above the status
D3,Track a parcel,320,Delivery timeline,Data,default,Carrier note; Status label,space.6; color.text.default,Events stack with the date above the status
Component references (component,states_documented,reference):
Tracking field,default; hover; focus; error,Design library Text field
Track button,default; hover; focus; pressed; disabled; loading,Design library Button
Delivery timeline,default; loading; empty,Design library Timeline
Tokens (token,value,used_for):
color.text.default,#1F2933,Body text
color.text.error,#B42318,Error messages
color.action.primary,#1456C8,Main buttons
color.action.disabled,#C9CED6,Disabled controls
space.4,16px,Gaps inside forms
space.6,24px,Gaps between list items
Content rules (rule_id,applies_to,max_length,overflow,format):
R1,Tracking number,24,scroll within the field,letters and digits only
R2,Carrier note,,wrap,
Interaction decisions (decision_id,item_id,trigger,result):
I1,D2,Tap Track with a number entered,The delivery timeline for that number appears
I2,D9,Tap Share,The share sheet opens
The record
DESIGN HANDOFF RECORD: Quillon Parcels customer web app, Track a parcel version 3
For: the design owner and the engineer. Prepared: 2026-11-10, from 8 inventory rows, 3 component references, 6 tokens, 2 content rules, 2 interaction decisions and the settings.
Column check: all headers matched.
Items: 3 on 1 screen(s). Required states: 13 covered, 2 unstated. Questions: 7. Set aside: 2.
ITEMS
Track a parcel
D1 Tracking field (Field); component reference: Design library Text field.
default: shown at 1280, "Label above a single-line input"; shown at 390, "Same field at full width"
hover: component library only (Design library Text field)
focus: component library only (Design library Text field)
disabled: Q1
error: shown at 1280, "Red outline and the message We cannot find that number under the input"
Also shown: none.
Tokens: color.text.default = #1F2933; space.4 = 16px; color.text.error = #B42318.
D2 Track button (Control); component reference: Design library Button.
default: shown at 1280, "Filled button labelled Track beside the field"
hover: component library only (Design library Button)
focus: component library only (Design library Button)
pressed: component library only (Design library Button)
disabled: shown at 1280, "Grey button while the field is empty"
loading: component library only (Design library Button)
Also shown: none.
Tokens: color.action.primary = #1456C8; space.5: Q2; color.action.disabled = #C9CED6.
D3 Delivery timeline (Data); component reference: Design library Timeline.
default: shown at 1280, "Up to five events newest first with a note under each"; shown at 390, "Events stack with the date above the status"
loading: component library only (Design library Timeline)
empty: component library only (Design library Timeline)
error: Q3
Also shown: none.
Tokens: space.6 = 24px; color.text.default = #1F2933.
RESPONSIVE BEHAVIOUR
Breakpoints: Small from 360 to 767; Medium from 768 to 1199; Large from 1200. Smallest supported width: 360.
Track a parcel, Small (360 to 767 px): D1, D3 at 390
Track a parcel, Medium (768 to 1199 px): Q4
Track a parcel, Large (1200 px and over): D1, D2, D3 at 1280
CONTENT RULES
Tracking number (on D1): rule R1: longest 24; when longer scroll within the field; format letters and digits only.
Carrier note (on D3): rule R2: longest Q5; when longer wrap; format no format stated.
Status label (on D3): no content rule. Q6.
INTERACTIONS
D1 Tracking field: Q7
D2 Track button: I1: Tap Track with a number entered -> The delivery timeline for that number appears.
QUESTIONS FOR THE DESIGN OWNER
Q1 D1 Tracking field: No disabled state is shown in the design or documented for Tracking field. What does it look like, and when does it appear?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q2 D2 Track button: The token space.5 is named for D2 but is not in the token list. Which token or value is meant?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q3 D3 Delivery timeline: No error state is shown in the design or documented for Delivery timeline. What does it look like, and when does it appear?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q4 Track a parcel, Medium: The design shows no layout for Track a parcel between 768 and 1199 px. What should the screen do there?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q5 Carrier note: Content rule R2 gives no longest value for Carrier note. What is the longest value that can occur?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q6 Status label: No content rule exists for Status label. What is the longest value that can occur, and what happens when a value is longer than the design shows?
Status: Open. Answer: ______ Answered by: ______ Date: ______
Q7 D1 Tracking field: No interaction decision is supplied for D1. What happens when the person uses it?
Status: Open. Answer: ______ Answered by: ______ Date: ______
SET ASIDE
Inventory row D3 default at 320: the width is below the smallest supported width of 360, so the row takes no part. Is 320 to be supported? If so, the smallest supported width in the settings changes and the record is run again.
Interaction decision I2: it names D9, which is not in the design inventory. Which item is meant?
SIGN-OFF
Design owner: has answered every question and approves this record: ______ Date: ______
Engineer: confirms all 7 questions are resolved and every set-aside line is dealt with: ______ Date: ______
Draft for the design owner. No design has been created or changed, no behaviour has been assumed, and nothing has been sent.
How the figures work out
- Eight inventory rows; the 320 px row is set aside, so seven are used.
- Required states: D1 is a Field with five (default, hover, focus, disabled, error), D2 a Control with six, D3 a Data item with four. That is 15. Covered: D1 four (default and error shown, hover and focus from the library), D2 six, D3 three (default shown, loading and empty from the library). That is 13. Unstated: D1 disabled and D3 error, so 2. 13 plus 2 is 15.
- Breakpoint ranges: Small starts at the smallest supported width, 360, and ends at 767; Medium is 768 to 1199; Large is 1200 and over. Rows at 390 fall in Small and at 1280 in Large; none falls in Medium.
- Seven questions: two states, one token, one breakpoint, two content, one interaction.
Where it fits
- Design and user experience, where the approved design is the last thing the design owner controls before building starts.
- Software engineering, where the engineer needs the answers before estimating, not after the first pull request.
- Software technology, where design and engineering hand work back and forth every sprint.
- E-commerce and retail, where long product names, empty carts and failed payments are the screens customers meet most.
- Professional services, where an agency hands an approved design to a client's engineers.
- Startups & new ventures, where one designer and a few engineers cannot afford a week of back-and-forth.
- Growth & scaling, where more teams build from the same design library and the unwritten rules stop travelling by word of mouth.
It is a different piece of work from Acceptance criteria sheet, which turns one story into testable expectations, and from Project handover readiness check, which checks a finished project before a receiving team takes it on. This one records what an approved design says and leaves open, before anything is built. It is also separate from Component specification, which documents one approved component in full for the design library.
What has to change for your company
Fix the column headers of your design inventory once, and decide who exports it from your design tool. Write your breakpoints and your smallest supported width into the settings. Know that breakpoint coverage is checked per screen, not per item: an item with no row in a range is not flagged, so a missing item at a width needs your own check. Decide whether your four kinds of item (static, control, field, data) and their fixed lists of states match how your design library is organised. Agree who the design owner is for each product, who answers when they are away, and where the answered record is kept for the engineer.
What has been checked
Fully Powered AI wrote this capability template. It was editorially reviewed on 10 November 2026. It was tried on its invented example in Claude on 10 November 2026; it was run twice, and the record of the second run, which was not blind, is published with it. It has not yet been tested in a client environment. It has not yet been tested as a packaged version in ChatGPT, Claude, Copilot or Gemini.
Testing in your environment means running it on a design that has already been built, with cases written in advance: a state the library documents but the design does not show, a token that is not in the list, a screen with no tablet layout, a content field with no length. The design owner checks every line against the design before anyone relies on the record. Acceptance criteria sheet is the place to turn the answered record into checks for a story.
The full capability template
Everything above is the outline. The complete capability template is the working version: the roles, the inputs, the procedure, the exceptions and stop conditions, the output format, the reviewer checklist, the acceptance tests, the instructions for an AI assistant and what to customize for your company. It comes with a download and the link to its folder in Fully Powered’s public repository.
Free with an account. Sign in by email: no password and no card.
Next step
Put this capability to work for your team: on your plan, or built with you in a sprint.
Build this in a sprint
In a sprint, Fully Powered adapts this capability template to your rules, proves it on your own work and puts it in the hands of the roles that own it.
Two ways to begin: