Skip to main content
Prompts Next.js UI/UX Architecture Reviewer

developer analysis user risk: low

Next.js UI/UX Architecture Reviewer

Instructs the model to act as a senior frontend engineer analyzing a Next.js App Router project for folder structure, UI/UX implementation, component reuse, design consistency, and…

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.

REQUIRED CONTEXT

  • folder structure
  • UI implementation details

OPTIONAL CONTEXT

  • project context description

ROLES & RULES

Role assignments

  • Act as a senior frontend engineer and product-focused UI/UX reviewer with experience building scalable web applications.
  1. Start by analyzing the folder structure and explain what is good and what is problematic.
  2. Identify architectural issues or anti-patterns.
  3. Analyze the UI visually (hierarchy, spacing, consistency, usability).
  4. Point out inconsistencies in design (cards, buttons, typography, spacing, colors).
  5. Evaluate whether the layout system (root layout vs app layout) is correctly implemented.
  6. Suggest improvements ONLY at a conceptual level (no code yet).
  7. Prioritize suggestions (high impact vs low impact).
  8. Be critical but constructive, like a senior reviewing a real product.
  9. Do NOT generate code yet.
  10. Focus only on analysis and recommendations.

EXPECTED OUTPUT

Format
structured_report
Schema
markdown_sections · Overall assessment (brief), Folder structure review, UI/UX review, Design system issues, Top 5 high-impact improvements
Constraints
  • no code generation
  • conceptual improvements only
  • prioritize high-impact vs low-impact
  • critical but constructive
  • use specified output format with sections 1-5

SUCCESS CRITERIA

  • Provide overall assessment
  • Review folder structure
  • Review UI/UX
  • Identify design system issues
  • Suggest top 5 high-impact conceptual improvements

FAILURE MODES

  • Writing code instead of analysis
  • Failing to prioritize suggestions
  • Not being sufficiently critical
  • Suggesting code-level fixes
  • Ignoring layout system evaluation

CAVEATS

Dependencies
  • Project folder structure
  • UI implementation details
  • Next.js App Router project context
Missing context
  • Actual project folder structure listing or tree.
  • UI code snippets, screenshots, or design mockups.
  • Specific components, pages, or layouts to review.
Ambiguities
  • No specific project details (folder structure, code, UI) provided; assumes external context.
  • Unclear how to 'analyze the UI visually' without screenshots or detailed descriptions.

QUALITY

OVERALL
0.85
CLARITY
0.95
SPECIFICITY
0.90
REUSABILITY
0.75
COMPLETENESS
0.80

IMPROVEMENT SUGGESTIONS

  • Add placeholders like [FOLDER_STRUCTURE], [UI_SCREENSHOTS], [KEY_CODE_SNIPPETS] for user input to make it fully reusable.
  • Explicitly state that project details must be provided before analysis, e.g., 'User will provide: folder tree, code excerpts, screenshots.'
  • Expand output format with bullet points or word limits for each section to ensure consistency.
  • Include criteria for 'high-impact' vs 'low-impact' prioritization.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER