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

Erstellt aus einer UI-Idee eine vollständige, entwicklerfertige Design-Spezifikation mit Komponenten und Tokens.

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

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Der Prompt positioniert die KI als Senior-Produktdesigner:in und Frontend-Architekt:in und erzeugt aus einer UI-Idee eine strukturierte Handoff-Spezifikation: Komponentenbaum, Layout-/Grid-System, Design-Tokens (Farben, Typografie, Spacing), Interaktionsdesign, UI-States (Loading, Empty, Error) sowie Accessibility- und Frontend-Mapping-Vorgaben, etwa für React/Tailwind. Das macht ihn besonders für KI-Coding-Agenten oder Entwickler:innen nützlich, die ohne Rückfragen direkt loslegen sollen, weil er Dinge explizit macht, die in klassischen Figma-Handoffs oft implizit bleiben. Anders als ein visuelles Design-Tool liefert er nur Text-Spezifikationen, keine echten Mockups – am meisten Nutzen bringt er, wenn bereits eine grobe Idee oder ein Screenshot vorliegt, die die KI in eine präzise, umsetzbare Spec übersetzen soll.

Praxis-Tipp

Lade zusätzlich einen Screenshot oder eine grobe Skizze der UI hoch bzw. beschreibe sie genau – die Qualität der Spezifikation hängt stark davon ab, wie konkret der Ausgangszustand beschrieben ist.

Siehe auch

• Accessibility Auditor
• Architect Guide for Programmers

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …