Talk

UI Screenshot Analysis and Design Brief Generator

From Wikiprompt, the free prompt encyclopedia

André Farias
Contributed byAndré FariasSource

Jun 5, 2026

UI Screenshot Analysis and Design Brief Generator A prompt that turns a UI screenshot into a detailed design brief and JSONC spec, covering light/dark modes and Tailwind breakpoints, plus an implementation prompt for developers.

Prompt ContentSave

🌐
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.

Sign in to see the full prompt

Continue with:

By logging in, you agree to our Terms of Use and Privacy Policy

Usage

This prompt is designed for use with productivity. Copy the prompt content above and paste it into your preferred AI tool.

For best results, you may customize the placeholders (indicated by square brackets or capital letters) with your specific requirements.

References

Categories:productivity| prompts.chat| ui-design| design-brief

Talk