Design Brief

🎨 IMAGE · Design advanced ⭐ 82

Analyze a UI screenshot and produce a structured JSONC design brief with light/dark modes and Tailwind breakpoints.

Fill in the fields:

The values will be inserted into the prompt below.

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.
#ui#design-brief#tailwind#jsonc

Кураторская подборка fizoni.com · структура, примеры использования и рабочие сценарии

Similar prompts

💡 Liked this prompt?

📦 AI Image Prompt Pack — 479 промптов

Вместо одного промпта — целый набор по теме. Готовые процессы, структура, быстрый старт. Промпты для генерации изображений: арт, дизайн, продуктовые фото.…

Забрать набор — $1.99 🎁 6 free prompts

Всего $1.99 · мгновенный доступ · оплата картой

🎁 Get the 6 best prompts for free

Liked this prompt? We've put together 6 more hand-picked ones — for business, code, and productivity. Plus access to the full library of 2000+ prompts.