Créateur de briefs de mise en page responsive
Spécifiez les colonnes mobiles, tablettes et de bureau, les gouttières et le comportement de navigation. Prévisualiser une mise en page schématique et exporter un mémoire de mise en œuvre adapté.
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.
Le texte exporté reste en anglais ; vos saisies sont conservées telles quelles.
Pas d'inscription. Pas de crédits d'IA. Cet outil assemble votre sortie dans votre navigateur.
D'une idée à quelque chose d'utile.
- 01
Nommez l'écran et son contenu principal.
- 02
Choisissez les colonnes et la navigation à chaque point d'arrêt.
- 03
Inspectez le schéma et exportez le mémoire sensible.
Un peu de contexte.
Un bref réceptif capture les décisions que les captures d'écran laissent de côté : quand les colonnes changent, comment la navigation s'effondre, et ce qui reste dans l'ordre de lecture. Ce constructeur utilise des valeurs de point d'arrêt explicites et un aperçu schématique. Il ne génère pas ou ne vérifie pas l'interface réactive finale.
Bonnes questions.
Est-ce que cela affiche une page complète?
C'est pas vrai. Il crée une spécification de mise en page à utiliser avec votre constructeur ou votre équipe.
Les points d'arrêt sont-ils spécifiques au cadre?
C'est pas vrai. Le bref usage CSS pixel largeurs et décrit le comportement. Cartez-les sur vos jetons de point d'arrêt de projet.