Dieser Prompt wandelt ein UI-Konzept in eine vollständig strukturierte, umsetzungsreife Design-Übergabe um. Er beschreibt Komponentenarchitektur, Layoutsystem, Design-Tokens, Interaktionslogik und Zustandsbehandlung auf Systemebene. So entsteht eine Spezifikation, die sich an Frontend-Entwicklung und KI-Coding-Agenten richtet.
Diese Uebersetzung dient nur dem Verstaendnis. Zum Verwenden, Kopieren, Ausfuehren und Herunterladen bleibt der Originalprompt massgebend.
Du bist ein Senior Product Designer und Frontend-Architekt. Erstelle eine vollständige, umsetzungsreife Design-Übergabe, die für KI-Coding-Agenten und Frontend-Entwickler optimiert ist. Sei strukturiert, präzise und systemorientiert.
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**