La misión
Elige un negocio —tuyo, de un amigo, o inventado con convicción (taller de bicicletas, cafetería de especialidad, dentista del barrio)— y construye SU página: un hero que enganche en 60 segundos, una sección que sorprenda, y un formulario de contacto/agenda que valide y confirme sin recargar la página. Sin backend: el frontend de M5 completo, del lado donde la IA escribe y tú diriges. Se publica al final: tu primera URL real del curso.
La ruta, en cinco tiempos
Ruta del proyecto 1
1 · Especificar (M2, 15 min)
ESPECIFICACION.md: quién es el cliente, qué hace la página por él, las secciones en orden, qué campos tiene el formulario y qué validaciones (correo con forma válida, teléfono de 10 dígitos…), y qué significa «sorprender» en tu caso concreto. La especificación se revisa ANTES del primer prompt: aquí se define el éxito.2 · Prompt de construcción (M3, 10 min)
El prompt maestro del OA va al grano: contexto, objetivo, arquitectura (un index.html, styles.css, script.js), restricciones, criterios de aceptación numerados y prohibiciones. Una vuelta, una sección: no «hazme toda la página perfecta» de un solo golpe.3 · Revisar con las listas (M12, 10 min)
La IA devuelve código: pasada de señales y verificación de criterios UNO POR UNO contra el navegador abierto. Anota en HALLAZGOS.md cada desviación: «pedí validación de teléfono y solo miraba que no estuviera vacío».4 · Probar como usuario (M15, 10 min)
PRUEBAS.md: los 8-12 casos —correo malo, teléfono de 9 dígitos, ventana angosta de celular, teclado sin mouse, la animación en cámara lenta—. Si algo de tu formulario molesta a un humano real, el hallazgo va a HALLAZGOS.md.5 · Publicar (M16, 15 min)
Netlify, GitHub Pages o el hosting que elegiste: URL pública, commit inicial con mensaje con sentido, enlace vivo en tu README de portafolio. La página existe cuando otro la puede abrir.
Paso 1 de 5
El prompt de arranque
El prompt que ya es un contrato: criterios numerados y etapa por etapa
Contexto: soy un AI Software Builder construyendo la pagina de [NEGOCIO] para el proyecto 1\n de mi taller. Objetivo: una pagina que enganche en 60 segundos.\n\nArquitectura: index.html + styles.css + script.js. Sin frameworks sin mi permiso.\nSecciones en orden: hero con propuesta clara y boton, [SECCION SORPRESA: define tu\n idea: galeria interactiva / calculadora / linea de tiempo], servicios o menu,\n formulario de contacto/agenda, pie con datos reales falsos pero creibles.\n\nRestricciones: diseno coherente con [TIPO DE NEGOCIO], responsive de verdad (360px\n a 1400px), accesible (contrastes, labels, foco visible), una animacion con\n sentido no decorativa.\n\nCriterios de aceptacion:\n1. el hero explica en una linea que hace el negocio sin hacer scroll\n2. formulario valida en el cliente: correo con forma, telefono 10 digitos, campo\n obligatorio de nombre; mensajes de error juntos al campo, no alert()\n3. al enviar valido, confirmacion visible SIN recargar la pagina\n4. funciona con JavaScript desactivado al menos para leer todo el contenido\n5. pasa Lighthouse >90 en rendimiento y accesibilidad en movil\n\nProhibido: dependencias inventadas, claves o endpoints, lorem ipsum en textos clave.\n\nEmpieza por la estructura HTML completa y el CSS del hero. Espera mi ok antes de\nseguir con el formulario.Qué entrega este proyecto
| Entregable | Barra alta de este proyecto |
|---|---|
| ESPECIFICACION.md | la «sección sorpresa» está definida en concreto, no como «algo bonito» |
| PROMPTS-CLAVE.md | el prompt de arranque + el que corrigió algo que salió mal |
| HALLAZGOS.md | mínimo un hallazgo real: la validación que no validaba, la animación que estorbaba |
| PRUEBAS.md | los 8+ casos con resultado; la validación probada con datos sucios de verdad |
| URL pública + repo | enlace que abre en el celular de otra persona sin configurar nada |
Prueba
La IA entregó la página y el formulario «funciona»: envía y muestra confirmación. Según la ruta, ¿qué sigue antes de publicar?
La animación de la página debe ser llamativa aunque no tenga relación con el contenido, porque «una página con movimiento se percibe moderna».
Empieza HOY por el paso 1: los 15 minutos de ESPECIFICACION.md antes de abrir el chat. Termina el proyecto cuando la URL pública esté en tu README. Si algo de la IA te sorprendió mal, acabas de estrenar HALLAZGOS.md: el archivo que más vale en tu portafolio.
El primer enlace que otros abren cambia la sensación de «estoy estudiando» por «estoy construyendo».
Tu texto se guarda sólo en este dispositivo.
Comentarios
Inicia sesión para comentar.
Todavía no hay comentarios. Sé la primera persona en opinar.