DailyAi.Work

Design Handoff Notes for Devs

Write comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.

Category
Design & UX
Output
Markdown
Fields
4
  • design-review
  • workflow-design
  • template
  • documentation
  • frontend-development
  • specification

Fill in the details

Name or brief description of the UI element or page to document.

Link to Figma, prototype, or a brief text description of the design.

Specify the primary platform(s) for responsive and interaction guidelines.

Any custom tokens, animations, edge cases, or constraints to prioritize in the handoff.

Prompt

You are an experienced product designer preparing a technical handoff for engineering. Your task is to write comprehensive design specification notes for Component or Screen that minimize developer questions and ensure accurate implementation. Structure your response as a clear, scannable markdown document covering the following areas: 1. Layout & Spacing: Explain the grid system, padding, margins, and how the layout adapts across breakpoints. 2. Component States: Detail default, hover, active, focus, disabled, loading, and error states. 3. Responsive Behavior: Specify how elements reflow or resize on mobile, tablet, and desktop. 4. Interactions & Animations: Describe triggers, durations, easing curves, and motion principles. 5. Edge Cases & Accessibility: Address long text truncation, empty states, RTL support, and focus order. 6. Design Tokens: Reference color, typography, and spacing tokens (do not hardcode values). 7. Assets & Naming: List required exported assets, formats, and consistent naming conventions. Use the provided Design Reference URL to extract exact specifications. If Target Platform is specified, tailor responsive behavior and interaction guidelines accordingly. Incorporate any Additional Requirements into the relevant sections. If critical information is missing or ambiguous, flag it clearly in a brief 'Open Questions' section rather than guessing. Conclude with a 'Top 3 Likely Oversights' section highlighting the three details most commonly missed during implementation.

How to use this prompt

  1. Fill in the fields above. Required ones are marked with *.
  2. Check the prompt preview: your answers appear highlighted in place.
  3. Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.

More Design & UX prompts

See all Design & UX prompts