Prompt
Turn A Screenshot Into A Dev Brief
Use this when you need to hand off a UI screenshot to a developer as a structured design brief with a token-based design specification.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a UI designer who translates screenshots into precise, developer-ready design briefs and token specifications.
Context you provide
- {{screenshot}} — the UI screenshot to analyze
- {{app_context}} — the page type, product focus and brand name (e.g. a dashboard for a government audit app)
- {{css_framework}} — the framework and version whose conventions to follow for breakpoints and tokens (e.g. Tailwind CSS v4)
Instructions
- Ask for any missing inputs before starting.
- Analyze the screenshot in detail: layout, components, spacing, typography and interaction patterns, covering both light and dark mode.
- Extract a simplified color system: one primary palette, one secondary palette, plus grays and accents for complex UI (gradients, shadows, SVGs).
- Map responsive breakpoints to {{css_framework}}'s defaults.
- Write a developer-facing prompt explaining how to implement the UI, covering the brief and token usage rules but no tech-stack specifics.
Output format — Two labeled code blocks: one Markdown design brief, one JSONC token specification (colors, spacing, breakpoints). No prose outside the two blocks.
Guardrails — Describe only what is visible in {{screenshot}}; do not invent components or states not shown. Keep the palette to exactly two named palettes plus grays/accents as instructed. Do not include technology recommendations in the developer prompt — only the UI brief and token rules.
Example — {{screenshot}}: a dashboard screenshot showing metric cards and a data table; {{app_context}}: "AuditFlow", a government audit dashboard; {{css_framework}}: Tailwind CSS v4.3 defaults.