Dieser Prompt hilft, ein Feedbackformular für ein bestehendes Nextjs, React und TypeScript Projekt zu erstellen. Er leitet die Analyse der visuellen Identität, die Komponentenstruktur, Animationen, Echtzeitvalidierung, Barrierefreiheit und responsives Design an. Das Ergebnis soll vollständigen, organisierten Code liefern, der in das System integriert werden kann.
Diese Uebersetzung dient nur dem Verstaendnis. Zum Verwenden, Kopieren, Ausfuehren und Herunterladen bleibt der Originalprompt massgebend.
Der Prompt weist die KI an, als erfahrener Frontend-Entwickler ein vollständiges und funktionales Feedbackformular mit Next.js, React und TypeScript zu erstellen. Zuerst soll das bestehende Projekt auf Farben, Typografie, Abstände, Animationen, Logo und visuelle Elemente analysiert werden, damit das Formular zur vorhandenen Markenidentität passt. Danach soll die Lösung mit modularen, wiederverwendbaren Komponenten, sauberer TypeScript-Typisierung und einer professionellen Ordnerstruktur geplant werden. Das Formular soll mobile-first responsiv sein, Animationen und Mikrointeraktionen enthalten, Echtzeitvalidierung, Ladezustände, Erfolgsmeldungen, Fehlermeldungen und relevante Tooltips nutzen. Das bestehende Logo und die angegebenen Markenfarben sollen sinnvoll in das Layout integriert werden. Die visuelle Gestaltung soll leistungsfähig umgesetzt werden, unter anderem durch optimierte Animationen, Lazy Loading, Code Splitting und optimierte Bilder, sofern passend. Vor dem Coden soll die KI die visuelle Identität, die Formularfelder, den Benutzerfluss, die verwendeten Bibliotheken, den Styling-Ansatz und die Interaktionszustände durchdenken. Die Aufgabe ist, kompletten, organisierten Code bereitzustellen, der Feedback erfasst, an den angegebenen Endpunkt oder die angegebene Aktion sendet und die definierten Vorgaben zu Barrierefreiheit, Responsivität, Performance, Package Manager und Node-Version einhält.
1<role>2You are an elite senior frontend developer with exceptional artistic expertise and modern aesthetic sensibility. You deeply master Next.js, React, TypeScript, and other modern frontend technologies, combining technical excellence with sophisticated visual design.3</role>45<instructions>6You will create a feedback form that is a true visual masterpiece.78Follow these guidelines in order of priority:9101. VISUAL IDENTITY ANALYSIS11Examine the existing project carefully to extract:12- Primary and secondary color palette13- Typography and visual hierarchy14- Spacing patterns and grid system15- Animation and transition styles16- Characteristic visual elements17- Logo and its application1819Reference material: ``2021Reason: Maintaining consistency with the established visual identity is essential for creating a cohesive and professional brand experience.22232. COMPONENT ARCHITECTURE24Structure the form using modular, reusable React/Next.js components:25- Create atomic components for inputs, buttons, and cards26- Implement TypeScript with strong and complete typing27- Organize the folder structure professionally28- Ensure full responsiveness (mobile-first)2930Target directory: ``3132Reason: A well-structured architecture facilitates maintenance, testing, and scalability.33343. EXCEPTIONAL VISUAL DESIGN35Elevate the visual standard with:36- Smooth and meaningful micro-interactions on every element37- Fluid animations using Framer Motion or similar libraries38- Transitions between states (hover, focus, active, disabled)39- Immediate visual feedback for each user action40- Depth effects with subtle shadows and gradients41- Glassmorphism or other modern effects where appropriate4243Design inspiration/references: ``4445Reason: Well-executed interactive elements and animations create a memorable experience and demonstrate attention to detail.46474. INTERACTIVE AND REACTIVE ELEMENTS48Implement features that increase engagement:49- Real-time validation with elegant messages50- Visual progress indicators51- Animated and contextual loading states52- Success/error messages with smooth animations53- Informative tooltips where relevant54- Entry animations when the form appears on screen5556Reason: Constant visual feedback keeps the user informed and confident during interaction.57585. LOGO INTEGRATION59Use the existing logo creatively:60- Logo location: ``61- Brand colors: ``, ``62- Position it strategically in the layout63- Consider subtle logo animations (pulse, glow, etc.)64- Maintain brand visual integrity6566Reason: The logo is a central element of the visual identity and should be highlighted with elegance.67686. OPTIMIZATION AND PERFORMANCE69Ensure visual richness does not compromise performance:70- Optimize animations for 60fps71- Lazy load resources where appropriate72- Code splitting for larger components73- Optimized images in modern formats7475Reason: A visually impressive form that loads slowly damages the user experience.76</instructions>7778<thinking>79Before starting to code, think step by step:80811. Analyze the existing project at `` and list specifically:82 - What colors are being used?83 - What is the typography style?84 - What types of animations already exist?85 - What is the general feel/mood of the design?86872. Plan the form structure:88 - Required fields: `` _(e.g. name, email, rating, message)_89 - How to organize them in a visually appealing way?90 - What flow makes the most sense for the user?91923. Choose libraries and tools:93 - Which animation library to use? (Framer Motion, React Spring, etc.)94 - Is a form library needed? (React Hook Form, Formik, etc.)95 - Which styling approach? `` _(e.g. Tailwind, Styled Components, CSS Modules)_96974. Define states and interactions:98 - What visual states will each element have?99 - What visual feedback will each action generate?100 - How do animations connect with each other?1011025. Verify that your solution:103 - Maintains consistency with the established visual identity104 - Is completely functional and responsive105 - Is well-typed in TypeScript106 - Follows React/Next.js best practices107</thinking>108109<task>110Create a complete and functional feedback form that is a visual masterpiece, using Next.js, React, and TypeScript. The form must:111112- Capture user feedback in an elegant and intuitive way113- Incorporate the project's visual identity (colors, typography, logo)114- Include animations and micro-interactions on all interactive elements115- Be fully responsive and accessible116- Demonstrate technical and artistic excellence in every detail117- Submit data to: `` _(e.g. /api/feedback or a server action)_118119Provide complete, organized code ready to be integrated into the system.120</task>121122<constraints>123- Maintain absolute fidelity to the established visual identity124- Ensure accessibility (WCAG 2.1 AA minimum)125- Code must be production-ready, not a prototype126- All animations must be smooth (60fps)127- The form must work perfectly on mobile, tablet, and desktop128- Package manager: `` _(e.g. npm, pnpm, yarn)_129- Node version: `` _(optional)_130</constraints>131132<output_format>133Structure your response as follows:1341351. VISUAL ANALYSIS136Briefly describe the visual elements identified in the existing project that you will use as reference.1371382. FILE STRUCTURE139List the folder and file structure you will create.140</output_format>141