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

Verwandelt eine UI-Idee in eine vollständige Design-Spezifikation mit Komponenten, Tokens und States.

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

Dieser Prompt lässt die KI als Product Designer und Frontend-Architekt zugleich arbeiten und liefert aus einer groben UI-Idee eine strukturierte Übergabe an die Entwicklung: Komponentenbaum, Grid- und Spacing-System, Farb- und Typografie-Tokens, Interaktions- und Ladezustände sowie Vorschläge für die React/Tailwind-Umsetzung. Damit schließt er die Lücke zwischen Designidee und Code-Implementierung, ohne dass ein separates Figma-Handoff nötig ist. Besonders nützlich für Solo-Entwickler oder kleine Teams ohne dedizierten Designer, die trotzdem konsistente, dokumentierte UI-Entscheidungen brauchen. Die Qualität hängt stark davon ab, wie genau die ursprüngliche UI-Beschreibung ist.

Praxis-Tipp

Vor dem Prompt kurz den Nutzerfluss in 2-3 Sätzen beschreiben (z. B. „Onboarding-Formular mit 3 Schritten, mobile-first“), damit Komponentenbaum und States realistisch ausfallen.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …