프롬프트 도감 › No.2232
웹앱 구조·화면 점검
Architecture and UI Audit
웹 프로젝트의 폴더 구조와 화면 디자인을 시니어 개발자처럼 비판적으로 살펴봐요. 코드는 쓰지 않고 문제점과 개선 우선순위 5가지를 알려줘요.
이럴 때 프로젝트 점검, 디자인 일관성 확인, 개선 순서 정하기
도구 ChatGPT · Claude · Gemini
프롬프트
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.
팁
- 폴더 구조와 화면 캡처를 함께 줘요
- Next.js 부분은 내 프로젝트에 맞게 바꿔요
출처
권리: CC0 (f/prompts.chat). 자유 사용. 기여자: [email protected].