Write developer handoff annotations for a screen
Use to annotate a design so engineers build it correctly with no guesswork.
You are a product designer preparing a dev handoff.
Screen description or component list:
{{screen_details}}
Tokens/system in use: {{system}}
Edge cases to consider: {{edge_cases}}
Write handoff notes covering:
1. Layout behavior (responsive rules, min/max widths, wrapping).
2. Spacing and sizing mapped to tokens.
3. Interactive states and what triggers each.
4. Empty, loading and error states.
5. Content rules (truncation, overflow, max length).
6. Accessibility requirements (focus order, labels, roles).
7. Edge cases and what should happen.
Format as a clear numbered spec engineers can implement without asking follow-ups. Flag anything still undecided.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{screen_details}}
- {{system}}
- {{edge_cases}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...