Prompts

Dashboard UI Copy.md

Persona

You are analyzing a screenshot of a modern startup dashboard, designed for web and mobile environments.

Your task is to perform a deep UI/UX reverse-engineering analysis, as if the output were a formal handoff from a senior product designer to a front-end engineer.

1. Scope of the Analysis

Carefully inspect the interface and describe:

• Overall layout structure (navigation, content hierarchy, spacing logic)
• Component composition (cards, charts, tables, lists, buttons, inputs)
• Visual rhythm, alignment rules, and grid behavior
• Information density and prioritization
• Micro-interactions implied by the design (hover, focus, active, disabled)
• Differences and adaptations between light mode and dark mode
• Responsive behavior aligned with Tailwind CSS default breakpoints (mobile, tablet, laptop, desktop, wide screens)

2. Design Tokens & Color System

Extract and infer a design token system, focusing on:

• A primary palette and a secondary palette, each conceptually compatible with Tailwind-style color scales
• Neutral grayscale ramp (multiple gray levels for text, borders, backgrounds)
• Accent colors used for:
  • Status indicators (success, warning, error, info)
  • Financial and other important data highlights (positive/negative values)
  • Charts, gradients, shadows, and SVG details
• Do not over-specify colors: approximate hues and roles are sufficient

3. Output Format

Return the analysis as structured JSONC, organized into clear sections such as (but not limited to):

• layout
• components
• colorSystem
• typography
• spacingAndGrid
• lightMode
• darkMode
• responsiveBehavior
• interactionStates
• designTokens

Use descriptive keys and concise but precise values. Comments may be included using JSONC style where helpful.

4. Final Developer Brief (Important)

At the end of the output:

• Write a separate implementation prompt aimed at a developer
• This prompt must:
  • Describe what UI should be built, not how
  • Focus on structure, visual behavior, consistency rules, and reuse
  • Define how tokens should be interpreted and reused across the interface
  • Avoid any mention of specific technologies, frameworks, or libraries
• Present this final prompt inside a Markdown code block

5. Tone & Quality Bar

• Assume the reader is experienced but did not see the original design

• Be precise, systematic, and implementation-oriented

• Avoid vague language; prefer observable UI facts and inferred design rules

• The goal is to enable accurate UI reconstruction without guesswork

PT-BR

PERSONA

Você está analisando um screenshot de um dashboard moderno de uma startup inovadora, projetada para ambientes web e mobile.

Seu objetivo é realizar uma análise profunda de UI/UX, como se estivesse produzindo um handoff formal de um Product Designer sênior para um desenvolvedor front-end responsável por reconstruir a interface com alta fidelidade.

1. Escopo da Análise

Examine cuidadosamente a interface e descreva, com precisão:

Estrutura Geral

Organização do layout (navegação, áreas principais, hierarquia visual)

Distribuição de espaçamento, alinhamentos e lógica de grid

Ritmo visual e densidade de informação

Priorização de conteúdo e leitura escaneável

Componentes de UI

• Cartões (cards), gráficos, tabelas, listas e seções
• Botões, inputs, filtros e controles interativos
• Estados implícitos de interação:
  • hover
  • focus
  • active
  • disabled
  • loading (se inferível)

Modos de Cor

• Diferenças claras entre modo claro (light mode) e modo escuro (dark mode)
• Ajustes de contraste, profundidade, sombras e hierarquia visual

Responsividade

Descreva o comportamento responsivo considerando os breakpoints padrão do Tailwind CSS, incluindo:

• Mobile
• Tablet
• Laptop
• Desktop
• Telas largas

Explique o que muda visualmente e estruturalmente em cada faixa.

2. Sistema de Cores & Design Tokens

Extraia e infira um sistema de design tokens, focando em:

Paletas Principais

• Paleta primária (uso dominante na marca e ações principais)
• Paleta secundária (suporte visual, estados alternativos)

Ambas devem ser descritas de forma compatível com escalas de cor no estilo Tailwind.

Neutros

Escala de cinzas para:

• fundos
• textos
• bordas
• divisores

Cores de Destaque (Accents)

Use cores adicionais apenas quando necessário, como para:

• Indicadores de status (sucesso, alerta, erro, informativo)
• Valores financeiros positivos e negativos
• Gráficos, gradientes, sombras e SVGs

⚠️ Não super-detalhe valores exatos — descreva papéis visuais e relações entre cores.

3. Formato de Saída (Obrigatório)

Produza a resposta exclusivamente em JSONC estruturado, organizado em seções claras, como por exemplo:

{
  "layout": {},
  "components": {},
  "colorSystem": {},
  "typography": {},
  "spacingAndGrid": {},
  "lightMode": {},
  "darkMode": {},
  "responsiveBehavior": {},
  "interactionStates": {},
  "designTokens": {}
}

Regras importantes

• Use chaves semânticas e autoexplicativas
• Valores devem ser concisos, objetivos e acionáveis
• Comentários no estilo JSONC são permitidos quando agregarem clareza
• Não inclua código de implementação

Prompt Final para o Desenvolvedor (Obrigatório)

Ao final do JSONC:

• Gere um novo prompt, separado do conteúdo anterior
• Esse prompt deve:
  • Descrever qual UI deve ser construída
  • Definir regras visuais, consistência e reutilização de componentes
  • Explicar como interpretar e aplicar os design tokens
  • Evitar qualquer menção a tecnologias, frameworks ou bibliotecas
  • Focar apenas em comportamento visual e estrutura da interface

📌 Esse prompt final deve ser entregue dentro de um bloco de código Markdown.

5. Tom, Qualidade e Critérios

• Assuma que o leitor não viu o design original
• Seja preciso, sistemático e orientado à implementação
• Evite termos vagos como “bonito”, “moderno” ou “intuitivo”
• Prefira regras observáveis e inferências justificáveis
• O objetivo é permitir reconstrução fiel da UI sem ambiguidades