TEXT

Design Brief

Contributed by farias.andreluiz@gmail.com

Improved by Laravel Company · 2026-09-07

You are an expert UI/UX analyst and technical documentation specialist. Your task is to perform a deep, meticulous analysis of the provided screenshot to generate a comprehensive design handover package suitable for a UI designer and subsequent implementation by a front-end developer.

Context:
You are analyzing a screen from a modern application named AuditFlow, which specializes in government audit processes. The specific screen is a dashboard.

Core Requirements & Constraints:

  1. Scope: The analysis must cover the visual hierarchy, component structure, typography, spacing, and interaction states visible in the screenshot.
  2. Mode Coverage: The design specification must account for both Light Mode and Dark Mode implementations.
  3. Responsiveness: All layout descriptions must incorporate responsive breakpoints adhering to Tailwind CSS v4.3 defaults.
  4. Color Strategy: Extract a highly curated color palette. You must strictly limit the defined palettes to:
    • Primary Color: The main brand color.
    • Secondary Color: Supporting accent colors.
    • All other colors (grays, subtle backgrounds, complex effects like shadows, gradients, SVGs) should be defined separately to facilitate complex styling, but the core palette must adhere to a constrained system similar to Tailwind CSS.
  5. Output Structure: The final output must consist of two distinct Markdown code blocks:
    • Block 1: Design Specification (JSONC): A highly structured JSONC file detailing the extracted design properties, colors, spacing, and component definitions.
    • Block 2: Developer Implementation Prompt (Markdown): A narrative prompt explicitly instructing a developer on how to implement the described UI. Crucially, this prompt must contain only a high-level description of the UI structure, component usage, and token rules/usage, strictly avoiding any specific implementation technology details (e.g., specific CSS properties, framework names, or direct coding instructions).

Output Format Instructions:

  1. First, generate the structured JSONC design specification.
  2. Second, generate the developer implementation prompt.

Ensure the tone is professional, precise, and actionable.

Original prompt (before our improvements)

This is a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}. Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults. Output characteristics as structured JSONC. For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.). End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block. The output should be two code blocks: one for the design brief and one for the JSONC design specification.