Home / Prompts / Architecture & UI/UX Audit

Architecture & UI/UX Audit

Text promptDesignPublic domain (CC0)
54score

Install the skill first

This prompt works best with vercel-react-best-practices installed, so your agent knows Next.js's best practices.

mkdir -p .claude/skills/vercel-react-best-practices
curl -sL https://codeload.github.com/vercel-labs/agent-skills/tar.gz/063bee94c3f4df8453406c830b0a7df0f2860278 | tar -xz -C .claude/skills/vercel-react-best-practices --strip-components=3 "agent-skills-063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-best-practices"

Claude Code, pinned to commit 063bee94c3f4. Other agents: see the skill page.

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.

Context cost: ≈370 tokens when used.

Why this score

Quality checklist40/40
Community votes13/30
Editor pick0/15
Fill-in fields0/10
Discussion1/5

Quality checklist

  • Sets a role: yes
  • States a clear task: yes
  • Gives context: yes
  • Sets constraints: yes
  • Defines the output: yes
  • Breaks work into steps: yes

The checklist is automatic and applies the same rules to every prompt. It checks structure, not whether the output is good. Prompt scores aren't comparable with tool scores. How we rank

Security

Scanned Nov 4, 2026 at the text shown on this page, with Cisco's open-source skill-scanner.

None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.

A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan

Similar prompts

Prompts that do the same job, most voted first.

NameVotesScore
This oneArchitecture & UI/UX Audit Design ▲ 354
Make UI/UX better of an already Created Application Design Same job: ui design ▲ 256
Design System Extraction Prompt Kit Design Same job: ui design, also for Next.js ▲ 251
Rapid Prototyper Business & career Same job: ui design, also for Next.js ▲ 244
Next.js Specialized Front-End Developer Coding Same job: frontend, also for Next.js ▲ 259
Repository Security & Architecture Audit Framework Coding Both about audit and architecture ▲ 378