HomeCasa Prompts

Estrategia de breakpoints y retícula responsive para una web o app

Define breakpoints basados en el contenido, retícula por rango de ancho, comportamiento de cada plantilla, container queries, imágenes responsive, matriz de pruebas y tokens CSS listos para usar. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.

Intermedio · Texto · Pendiente de revisión editorial

Pensado para:

Prompt

Actúa como diseñador de producto y desarrollador front-end especializado en diseño responsive.

Contexto:
- Producto o sitio: {{producto}}
- Plantillas de página principales: {{plantillas}}
- Datos de dispositivos y anchos de pantalla: {{dispositivos}}
- Tecnología: {{tecnologia}}
- Contenido prioritario en pantallas pequeñas: {{prioridad}}

Entregables:
1. Enfoque: por qué definir breakpoints según dónde se rompe el contenido y no según modelos de dispositivo, y si conviene mobile-first.
2. Propuesta de 3-5 breakpoints con su justificación, en px y em.
3. Retícula por rango: columnas, medianil, márgenes laterales y ancho máximo del contenido.
4. Tabla de comportamiento por plantilla y breakpoint: navegación, cabecera, rejillas de tarjetas, tablas, formularios, imágenes y barras laterales.
5. Componentes que deberían usar container queries en lugar de media queries, con ejemplos.
6. Tipografía y espaciado fluidos con clamp() coherentes con los breakpoints.
7. Imágenes: srcset y sizes, dirección de arte con picture y formatos modernos.
8. Diferencias entre táctil y puntero: media queries hover y pointer, tamaños de área táctil.
9. Matriz de pruebas: anchos clave, zoom al 400 % y reflujo a 320 px CSS (WCAG 1.4.10), orientación y tamaño de texto aumentado.
10. Tokens y código de ejemplo para la tecnología indicada.

Restricciones:
- No inventes datos de analítica; si faltan, usa [COMPLETAR: porcentaje real por ancho] y explica cómo obtenerlos.
- Prioriza lo que necesita el usuario en móvil; no escondas contenido esencial.
- Si falta información clave sobre las plantillas, pregúntame antes.

Formato: encabezados numerados, tablas para retícula y comportamiento, y bloques de código.

Cómo usarlo

  1. Indica tus plantillas principales y, si los tienes, los datos reales de anchos de pantalla. 2. Revisa la tabla de comportamiento con diseño y desarrollo. 3. Lleva los tokens a tu código y ejecuta la matriz de pruebas en cada plantilla.

Ejemplo de uso

Producto: web de una cadena de hoteles · Plantillas: inicio, listado, ficha de hotel, reserva · Tecnología: Tailwind · Prioridad: fechas y precio.

Resultado de ejemplo

1. Enfoque

Mobile-first, con cortes donde el contenido se rompe (por ejemplo, cuando la tarjeta de hotel ya no cabe en una columna), no por modelos de dispositivo. Datos de uso: [COMPLETAR: % de visitas por ancho de pantalla]; se obtienen de la herramienta de analítica agrupando por ancho de ventana.

3. Retícula

RangoColumnasGutterMargenAncho máx.
< 640 px (40em)416 px16 px100 %
640-1023 px824 px24 px100 %
1024-1279 px1224 px32 px100 %
≥ 1280 px (80em)1232 pxauto1200 px

4. Comportamiento en la ficha de hotel

  • Móvil: selector de fechas, precio por noche y «Reservar» en una barra fija inferior; nunca se ocultan.
  • Escritorio: tarjeta de reserva fija en la columna derecha (4 de 12).

10. Tokens en Tailwind

// tailwind.config.js
module.exports = {
  theme: {
    screens: { sm: '40em', md: '48em', lg: '64em', xl: '80em' },
    container: {
      center: true,
      padding: { DEFAULT: '1rem', sm: '1.5rem', lg: '2rem' },
    },
    extend: { maxWidth: { content: '75rem' } },
  },
};

Los breakpoints en em respetan el zoom de texto del navegador…

Datos clave

Categoría
Diseño UI/UX · Diseño responsive
Tipo de resultado
Texto
Nivel
Intermedio
Pensado para
ChatGPT, Claude, Gemini y Microsoft Copilot
Verificado en
Pendiente de verificación editorial
Variables
Producto o sitio, Plantillas principales, Datos de dispositivos, Tecnología y Contenido prioritario en móvil
Idioma
Español
Precio
Gratis, sin registro
Actualizado
07/11/2026

Preguntas frecuentes

¿Debo usar los breakpoints de mi framework CSS?

Son un buen punto de partida, pero conviene ajustarlos a dónde se rompe tu contenido. El prompt te dice si los valores por defecto encajan o si necesitas añadir o mover alguno.

¿Qué son las container queries y cuándo usarlas?

Permiten que un componente cambie según el ancho de su contenedor y no de la pantalla. Son útiles para tarjetas o widgets que aparecen en columnas de distinto ancho.

¿Para qué sirve este prompt?

Define breakpoints basados en el contenido, retícula por rango de ancho, comportamiento de cada plantilla, container queries, imágenes responsive, matriz de pruebas y tokens CSS listos para usar.

¿Con qué herramientas de IA funciona?

Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.

¿Cómo personalizo el prompt?

Pulsa «Personalizar» y rellena las variables (Producto o sitio, Plantillas principales, Datos de dispositivos, Tecnología y Contenido prioritario en móvil). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.

¿Necesito experiencia para usarlo?

Es de nivel intermedio: conviene que conozcas el tema para aportar buen contexto y revisar el resultado con criterio.

¿Este prompt es gratis?

Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.

¿Puedo fiarme del resultado de la IA?

Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.

Prompts relacionados