Manos a la obra: una invitación para el paseo del fin de semana

En este capítulo nos ponemos manos a la obra de verdad. La actividad de práctica se llama «Club del Paseo de Fin de Semana»: no es una carrera, nadie va presumiendo de pasos y, si te cansas, te sientas un rato.

Al final tendrás una carpeta weekend-walk con un index.html dentro. HTML es un formato de archivo para páginas web; por ahora solo necesitas saber que este archivo guarda el contenido de la página y que se puede abrir para verla. Ponemos la página en su propia carpeta para que, en el capítulo 7, puedas verla directamente como sitio completo y decidir después si la publicas.

Antes de empezar: dos cosas

Primero, abre Agent.Space e inicia sesión con tu cuenta. Deja el tutorial en esta pestaña y trabaja en otra, para poder volver a consultarlo cuando quieras.

Después, comprueba que tienes cuota disponible. En Agent.Space hay dos formas de pago: los planes y los créditos, que se gastan según el uso. Las cuentas nuevas suelen recibir un «Bono de registro», que puedes usar primero con los modelos que se cobran por uso; el importe, la validez y los modelos disponibles son los que indique el producto. Si no tienes cuota disponible, puedes leer primero todo el proceso; no hace falta que envíes la misma tarea una y otra vez.

Esta vez no necesitas preparar imágenes ni un dominio, ni instalar nada. La actividad, el lugar y la ruta son material ficticio para practicar.

1. Crea un Workspace para el plan

La primera vez que inicias sesión, Agent.Space te pide un nombre para dirigirse a ti y te hace unas cuantas preguntas sencillas; luego llegas a la página de bienvenida. Ahí hay dos tarjetas: «Ver ejemplos» abre un proyecto de ejemplo de solo lectura, ideal para ver antes qué han hecho otros; «Crear Workspace» es el camino que seguiremos esta vez. Si ya tienes algún Workspace, elige «Crear Workspace» en el menú para cambiar de Workspace, arriba a la izquierda; el resultado es el mismo.

En la ventana «Crear Workspace», rellena estos tres campos:

• Nombre: por defecto pone «Mi Workspace»; cámbialo por «Club del Paseo de Fin de Semana».
• Ubicación del ordenador en la nube: aquí estarán el ordenador en la nube del Agent y los archivos del Workspace. El sistema te recomienda una según tu zona horaria, y normalmente puedes dejarla tal cual; después de crearlo, no se puede cambiar.
• Zona horaria: por defecto, la de tu navegador. Todos los miembros y los Agents compartirán esta zona horaria.

Haz clic en «Crear Workspace». Cuando termine, arriba a la izquierda aparecerá el nombre que acabas de escribir. Ese es el hogar de este proyecto.

2. Elige un Agent y un modelo compatible

Nada más crearlo, la página te pregunta directamente: «¿Con qué Agent quieres empezar?». Debajo, una fila de tarjetas muestra los Agents que puedes elegir; Codex viene seleccionado por defecto. También puedes cambiar a Claude Code o a cualquier otro Agent disponible de la lista.

El modelo se elige con el botón de modelo, debajo del cuadro de texto. Normalmente Agent.Space ya te ha seleccionado uno disponible; la primera vez puedes dejarlo así o cambiarlo por un modelo compatible para el que tengas cuota. Si quieres repasar la diferencia entre Agent y modelo, vuelve cuando quieras al capítulo 2.

Si la pantalla te avisa con «Se necesita un plan», «Cuota agotada» o «Créditos insuficientes», usa el botón de al lado para elegir un plan o recargar. Un modelo incompatible, quedarse sin cuota o un servicio temporalmente no disponible se resuelven de formas distintas, así que lee bien el motivo concreto que aparece.

3. Envíale esta tarea

La petición que le envías se llama también Prompt. Puedes copiar esta tal cual; síguela una vez y luego adáptala a tu propio plan.

Hazme una página web de invitación en español para el «Club del Paseo de Fin de Semana».
Es una actividad ficticia para practicar; la página tiene que indicar «Evento de ejemplo».Presentación: un paseo tranquilo el fin de semana, sin prisas; quien se canse puede descansar.Hora de encuentro: el sábado a las 3 de la tarde. Indica que es solo un horario de ejemplo y que no corresponde a una fecha real.Punto de encuentro: la puerta sur del Parque de los Plátanos (lugar ficticio).Ruta: encuentro en la puerta sur → paseo junto al lago → descanso en el césped; unos 90 minutos en total.Qué llevar: agua, calzado cómodo y gorra; si llueve, se aplaza.Instrucciones para participar: si algún día se organiza de verdad, hay que contactar antes con quien lo organiza para confirmar la fecha y el lugar.
La página tiene que ser desenfadada y clara, y leerse bien en el móvil. Que la hora y el punto de encuentro se vean a primera vista.Añade un botón «Cómo apuntarse» que, al pulsarlo, lleve a las instrucciones para participar de esta misma página.No recojas datos de inscripción; no hace falta inicio de sesión, ni mapa, ni imágenes externas.
Guarda la página y sus estilos en la carpeta weekend-walk del Workspace, con el nombre index.html.No dependas de otros archivos ni de recursos externos, no te limites a pegar el código en el chat y no la publiques todavía.Al terminar, comprueba que el contenido esté completo y que el botón lleve al sitio correcto, y dime dónde está el archivo y cómo verlo.Si alguna comprobación no se ha podido hacer, dímelo claramente.

Este texto explica el objetivo, el material y cómo tiene que quedar el trabajo. Tiene bastantes detalles para que luego tengas con qué compararlo al revisarlo, no porque el Agent solo entienda algún formato mágico. Si no te apetece escribir, también puedes pulsar «Entrada de voz» en el cuadro de texto, hablar y luego revisar el texto transcrito.

4. Míralo trabajar y atiende a sus preguntas

Después de enviarlo, puede que el Agent lea la carpeta actual, cree archivos y haga comprobaciones. Es normal que aparezcan nombres de herramientas y registros de ejecución: son pistas de lo que está haciendo.

También puede que en su respuesta te pregunte qué estilo quieres. Contesta directamente en el cuadro de texto: «Algo sencillo, como una invitación de fin de semana para amigos». Si todavía está ocupado, lo que envíes entrará primero en la cola y se ejecutará cuando le toque.

Algunos Agents, antes de hacer ciertas operaciones, muestran una solicitud de permiso marcada con «Requiere confirmación de quien inició la acción»; el texto de los botones lo pone el propio Agent. Antes de decidir, fíjate bien en qué acción va a hacer y sobre qué; si no lo tienes claro, puedes elegir «Cancelar esta solicitud». Esta tarea solo consiste en crear la invitación y revisarla.

Cuando termine, mira primero si en el resumen aparece weekend-walk/index.html, y qué comprobaciones ha hecho y cuáles no. No cierres la ventana solo porque veas «Completada».

5. Busca el archivo y ábrelo

Si en la respuesta del Agent aparece una tarjeta de este archivo, haz clic y se abrirá a la derecha. También puedes entrar en «Archivos» desde la barra lateral izquierda, abrir la carpeta weekend-walk y hacer clic en index.html. Los archivos HTML se abren en modo vista previa por defecto; si quieres ver el código, cambia a «Editar» o «Vista dividida».

Lo que ves aquí es la vista previa del archivo: la página y sus estilos están en el mismo archivo, así que se ve completa. Si solo te ha dado el código en el chat, puedes añadir:

Guarda de verdad la página de antes como weekend-walk/index.html en el Workspacey, cuando termines, dime si se ha guardado. Necesito poder encontrarla y abrirla en la sección de archivos.

Si el archivo existe pero no se abre, cuéntale al Agent el error exacto que muestra la pantalla y explícale que falla en el paso de «Abrir archivo». Primero hay que dar con la causa; luego, decidir cómo arreglarlo.

6. Haz de revisor atento, pero no tiquismiquis

Estrecha la página hasta que tenga más o menos el ancho de un móvil, léela entera y pulsa el botón. Comprueba estas cosas:

• Están el nombre de la actividad, la marca de ejemplo, la hora, el lugar, la ruta y la lista de qué llevar.
• En una pantalla pequeña el texto se lee bien y no hay que arrastrar la página de lado a lado.
• «Cómo apuntarse» lleva de verdad a las instrucciones para participar.
• La página no se ha convertido a escondidas en un formulario de inscripción.

Es normal que el diseño no sea exactamente como se describe aquí. Cada vez que el Agent genera la página, el estilo puede cambiar; lo primero es ver si cumple estos requisitos.

Si tu primera página se abre, ya has hecho lo más importante de este capítulo. En el siguiente elegiremos un punto concreto para mejorarlo y veremos cómo convertir ese «le falta algo» en una petición que el Agent pueda llevar a cabo.