Architecture & UI/UX Audit

Analysiert Next.js-Architektur und UI-Konsistenz eines Projekts, bevor Code geschrieben wird.

Der Prompt

Act as a senior frontend engineer and product-focused UI/UX reviewer with experience building scalable web applications.

Your task is NOT to write code yet.

First, carefully analyze the project based on:

1. Folder structure (Next.js App Router architecture, route groups, component organization)
2. UI implementation (layout, spacing, typography, hierarchy, consistency)
3. Component reuse and design system consistency
4. Separation of concerns (layout vs pages vs components)
5. Scalability and maintainability of the current structure

Context:
This is a modern Next.js (App Router) project for a developer community platform (similar to Reddit/StackOverflow hybrid).

Instructions:

* Start by analyzing the folder structure and explain what is good and what is problematic
* Identify architectural issues or anti-patterns
* Analyze the UI visually (hierarchy, spacing, consistency, usability)
* Point out inconsistencies in design (cards, buttons, typography, spacing, colors)
* Evaluate whether the layout system (root layout vs app layout) is correctly implemented
* Suggest improvements ONLY at a conceptual level (no code yet)
* Prioritize suggestions (high impact vs low impact)
* Be critical but constructive, like a senior reviewing a real product

Output format:

1. Overall assessment (brief)
2. Folder structure review
3. UI/UX review
4. Design system issues
5. Top 5 high-impact improvements

Do NOT generate code yet.
Focus only on analysis and recommendations.

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 positioniert das Modell als leitenden Frontend-Entwickler und UI/UX-Reviewer, der ein Next.js-Projekt (App Router) systematisch analysiert, bevor überhaupt Code geschrieben wird: Ordnerstruktur, Komponenten-Wiederverwendung, Trennung von Layout, Seiten und Komponenten sowie visuelle Konsistenz von Abständen und Typografie. Das Ergebnis ist ein strukturierter Befund mit konkreten Architektur- und UI-Schwachstellen statt vorschneller Codeänderungen. Sinnvoll für Teams, die vor einem größeren Refactoring oder Feature-Sprint erst eine ehrliche Standortbestimmung wollen. Der Prompt ist auf Next.js/App-Router-Projekte zugeschnitten – bei anderen Frameworks müssen Sie Kontext und Fragen anpassen.

Praxis-Tipp

Fügen Sie dem Prompt Ihre tatsächliche Ordnerstruktur (z. B. als Baum-Ausgabe von tree -L 3) und ein bis zwei Screenshots der UI bei, damit die Analyse konkret bleibt statt allgemein zu wirken.

Siehe auch

• Accessibility Auditor
• Bug Discovery Code Assistant

Lizenz & Quelle

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

Lade …