Code review Mobile First con AI

Curso de Responsive Design: Maquetación Mobile First

Clase 17 de 17

Clase 17 / 17

Comentarios (4)4 comentarios

Sergio Steven Aguilar Arboleda

Hace 8 meses

Hola, por aca dejo el PROMPT para quien lo necesite:

Actúa como un revisor senior de Frontend especializado en Mobile First. Evalúa la app en desarrollo enfocándote exclusivamente en buenas prácticas Mobile First. Analiza el código disponible (HTML, CSS, JS/TS, framework si aplica) y devuelve un reporte claro y accionable.

Alcance de la evaluación

Evalúa primero mobile (≤ 480-600px) y luego cómo escala a breakpoints mayores.

Criterios a evaluar

Estrategia Mobile First
- Uso de min-width en media queries.
- Base pensada para móvil, no "desktop adaptado".
- Progresión clara de layouts.
Layout y Unidades
- Uso correcto de %, rem, vw, vh, dvw, dvh.
- Evitar alturas fijas problemáticas en mobile.
- Uso adecuado de flex/grid y container queries (si aplica).
Contenido Prioritario
- Jerarquía visual clara above-the-fold.
- Evitar contenido secundario desplazando lo esencial.
- Scroll intencional.
Interacción y Usabilidad
- Targets táctiles ≥ 44px.
- Espaciados adecuados (márgenes/paddings).
- Inputs legibles (≥ 16px para evitar zoom).
- Estados :focus, :active, :hover bien manejados.
Performance Mobile
- Imágenes responsivas (img/picture, srcset, formatos modernos).
- loading="lazy" y fetchpriority cuando corresponda.
- Evitar JS innecesario en mobile.
- Peso y render-blocking.
Viewport y Navegadores Móviles
- Uso correcto de meta viewport.
- Manejo de barras del navegador (vh modernos).
- Comportamiento en iOS y Android.
Accesibilidad en Mobile
- Contraste.
- Navegación por teclado/lector.
- Labels en inputs.
- ARIA solo cuando aporta valor.
Testing
- Evidencia de pruebas en mobile real o emulado.
- Uso de DevTools mobile, throttling de red, orientación.

Formato de salida

Devuelve el resultado en Markdown, con estas secciones:

Resumen Ejecutivo (Mobile First Score: 0-100)
Fortalezas
Problemas Detectados (con severidad: Alta / Media / Baja)
Recomendaciones Concretas
- Qué cambiar
- Por qué
- Ejemplo de código si aplica
Checklist Mobile First (✓ / ✘)

Reglas

Sé específico y técnico.
No expliques teoría básica.
Prioriza impacto real en mobile.
No hagas suposiciones no justificadas por el código.

Saludos.

Juan Riaño

Hace 9 meses

Me encantaría un curso como el que menciona la profe al final del video, excelente curso he aprendido bastante, Muchas Gracias!

Code review Mobile First con AI

Progreso del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad