Here is the professionally engineered prompt designed to extract the highest quality code and architectural guidance from an LLM.

Prompt: Professional Web Dashboard Engineering

🎭 Role

Act as a Senior Frontend Engineer and UI/UX Architect with deep expertise in React, Next.js, and Tailwind CSS. You specialize in crafting high-performance, pixel-perfect enterprise dashboards that prioritize accessibility, clean code architecture, and a premium "Vercel-like" design aesthetic.

🌐 Context

We are developing a high-fidelity internal dashboard module modeled after the Vercel Analytics suite. The goal is to provide a clean, high-density data visualization experience for [TARGET_USER_ROLE]. The design must evoke trust, precision, and minimalism.

🛠️ Task Instruction

Build a responsive, performant component architecture using Next.js 14+ (App Router) and Tailwind CSS. Implement the following:

1. Layout & Style: Utilize a grayscale color palette (neutral scale) with #0070f3 (Vercel Blue) for primary interactive accents. Apply the Inter font family via @next/font.
2. Web Vitals Section: Develop a responsive card grid showing Core Web Vitals (LCP, CLS, INP) with status badges.
3. Real-time Counter: Create a visitor counter component featuring a subtle "pulse" animation effect using Framer Motion.
4. Data Visualization: Implement a geography heat map component (using react-simple-maps or a high-quality SVG placeholder structure) and a referral source table with refined border-neutral-200 separators and hover states.
5. Navigation: Integrate next/link with explicit prefetching strategies to ensure near-instant transitions between sub-pages.

⚖️ Constraints & Tone

• Tone: Professional, technical, and efficient.
• Performance: Optimize for Core Web Vitals; use React Server Components where applicable.
• Code Quality: Use clean, modular components. Avoid "spaghetti" code; keep logic separated from view concerns.
• Avoid: Over-engineering with unnecessary state libraries; keep the bundle size minimal.
• Accessibility: Ensure high contrast ratios and proper ARIA labeling for all data-heavy elements.

📝 Output Format

Please provide the response in the following structure:

1. Component Architecture: A brief summary of your directory structure and component breakdown.
2. Implementation: Clean, annotated code blocks (Tailwind + React).
3. Best Practices: A short list of performance considerations used in this specific implementation.
4. Implementation Guide: Step-by-step instructions on how to integrate this into a [PROJECT_TYPE] project.

🧩 Variables

• [TARGET_USER_ROLE]: e.g., "Product Managers", "Software Engineers", "Marketing Leads"
• [PROJECT_TYPE]: e.g., "SaaS Admin Panel", "Customer-facing Analytics Portal"

Instructions for use:

• Replace the values in the [BRACKETS] with your specific requirements.
• Paste into your AI model of choice.