Criador de briefings de layout responsivo
Especifique colunas móveis, tablets e desktops, calhas e comportamento de navegação. Visualize um esquema e exporte um resumo de implementação.
Briefing responsivo
Project dashboard
Content
Project cards with search, filters, and a create-project action.
Breakpoints
- Mobile: below 768px; 1 column(s); Menu button.
- Tablet: 768px to 1023px; 2 column(s); Compact sidebar.
- Desktop: 1024px and above; 3 column(s); Full sidebar.
Spacing
24px content gutters and grid gaps. Reduce spacing only where narrow screens require it.
Behavior
Preserve semantic reading order. Keep the primary action reachable and form labels visible. Avoid horizontal page scrolling. Test keyboard navigation, long content, zoom, and intermediate widths, not just the three examples. Reuse the project's breakpoint and spacing tokens where they represent these values.
O texto exportado permanece em inglês; seus dados são mantidos como foram digitados.
Sem registro. Nenhum crédito de IA. Esta ferramenta monta sua saída no seu navegador.
De uma ideia para algo útil.
- 01
Diga o nome da tela e seu conteúdo primário.
- 02
Escolha colunas e navegação em cada ponto de interrupção.
- 03
Inspecione o esquema e exporte o resumo sensível.
Um pouco de contexto.
Uma breve resposta capta decisões que as capturas de tela deixam de fora: quando as colunas mudam, como a navegação colapsa, e o que permanece em ordem de leitura. Este construtor usa valores explícitos de ponto de ruptura e uma previsão esquemática. Não gera ou audita a interface de resposta final.
Boas perguntas.
Isso produz uma página inteira?
Não. Cria uma especificação de layout para usar com seu construtor ou equipe.
Os pontos de interrupção são específicos?
Não. O resumo usa CSS Largura de pixels e descreve o comportamento. Mapeá-los para os sinais de ponto de interrupção do seu projeto.