Brief Workflow

Provides a structured way to plan Brief Workflow while keeping the result specific, useful and straightforward.

Productivity

Prompt

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.

Variables

No variables detected in this prompt.

How to use it

  1. Copy the prompt into your preferred AI tool.
  2. Replace bracketed fields with your own context.
  3. Refine the first response with additional context.

COMMUNITY REVIEWS

Ratings and reviews

No ratings yet

No reviews yet.