🛠️ Tools & Produktivität

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

📁 Tools & Produktivität 👤 Beigetragen von @mmanisaligil 🗓️ Aktualisiert 2026-04-19

Der Prompt

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**

0 Kopien

🚀 In ChatGPT öffnen ✨ In Claude öffnen 💎 In Gemini öffnen

So nutzt du diesen Prompt

Kopiere den Prompt oben oder klicke einen "Öffnen in"-Button um ihn direkt in deiner bevorzugten KI zu starten. Du kannst den Text dann an deinen Anwendungsfall anpassen — z.B. Platzhalter wie [dein Thema] durch echten Kontext ersetzen.

Welches KI-Modell funktioniert am besten

ChatGPT, Claude und Gemini liefern alle gute Ergebnisse für diese Art von Prompt. Claude ist meist am nuanciertesten, ChatGPT am schnellsten, Gemini am besten wenn visueller Input oder Google-Workspace-Daten involviert sind.

Diesen Prompt anpassen

Passe den Prompt an deinen konkreten Use-Case an. Ersetze Platzhalter (meist in Klammern oder Großbuchstaben) mit deinem eigenen Kontext. Je mehr Details du lieferst, desto präziser die Antwort.

Typische Anwendungsfälle

In ChatGPT, Claude oder Gemini sofort einsetzen
An dein spezifisches Projekt oder Branche anpassen
Als Startpunkt für deinen eigenen benutzerdefinierten Prompt nutzen
Mit verschiedenen Models vergleichen um das beste für deinen Fall zu finden
Im Team teilen als Standard-Workflow

Variationen

Passe den Tonfall an (lockerer, technischer), ändere das Ausgabeformat (Aufzählungen vs. Absätze) oder füge Einschränkungen hinzu (Wortlimits, Zielgruppe).