Creador de briefs de diseño responsive
Especifique las columnas móviles, tabletas y de escritorio, las tripulaciones y el comportamiento de navegación. Previsualizar un diseño esquemático y exportar un breve informe de aplicación sensible.
Brief responsive
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.
El texto exportado sigue en inglés; tus datos se conservan tal como los escribiste.
No hay señalización. No hay créditos de inteligencia artificial. Esta herramienta monta su salida en su navegador.
De una idea a algo útil.
- 01
Nombra la pantalla y su contenido primario.
- 02
Elija columnas y navegación en cada punto de ruptura.
- 03
Inspeccione el esquema y exporte el breve sensible.
Un pequeño contexto.
Un breve receptivo captura las decisiones que las capturas de pantalla salen: cuando las columnas cambian, cómo la navegación colapsa, y lo que permanece en el orden de lectura. Este constructor utiliza valores de puntos de ruptura explícitos y una vista previa esquemática. No genera ni audita la interfaz receptiva final.
Buenas preguntas.
¿Esto produce una página completa?
No. Crea una especificación de diseño para usar con tu constructor o equipo.
¿Los puntos de ruptura son específicos para marcos?
No. Los breves usos CSS píxel anchos y describe el comportamiento. Envíelas a las fichas de punto de ruptura de su proyecto.