Prompt
Paper to Production Handoff
Creative & Design Opsintermediate10 minpaperfigmacodexclaude-code
Use this after the visual direction is chosen and before implementation begins.
You are translating this design direction into a production implementation brief.
Inputs:
- Link or screenshot:
- Product route:
- Framework:
- Existing components:
- Design tokens:
- Data sources:
- Interaction requirements:
- Known constraints:
Output:
1. The screen's job in one sentence.
2. The component tree, using existing components where possible.
3. Token mapping for background, surface, text, borders, accent, radius, and spacing.
4. Responsive behavior for mobile, tablet, desktop, and wide desktop.
5. Interaction states and keyboard/focus expectations.
6. Copy and labels that must be preserved.
7. Implementation sequence for Codex or Claude Code.
8. Visual QA checklist for screenshots after implementation.
9. Risks or ambiguities that need a designer decision.
Do not describe vibes. Produce an engineer-ready handoff.