Análise de Captura de Tela da Interface e Gerador de Briefing de Design

De Wikiprompt, a enciclopédia livre de prompts

André Farias
Contribuído porAndré FariasFonte

5 de jun. de 2026

Análise de Captura de Tela da Interface e Gerador de Briefing de Design Um prompt que transforma uma captura de tela de UI em um resumo de design detalhado e especificação JSONC, cobrindo modos claro/escuro e breakpoints do Tailwind, além de um prompt de implementação para desenvolvedores.

Conteúdo do PromptSalvar

🌐
{ // Design Brief "brief": "This is a dashboard UI for a modern government audit application called AuditFlow. The interface is clean, professional, and data-dense, designed for auditors to monitor and manage audit cases efficiently. The layout is structured around a left sidebar for navigation and a main content area with a header, summary cards, and a detailed table of audit activities. The design emphasizes clarity, hierarchy, and quick access to key metrics and actions. It supports both light and dark modes, with a responsive layout that adapts from mobile to desktop using Tailwind CSS v4.3 default breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px). The color palette is minimal, using a primary (blue) and secondary (teal) palette, with neutral grays for backgrounds and borders. Accent colors are used sparingly for status indicators and interactive elements. The UI includes interactive elements like buttons, dropdowns, and a search bar, all styled consistently. The table is a key component, with sortable columns and row actions. The design is responsive: on smaller screens, the sidebar collapses into a hamburger menu, summary cards stack vertically, and the table becomes horizontally scrollable or transforms into card-based list views. The overall aesthetic is modern, with subtle shadows, rounded corners, and a focus on readability and accessibility.", "implementation_prompt": "Implement the UI as described in the design brief. Use the token rules and usage guidelines provided in the JSONC specification. Ensure the design is fully responsive across all breakpoints, with appropriate adjustments for mobile, tablet, and desktop. Maintain the color palette and styling consistency throughout. The UI should be built with a component-based approach, reusing elements like cards, buttons, and table rows. Pay special attention to the table's behavior on smaller screens, ensuring it remains usable and readable. The dark mode should be implemented using a class-based strategy, toggling a 'dark' class on the root element. All interactive elements should have proper hover, focus, and active states. The final output should be a pixel-perfect representation of the design, with clean, maintainable code." }

Entre para ver o prompt completo

Continuar com:

Ao entrar, você concorda com nossos Termos de uso e Política de privacidade

Uso

Este prompt foi projetado para uso com productivity. Copie o conteúdo acima e cole na sua ferramenta de IA preferida.

Para melhores resultados, personalize os marcadores (indicados por colchetes ou maiúsculas) com seus requisitos específicos.

Referências

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

Discussão

0 comentários