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 lässt eine KI erst analysieren, bevor sie Code schreibt: Ordnerstruktur (Next.js App Router, Route Groups), Komponenten-Wiederverwendung, Trennung von Layout/Pages/Components und die visuelle UI-Qualität (Hierarchie, Abstände, Konsistenz) werden systematisch geprüft. Gedacht für ein gewachsenes Community-Projekt à la Reddit/StackOverflow, bei dem sich Architektur-Altlasten und UI-Wildwuchs angesammelt haben. Der Wert steht und fällt mit dem Input: Ohne echten Ordnerbaum und Screenshots liefert die KI nur generische Best-Practice-Floskeln. Ideal als Vorstufe vor einem Refactoring, um Prioritäten zu setzen, statt blind drauflos umzubauen.

Praxis-Tipp

Vor dem Absenden echten Ordnerbaum (z. B. per tree-Befehl) und Screenshots der wichtigsten Seiten anhängen, sonst bleibt die Analyse oberflächlich.

Siehe auch

• Architect Guide for Programmers
• Accessibility Auditor
• Bug Discovery Code Assistant

Lizenz & Quelle

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

Lade …