Built as working context, not shelfware.
This resource is meant to be useful inside the tools where product work now happens: your codebase, your notes, and your AI-assisted workflow.
01
Paste the markdown into Claude, ChatGPT, Cursor, Codex, Gemini, or another AI agent as reusable project context.
02
Use it before a planning, implementation, review, or audit session so the agent has constraints, criteria, and working structure up front.
03
Adapt the sections to your product, team, or repo before asking the agent to execute against it.
Markdown previewdesign-to-code-handoff-checklist.md
# Design-to-Code Handoff Checklist Use this before implementation starts. The goal is to reduce guessing between design and engineering. ## 1. Product Intent - [ ] The screen has a clear user goal. - [ ] The primary action is named. - [ ] Secondary actions are ranked. - [ ] Required business rules are documented. - [ ] Non-goals and deferred behavior are explicit. ## 2. Component Inventory - [ ] Each repeated UI pattern maps to an existing component or a proposed new one. - [ ] New components have names that match the design system language. - [ ] Component variants are named by behavior, not appearance only. - [ ] Slot/content flexibility is clear. - [ ] Interaction ownership is clear: component, parent view, or route. ## 3. States - [ ] Default state. - [ ] Hover state. - [ ] Focus-visible state. - [ ] Disabled state. - [ ] Loading state. - [ ] Empty state. - [ ] Error state. - [ ] Success or confirmation state. - [ ] Long-content state. - [ ] Permission or unavailable state. ## 4. Responsive Behavior - [ ] Mobile layout is designed, not assumed. - [ ] Tablet behavior is defined for dense interfaces. - [ ] Desktop max width and alignment are specified. - [ ] Fixed-format elements have stable aspect ratios or dimensions. - [ ] Text wrapping is checked for the longest realistic strings. - [ ] Navigation and filters remain usable on narrow screens. ## 5. Tokens And Styling - [ ] Colors use semantic tokens where possible. - [ ] Type scale and weights match existing styles. - [ ] Spacing uses system values. - [ ] Border radius matches the local UI language. - [ ] Shadows, borders, and dividers are intentionally chosen. - [ ] Dark mode implications are captured if applicable. ## 6. Data And Content - [ ] Data fields are listed. - [ ] Required and optional fields are marked. - [ ] Example content includes realistic lengths. - [ ] Empty copy is written. - [ ] Error messages are written. - [ ] Date, currency, and locale formats are defined. ## 7. Accessibility - [ ] Headings follow a logical document outline. - [ ] Interactive controls have accessible names. - [ ] Keyboard order matches visual order. - [ ] Color contrast is checked. - [ ] Motion has a reduced-motion fallback when needed. - [ ] Icon-only controls have labels or tooltips. ## 8. Engineering Notes - [ ] API dependencies are named. - [ ] Feature flags are identified. - [ ] Analytics events are specified. - [ ] Testing expectations are clear. - [ ] Known tradeoffs are documented. - [ ] Acceptance criteria are written in observable terms.