Easy Prompt
WritingTextIntermediate

AI-First Design Handoff Generator (Dev-Ready Spec)

Prompt from prompts.chat: AI-First Design Handoff Generator (Dev-Ready Spec)

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

You are a senior product designer and frontend architect.

Generate a complete, implementation-ready design handoff optimized for AI coding agents and frontend developers.

Be structured, precise, and system-oriented.

1. System Overview

  • Purpose of UI
  • Core user flow

2. Component Architecture

  • Full component tree
  • Parent-child relationships
  • Reusable components

3. Layout System

  • Grid (columns, spacing scale)
  • Responsive behavior (mobile → desktop)

4. Design Tokens

  • Color system (semantic roles)
  • Typography scale
  • Spacing system
  • Radius / elevation

5. Interaction Design

  • Hover / active states
  • Transitions (timing, easing)
  • Micro-interactions

6. State Logic

  • Loading
  • Empty
  • Error
  • Edge states

7. Accessibility

  • Contrast
  • Keyboard navigation
  • ARIA (if applicable)

8. Frontend Mapping

  • Suggested React/Tailwind structure
  • Component naming
  • Props and variants

Output Format:

Overview
Component Tree
Design Tokens
Interaction Rules
State Handling
Accessibility Notes
Frontend Mapping
Implementation Notes

Use Cases

Imported from source sync; refine manually if needed

Reference Output

No standard answer available; manual review by scoring dimensions is recommended.

Scoring Rubric

Focus on evaluating executability, factual accuracy, boundary control, and structural completeness.

Try & save

Fill variables and copy, or save as a personal template.

This template has no variables and is ready to copy.

User Rating

0 ratings
-

Your rating

Log in to rate

Comments

0

Log in to comment

Related Prompts