Crea la web de tu negocio con IndexDock Starter

Al terminar este curso tendrás una web real para tu negocio, publicada en internet, y será tuya. Llevará el nombre de tu negocio, tus servicios y tus datos de contacto, y estará construida con un estándar técnico profesional, aunque tú no escribas ni una sola línea de código.

No necesitas ninguna experiencia previa con ordenadores más allá de usar un navegador web. No necesitas saber qué es GitHub, qué es Cloudflare ni qué es un agente de programación con IA. Este curso explica cada una de esas cosas en lenguaje llano, paso a paso, justo cuando necesitas saberlo.

Todo lo de este curso ocurre en tu navegador web. Harás clic en botones, escribirás respuestas a preguntas, subirás archivos cuando se te pida y aprobarás aquello con lo que estés conforme. No se te pide nada más técnico que eso.

Este curso tiene un segundo beneficio, menos evidente, que conviene conocer desde el principio. La forma en que vas a trabajar aquí —describir lo que quieres, revisar lo que produce el agente y pedir cambios hasta que esté bien— es exactamente como una gran cantidad de desarrolladores profesionales construye software hoy. Los agentes de programación con IA como el que usarás aquí no son una versión simplificada para principiantes de lo auténtico; son una parte real y cada vez más común de cómo se crea el software, tanto entre aficionados como entre desarrolladores con experiencia.

Así que, aunque el resultado concreto de este curso sea tu web terminada, lo que practicas por el camino es una habilidad real y transferible: trabajar con eficacia junto a un agente de programación con IA. Eso vale por sí mismo, mucho más allá de este proyecto.

En la construcción de tu web hay dos participantes: tú y un agente de programación con IA (un asistente automatizado capaz de leer y escribir código informático en tu nombre). Ayuda entender exactamente de qué se encarga cada parte, para que nunca sientas que deberías saber algo que nadie te enseñó.

El agente hace todo el trabajo técnico. Escribe el código de la web, comprueba que ese código funcione, arregla los problemas que encuentra y publica las actualizaciones. Nunca te pide escribir código, usar una herramienta llamada Git, gestionar nada llamado rama ni hacer ninguna otra cosa técnica.

Tú te encargas de algo distinto, pero igual de importante: la verdad sobre tu negocio. Le cuentas al agente qué hace tu negocio, quiénes son tus clientes, qué te diferencia y qué quieres que hagan las visitas cuando lleguen a tu web. Aportas el logotipo y las fotografías que quieras usar. Y en un puñado de momentos clave, apruebas la dirección antes de que el agente continúe. El agente no tiene permitido adivinar ni inventar datos sobre tu negocio, así que son tus respuestas honestas y detalladas las que hacen buena la web final.

Piénsalo como contratar a un constructor de webs con experiencia que nunca te ha conocido: puede construir cualquier cosa, pero solo si le dices con claridad qué necesitas.

De ese reparto se derivan dos cosas. Lo que escribe el agente es un borrador que tú apruebas, no un trabajo profesional terminado: léelo antes de publicar, porque puede contener errores. Y la web resultante es tuya: su contenido, sus afirmaciones y si cumple las normas del lugar donde operas son responsabilidad tuya, no de IndexDock.

Este curso, y el kit de inicio gratuito que utiliza, está pensado para un tipo de web concreto y muy común: una web informativa o de captación de clientes para un autónomo, un negocio de servicios local o un profesional que trabaja por su cuenta. Captación de clientes significa simplemente una web cuya función principal es que las visitas interesadas se pongan en contacto contigo, en lugar de vender productos directamente en el sitio.

Una web construida así suele tener entre una y cinco páginas principales, todas en un solo idioma. Puede explicar tu negocio, enumerar tus servicios, mostrar ejemplos de trabajos anteriores, generar confianza en quien la visita y ofrecer formas sencillas de contactar contigo, como un teléfono, un correo electrónico o un enlace de mensajería.

Este curso no es adecuado para crear una tienda online con carrito y pago, una web donde los usuarios creen cuentas e inicien sesión, un sistema de reservas hecho desde cero o cualquier cosa que necesite guardar datos privados de clientes en una base de datos. Si tu idea incluye algo de eso, tranquilo: tu agente de IA te explicará una versión más simple de tu idea que siga funcionando bien como este tipo de web, o te señalará que hace falta otro tipo de herramienta. Saberlo ahora solo significa que no te llevarás una sorpresa después.

Antes de seguir, una tranquilidad que conviene tener presente: este curso va enteramente a tu ritmo. No hay reloj corriendo ni plazo que cumplir. Si en algún momento te sientes desbordado, confundido o simplemente cansado, es del todo correcto parar, cerrar la pestaña y volver más tarde, ya sea dentro de una hora, mañana o la semana que viene. Nada de tu progreso, tu web o tus cuentas se perderá mientras estés fuera. Tómatelo a la velocidad que te resulte cómoda.

GitHub es una web que guarda archivos y conserva un historial completo de cada cambio que se les ha hecho. Para este curso, GitHub guardará todos los archivos que componen tu web: sus textos, sus imágenes, su maquetación, todo.

El lugar donde viven los archivos de tu web en GitHub se llama repositorio. Puedes pensar en un repositorio como una única carpeta de proyecto que vive en internet, y que tanto tú como tu agente de IA podéis ver y en la que podéis trabajar. Crearás tu propio repositorio al principio de este curso, y será tuyo.

Crear una cuenta de GitHub es gratis, y hacerlo es uno de los primerísimos pasos de este curso.

Escribir los archivos de una web es solo la mitad del trabajo. Esos archivos también tienen que estar en algún sitio donde cualquiera en internet pueda visitarlos y cargarlos en su propio navegador. Eso se llama alojamiento, y el acto de poner a disposición de las visitas una versión nueva o actualizada de tu web se llama despliegue.

Cloudflare es el servicio que este curso usa para alojar tu web. Una vez conectado a tu repositorio de GitHub, Cloudflare toma automáticamente la versión más reciente de los archivos de tu web y la pone disponible en una dirección que cualquiera puede abrir. Cada vez que tu agente de IA termina una parte del trabajo y la guarda, Cloudflare se da cuenta y actualiza tu web en vivo automáticamente, sin que tengas que hacer clic en nada.

Crear una cuenta de Cloudflare también es gratis para lo que este curso necesita.

Un agente de programación con IA es un programa informático capaz de conversar contigo en lenguaje corriente y, además, de leer, escribir y probar código por sí mismo. Tú describes lo que quieres con tus propias palabras, y él hace el trabajo técnico de convertirlo en una web real y funcional.

Este curso usa Claude Code, creado por una empresa llamada Anthropic. Interactuarás con él en un navegador, en una web llamada Claude Code on the web, y es capaz de completar este curso entero de principio a fin.

Trabajarás con tu agente casi por completo a través de una única conversación continua, parecida a una aplicación de chat. Escribes un mensaje describiendo lo que quieres, o respondiendo a una pregunta que te ha hecho, y él responde y se pone a trabajar.

Un prompt es sencillamente el mensaje que le escribes a un agente de IA. Esa es toda la idea: son instrucciones escritas, en tu lenguaje cotidiano, que le dicen a la IA qué quieres que haga o que responden a una pregunta que te ha planteado.

No necesitas ninguna habilidad especial ni fórmulas secretas para escribir un buen prompt. Los mejores prompts son sencillamente claros y concretos, igual que le explicarías algo con cuidado a un empleado nuevo con muchas ganas de ayudar pero que no puede leerte el pensamiento. Si quieres algo en concreto, dilo sin rodeos. Si algo se ve mal, describe exactamente qué se ve mal. Más adelante en este curso, en la lección sobre pedir cambios, verás esta idea aplicada en detalle.

A lo largo de este curso enviarás varios prompts: el que pone en marcha todo el proyecto, y otros cada vez que quieras preguntar algo o pedir un cambio.

Claude Code on the web requiere un plan de Claude de pago para completar este proyecto. Ahora mismo no existe una versión gratuita que ofrezca uso suficiente para construir una web completa siguiendo este curso. Si te registras esperando que baste con una opción gratuita, te quedarás sin uso a mitad de camino, así que es mejor saberlo desde el principio e ir directamente a un plan de pago.

La buena noticia es que no necesitas el plan más caro disponible. El plan de Claude de pago más básico te da uso suficiente para construir una web completa de pequeño negocio con este curso. Puedes elegir un plan más caro si quieres más margen de uso o acceso a modelos más capaces, pero no hace falta para terminar este curso con éxito.

Comparado con lo que obtienes a cambio, una pequeña cuota mensual durante uno o dos meses a cambio de una web de empresa terminada y profesional es un buen trato.

Conviene saber que el dinero que gastas aquí te compra una suscripción de IA de uso general, no un pase de un solo uso que caduca cuando tu web esté lista. La misma suscripción de Claude sigue funcionando para ti después, para todo tipo de cosas cotidianas que nada tienen que ver con hacer webs: analizar o describir fotos, buscar y explicar información, generar imágenes y muchísimas otras tareas del día a día para las que la gente usa estas herramientas.

Eso también significa que la misma suscripción está lista cuando quieras construir otra web. Si montas un segundo negocio, o simplemente quieres volver a intentarlo con otro diseño u otros datos de empresa, puedes crear un repositorio nuevo a partir de la plantilla IndexDock Starter y recorrer este mismo curso otra vez, con la suscripción que ya tienes. Nada de tu plan de pago te ata a construir una sola web.

Puede que hayas oído la expresión «visibilidad en IA» o te hayas preguntado si una web puede ser encontrada no solo por buscadores como Google, sino también por los asistentes de IA a los que la gente hace preguntas. Este kit de inicio está construido con esa preocupación en mente, y vale la pena entender exactamente qué promete y qué no, en términos sencillos.

Lo que te da la web de este curso es preparación técnica. Eso significa que tu web está construida de modo que los programas informáticos, incluidos buscadores y asistentes de IA, puedan leer correctamente tus páginas, entender qué hace tu negocio y describirlo con exactitud si alguien pregunta. Nada de tu web bloqueará ni confundirá en secreto a esos programas.

Lo que este curso no promete son posiciones garantizadas, tráfico garantizado ni la garantía de que un asistente de IA vaya a mencionar tu negocio por su nombre. Nadie puede prometer honestamente esos resultados, porque dependen de muchas cosas ajenas a cualquier web concreta, como la competencia, la ubicación y el momento. Desconfía de quien prometa lo contrario. Lo que obtienes es una web sin barreras técnicas que impidan ser encontrada y entendida correctamente.

Aquí vienen bien unas definiciones breves, solo porque explican por qué esto importa, no porque tengas que usar tú estas palabras.

Rastreable significa que un programa informático puede abrir y leer con éxito las páginas de tu web, igual que tú las visitas en tu navegador. Algunas webs están construidas de formas que esconden su contenido sin querer a esos programas; las webs que construye este curso no son de esas.

Información estructurada significa que los datos importantes de tu negocio, como su nombre, sus servicios y su ubicación, están etiquetados con claridad en el código que sostiene la web, y no solo visibles como una imagen o como texto suelto. Ese etiquetado ayuda a los programas informáticos a entender qué significa realmente un fragmento de texto, en lugar de ver solo letras en una página.

Accesible, en este contexto, significa que tu web funciona bien para tantas visitas y dispositivos como sea posible, incluidas las personas que usan lectores de pantalla u otras tecnologías de apoyo, y quienes usan navegadores distintos.

Juntas, estas tres cosas son lo que «listo para la búsqueda con IA» significa en este curso: una web sin nada que impida que se la lea, se la entienda y se la represente correctamente, tanto por personas como por programas informáticos.

La indexación es lo que hacen buscadores y asistentes de IA entre bastidores: visitan una web, leen sus páginas y añaden lo aprendido a su propio catálogo gigantesco, para que más tarde, cuando alguien busque algo relacionado, esa web pueda aparecer como resultado. Una página tiene que estar indexada antes de que nadie pueda encontrarla por esa vía; estar indexada es lo que hace que una web sea localizable siquiera.

Mientras sigues construyendo, tu web lleva una instrucción silenciosa que pide a buscadores y asistentes de IA que aún no la indexen, para que nadie llegue por accidente a un sitio sin terminar mientras trabajas en él. Esto es completamente normal y esperable; no es señal de que algo vaya mal ni de que la preparación técnica descrita arriba no funcione.

Esa instrucción desaparece automáticamente en cuanto das tu aprobación final a la web terminada, más adelante en este curso. A partir de ese momento tu sitio pasa a ser realmente localizable, tal como ha descrito este módulo.

Abre tu navegador web y ve a [github.com](https://github.com). Busca el botón para registrarte o crear una cuenta. Se te pedirá elegir un nombre de usuario, indicar un correo electrónico y crear una contraseña. Sigue las instrucciones que GitHub muestra en pantalla, que normalmente incluyen confirmar tu correo haciendo clic en un enlace que GitHub te envía. Una vez confirmado el correo, tu cuenta está lista para usarse.

Guarda tu nombre de usuario, tu correo y tu contraseña en un sitio seguro. Tendrás que iniciar sesión en GitHub varias veces más durante este curso.

Abre tu navegador web y ve a [cloudflare.com](https://cloudflare.com). Busca el botón para registrarte. Se te pedirá un correo electrónico y una contraseña. Sigue las instrucciones que Cloudflare muestra en pantalla, que también incluyen confirmar tu correo electrónico. Una vez confirmado, tu cuenta de Cloudflare está lista.

No necesitas comprar nada ni introducir datos de pago para crear una cuenta de Cloudflare con lo que este curso requiere.

Este es el momento de crear tu cuenta en Anthropic, la empresa que está detrás de Claude Code.

Ve a [claude.ai](https://claude.ai) y regístrate, siguiendo las instrucciones en pantalla para confirmar tu correo electrónico. Después, pasa a un plan de Claude de pago, ya que Claude Code on the web lo requiere, como se explicó antes en este curso.

Tómate este paso en serio aunque nunca hayas usado una herramienta de chat con IA; el registro en sí es corto y guiado, y este curso te dirá exactamente qué hacer con la cuenta una vez exista.

Una plantilla es un proyecto de partida ya hecho que puedes copiar a tu propio repositorio nuevo con un clic, en lugar de construir algo desde cero. IndexDock Starter es una plantilla: ya contiene una pequeña web de inicio que funciona y todo lo que tu agente de IA necesita para construir encima tu web real. Usar una plantilla significa que empiezas con algo que ya funciona, en lugar de una carpeta vacía.

Abre tu navegador y ve a [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch). Asegúrate primero de haber iniciado sesión en tu propia cuenta de GitHub.

En esa página, busca y pulsa el botón que dice «Use this template» y luego elige «Create a new repository» entre las opciones que aparecen. GitHub te pedirá que des un nombre a tu nuevo repositorio; elige algo relacionado con tu negocio, como su nombre. Cuando GitHub pregunte si el repositorio debe ser Public o Private, elige Private. Tu web se publicará igualmente para que la visite cualquiera; este ajuste solo controla quién puede leer tus archivos en GitHub. Después pulsa el botón para crear el repositorio.

Una vez creado, déjalo exactamente como está. Salvo para subir tu logo y tus fotos más adelante, cuando el agente te lo pida, nunca abres ni editas ningún archivo por tu cuenta. Tu nuevo repositorio es ahora tu propia copia del kit de inicio, es tuyo y está listo para los siguientes pasos de este curso.

Un Worker, en la terminología de Cloudflare, es la pieza del sistema de Cloudflare que realmente sirve las páginas de tu web a las visitas. Cuando alguien escribe la dirección de tu web en su navegador, es el Worker de Cloudflare el que responde con el contenido de tu web. No necesitas entender cómo funciona por dentro; solo necesitas crear uno y conectarlo a tu repositorio de GitHub, y la siguiente lección te guía clic a clic.

Asegúrate de haber iniciado sesión en tu cuenta de Cloudflare y sigue exactamente estos pasos, en orden. Dos de ellos te piden escribir un comando corto en una casilla. Estás copiando dos líneas en un formulario, no escribiendo código: el curso te da el texto exacto y nunca necesitas entender qué hace.

1. En la barra lateral izquierda, haz clic en Build.
2. Dentro de Build, haz clic en Compute (Workers & Pages).
3. Haz clic en el botón azul que dice «Create application».
4. Haz clic en «Continue with GitHub».
5. Selecciona el repositorio de GitHub que creaste a partir de la plantilla IndexDock Starter.
6. Cuando te pida un build command, escribe npm run build.
7. Cuando te pida un deploy command, escribe npx wrangler deploy.
8. Si ves un ajuste llamado «Builds for non-production branches», déjalo desactivado. Este ajuste no hace falta para este curso, y activarlo consume la cuota gratuita de compilaciones de Cloudflare más rápido de lo necesario.
9. Haz clic en el botón Deploy.

Si durante este proceso Cloudflare te pide configurar el subdominio workers.dev de tu cuenta, hazlo ahora. Es un paso de configuración único que solo aparece la primera vez, así que si lo ves, complétalo antes de continuar.

Cloudflare compilará y publicará ahora tu web de inicio. Esto suele tardar un minuto o dos.

Una vez creado tu Worker, Cloudflare necesita que actives un ajuste más antes de que tu web sea accesible en su dirección. Sigue exactamente estos pasos.

1. En la barra lateral izquierda, haz clic en Build.
2. Dentro de Build, haz clic en Compute (Workers & Pages).
3. Haz clic en el Worker que acabas de crear para abrirlo.
4. Haz clic en la pestaña Domains.
5. Busca la entrada llamada «production» y actívala.

Una vez activado esto, tu web de inicio queda accesible en su dirección workers.dev.

En el panel de Cloudflare, en la página de tu Worker, haz clic en el botón «Visit» de la esquina superior derecha para abrir la dirección workers.dev de tu web en una pestaña nueva del navegador. Deberías ver la página de inicio de IndexDock Starter, lo que confirma que tu web está en línea. Esta todavía no es la web terminada de tu negocio; es una página de partida temporal que confirma que todo está bien conectado. Tu web de negocio real aparecerá en esta misma dirección a medida que el agente la construya más adelante en este curso.

Si al abrir la dirección aparece un error en lugar de tu web, no te preocupes. Normalmente solo significa que Cloudflare todavía está terminando el despliegue entre bastidores. Espera alrededor de un minuto, recarga la página y deberías ver aparecer la web de inicio real.

Tómate un momento para disfrutarlo: la dirección de tu web ya funciona en absolutamente todo internet. Ábrela en el ordenador, ábrela en una tableta, ábrela en el móvil: funcionará igual en todos. Incluso puedes enviar el enlace ahora mismo a un amigo o a un familiar y dejar que sean de los primeros en verla. Es un hito pequeño, pero real, y todavía queda mucho por venir.

Si miras cerca del final de la página, verás una línea pequeña y discreta que dice «Built with IndexDock Starter». Es lo esperado, no un error. Es un reconocimiento discreto al kit de inicio gratuito sobre el que se construye todo este curso, y seguirá en tu web incluso después de que tu web de negocio real sustituya a esta página de inicio. Mantenerlo es lo predeterminado, no una condición: si prefieres no tenerlo, pídele a tu agente que lo quite.

En GitHub, una estrella es una forma sencilla de mostrar aprecio por un proyecto, parecida al «me gusta» de otras webs. Cuando marcas un repositorio con una estrella, se vuelve más visible para otras personas que navegan por GitHub, y quienes construyeron el kit de inicio gratuito que estás usando saben que de verdad le está sirviendo a alguien.

Acabas de publicar con éxito tu propia copia del kit de inicio, así que es un buen momento para darle una estrella si te apetece.

Para hacerlo, abre tu navegador y ve a [github.com/IndexDock/website-from-scratch](https://github.com/IndexDock/website-from-scratch), la página original de la plantilla, no tu propia copia. Cerca de la parte superior de la página verás un botón que dice «Star». Haz clic en él.

Dar una estrella es totalmente opcional y nunca es necesario para continuar el curso. Ni tu web ni tu progreso dependen de ello.

Acabas de hacer algo real: has creado una cuenta de GitHub, una cuenta de Cloudflare, tu propio repositorio y una dirección web en vivo, y has visto cargarse una página de verdad en tu navegador. Eso es la prueba de que todo este proceso funciona de veras.

Ahora, antes de abrir tu agente de IA y empezar el trabajo real de construir la web de tu negocio, lee el resto de este curso de principio a fin, desde aquí hasta el final. No es largo, y nada de ello te exige hacer nada todavía. Su objetivo es prepararte: explica qué te preguntará tu agente de IA, cómo es cada etapa del proceso y un puñado de detalles importantes —como subir bien tu logotipo y pedir cambios con eficacia— que es mucho más fácil acertar a la primera que arreglar después.

Cuando hayas leído hasta el final de este curso, vuelve al módulo llamado «Poner en marcha el agente y el camino que viene» para empezar el trabajo de verdad.

Claude Code necesita permiso para ver y trabajar dentro de tu repositorio de GitHub antes de poder construir nada. Esto se hace mediante un paso de autorización, en el que le dices a GitHub que Claude Code puede acceder a tus repositorios. Este paso ocurre una sola vez, en tu navegador, y lleva apenas un minuto.

Abre tu navegador, ve a [claude.ai/code](https://claude.ai/code) e inicia sesión. Si aún no has conectado GitHub, Claude Code te pedirá que lo hagas; sigue esa indicación para instalar la aplicación de GitHub de Claude y darle acceso a tus repositorios. Si en algún momento te dan a elegir entre dar acceso a todos los repositorios o solo a algunos, elegir todos los repositorios es la opción más sencilla y evita cualquier confusión posterior.

En Claude Code on the web eliges tú mismo qué modelo de IA hace el trabajo, desde un pequeño menú o desplegable situado cerca del cuadro de mensaje de tu conversación. Búscalo antes de enviar tu primerísimo mensaje, porque es más fácil dejarlo bien configurado desde el principio.

Ese menú lista varios modelos, uno debajo de otro, ordenados del más potente arriba a los más modestos abajo. Un modelo más potente tiende a producir un trabajo más reflexivo y de mayor calidad, pero también consume más de tu cuota de uso para la misma cantidad de trabajo. Un modelo más abajo en la lista es menos potente, pero trata mejor tu cuota, así que puedes hacer más con él antes de toparte con los límites que se explican un par de lecciones más adelante. Elegir modelo es por tanto un pequeño equilibrio propio entre calidad y hasta dónde llega tu uso, junto al equilibrio del esfuerzo de razonamiento que cubre la lección siguiente.

Junto a la elección de modelo verás también una opción de esfuerzo de razonamiento, a veces etiquetada como low, medium o high. Controla cuánto tiempo y cuánta reflexión dedica la IA a cada paso del trabajo. Un esfuerzo de razonamiento mayor suele producir un resultado más pulido y mejor pensado, pero tarda más en ejecutarse.

Esto importa por un límite de uso que se explica en la lección siguiente: un esfuerzo de razonamiento menor, como low, o medium en algunos casos, tiene más probabilidades de terminar una web completa dentro de una única sesión de trabajo de cinco horas. Un esfuerzo mayor es muy probable que tarde más de cinco horas en terminar de una sentada, lo que significa que tu sesión se pausará a mitad de camino. Eso no es un fallo; simplemente significa que continúas en una sesión posterior, como explica la lección siguiente, y el resultado final suele ser una web de mejor calidad.

Aquí no hay una única elección correcta. Si prefieres tener antes una web terminada, aunque sea algo más sencilla, elige un esfuerzo de razonamiento menor. Si no te importa volver más de una vez a cambio de un resultado más pulido, elige uno mayor. Es enteramente decisión tuya, y ambos caminos terminan con éxito.

Claude Code tiene un límite de uso que se reinicia cada cinco horas. Si lo alcanzas mientras tu agente trabaja, el agente simplemente se detendrá y te dirá que necesita esperar. Cuando hayan pasado cinco horas desde que empezó tu sesión, el límite se renueva y puedes continuar escribiendo un mensaje corto como «Continue working». Tu agente retomará justo donde lo dejó, porque su progreso está guardado, como se explica más adelante en otro módulo.

También existe un límite de uso semanal aparte. Para un proyecto del tamaño de la web que estás construyendo en este curso, esa cuota semanal basta con holgura para terminar en una sola semana, incluso contando las pausas de cinco horas descritas arriba.

Pase lo que pase, recuerda esto: tu progreso siempre está guardado. Volver tras un descanso corto, tras una pausa de una noche o incluso tras semanas o meses no te cuesta nada. Tu agente retoma exactamente donde lo dejaste.

Claude Code te deja elegir cuánto consulta contigo antes de hacer cambios, mediante lo que llama Accept Edits o Auto mode. En los modos más cautos, el agente se detiene y te pide permiso antes de cada cambio que quiere hacer, lo que significa que tienes que quedarte delante de la pantalla aprobando un pasito tras otro. En Auto mode, el agente sigue trabajando muchos pasos por su cuenta sin necesitar tu aprobación cada vez.

Para este curso, Auto mode es en general lo recomendable. La web que estás construyendo es una aplicación ligera que no pide acceso a partes sensibles de tu ordenador, así que el riesgo de dejar que el agente avance sin aprobación constante es bajo, y significa que puedes hacer otra cosa mientras trabaja en lugar de estar sentado pulsando aprobar una y otra vez.

Una aclaración importante: Auto mode no es lo mismo que sin supervisión. Seguirás teniendo que volver y comprobar de vez en cuando cómo va tu agente, sobre todo cuando te envíe una notificación, porque seguirá deteniéndose en los puntos de decisión de verdad, como aprobar un diseño o revisar la web terminada, que solo tú puedes tomar.

Mientras escribes en Claude Code, a veces notarás una sugerencia en gris ya puesta en el cuadro de mensaje, que te muestra un mensaje pertinente que podrías enviar a continuación. Cuando la veas, puedes pulsar la tecla Tab del teclado para rellenar al instante ese mensaje sugerido en el cuadro, en lugar de escribirlo tú. Es una pequeña comodidad que conviene conocer, porque aparecerá a lo largo de todo tu trabajo con el agente.

Abre Claude Code on the web y abre el repositorio que creaste antes a partir de la plantilla IndexDock Starter. Con tu modelo y tu modo ya elegidos, como vimos en el módulo anterior, escribe o pega exactamente este mensaje para empezar:

Start or continue my IndexDock Starter website. Read the repository state first, tell me where we are, and guide me through the next approved step.

Envía ese mensaje y tu agente seguirá a partir de ahí, empezando por una ronda corta de preguntas.

Construir tu web ocurre en una serie de etapas, y ayuda saber cuáles son antes de estar metido en ellas. Este es el recorrido, en términos sencillos.

• Una etapa corta de preparación, en la que el agente comprueba que todo esté bien conectado.
• Una etapa corta de alcance, en la que el agente hace un par de preguntas rápidas para confirmar que tu idea encaja con lo que este Starter puede construir y, si hace falta, sugiere una versión más simple que sí encaje.
• Una etapa para entender tu negocio, en la que el agente te pregunta a qué te dedicas, quiénes son tus clientes y qué quieres que logre la web.
• Una etapa de diseño, en la que se te muestran varias direcciones visuales distintas para tu web y eliges la que más te gusta.
• Una etapa de construcción, en la que el agente escribe todo el código real de la web a partir de todo lo que aprobaste.
• Una etapa de control de calidad, en la que el agente prueba automáticamente la web que construyó y arregla lo que encuentra.
• Una etapa de publicación, en la que tu web terminada y aprobada se convierte en la versión real e indexable que ve el público.

Cada una de estas etapas tiene su propio módulo más adelante en este curso, en el orden en que ocurren, así que tendrás una explicación más completa de cada una justo antes de llegar a ella.

Cuando termine la etapa de preparación, tu agente te hará primero un par de preguntas rápidas de alcance, solo para confirmar que tu idea encaja con lo que este Starter puede construir. Si tu idea incluye algo fuera de ese alcance, el agente sugerirá una versión más simple que siga funcionando bien, en vez de rechazarte.

Hecha esa comprobación rápida, tu agente empezará a hacerte las preguntas de verdad sobre tu negocio: a qué te dedicas, quiénes son tus clientes ideales, qué problemas les resuelves, qué servicios ofreces, qué te diferencia de la competencia, qué quieres que hagan las visitas en tu web y si tienes fotos, logotipos u otros materiales.

El agente pregunta todo esto porque no tiene permitido adivinar ni inventar datos sobre tu negocio. Cada afirmación de tu web terminada tiene que venir de algo que tú le hayas dicho de verdad. Es una salvaguarda deliberada: significa que tu web nunca mostrará una estadística inventada, una reseña falsa de cliente ni una promesa que nunca hiciste.

Al responder estas preguntas, resiste la tentación de ser breve o vago. Cuantos más detalles reales y concretos le des al agente sobre tu negocio, mejor podrá estructurar tu web: qué páginas crear, qué decir en cada una y qué detalles destacar. Las respuestas vagas llevan a una web genérica; las respuestas detalladas llevan a una que de verdad suena a tu negocio.

Aquí no existe el exceso de detalle. Si algo te parece un dato pequeño u obvio sobre tu negocio, menciónalo igualmente. Eres la única fuente de verdad que tiene el agente.

Una vez respondidas tus preguntas de negocio, el agente preparará un paquete que resume tu negocio, la lista de páginas que tendrá tu web y qué contendrá cada una. Léelo con atención. Nada avanza a la etapa de diseño hasta que digas que sí. Si algo se ve mal, falta o no acaba de encajar, este es justo el momento de decirlo, tal como se detalla en el módulo sobre pedir cambios más adelante en este curso.

Este es uno de los detalles técnicos más importantes de todo el curso, así que léelo con atención. Si adjuntas un logotipo o una foto directamente en tu conversación con el agente, el agente puede mirar la imagen y describir lo que ve, pero no puede guardar el archivo real de esa imagen en tu web. Adjuntar una imagen al chat no es lo mismo que entregarla. Si te apoyas solo en adjuntar imágenes en el chat, tu web terminada no las contendrá realmente, aunque el agente técnicamente pudiera verlas.

La única forma de que tus archivos reales de logotipo y fotos lleguen a tu web es el método de subida que se describe en la lección siguiente.

Cuando tu agente necesite tu logotipo o tus fotos, te dará un enlace directo que abre la página de subida de GitHub para tu repositorio concreto. Haz clic en ese enlace. Te llevará directamente a una página lista para que añadas archivos, sin nada más que buscar o elegir.

En esa página, arrastra tus archivos de logotipo o fotos al área de subida, o usa el botón para buscarlos y seleccionarlos en tu ordenador. Cuando tus archivos estén añadidos, pulsa el botón que GitHub ya tiene seleccionado para confirmar la subida. No necesitas elegir carpeta, escribir una ruta de archivo ni elegir una rama; nada de eso hace falta. Una vez hayas subido los archivos así, dile a tu agente que lo has hecho y él los encontrará y pondrá cada uno exactamente donde corresponde en tu web.

No te preocupes si no tienes logotipo. En ese caso, el agente propondrá un marcador de posición sencillo y honesto, como el nombre de tu negocio con una tipografía elegida, o su inicial o iniciales en una marca simple, y te lo mostrará para que lo apruebes antes de usarlo en ningún sitio. Siempre puedes sustituirlo por un logotipo real más adelante, en cualquier momento de este curso o después.

Una vez aprobados los datos de tu negocio, el agente creará un número reducido de direcciones visuales distintas para tu página de inicio, normalmente tres, o dos si tus ejemplos apuntan claramente en una dirección, para que puedas comparar opciones reales en vez de imaginarte una a partir de una descripción. Cada una usará tu contenido de negocio real ya aprobado, solo que presentado de otra forma: distintas tipografías, colores, maquetaciones y una sensación general distinta. Las mirarás y elegirás la dirección que mejor encaje con tu negocio, o pedirás cambios.

Antes de esta etapa, reúne capturas de pantalla de webs cuyo diseño te guste de verdad, de cualquier tipo de negocio, no necesariamente uno parecido al tuyo. Tu agente te pedirá entre ocho y quince en una sola petición, y más son bienvenidas. Van por el mismo enlace de subida de GitHub que tu logo y tus fotos, así que ahorra tiempo capturarlas con antelación. Tener ejemplos reales a mano marca una diferencia enorme en lo bien que tu diseño final se parece a lo que realmente te imaginabas.

Ayuda todavía más si puedes decir en concreto qué te gusta de cada ejemplo: ¿es la tipografía, los colores, que los botones tengan esquinas rectas o redondeadas, cuánto espacio en blanco se usa, cómo de grandes son las imágenes, o algo completamente distinto? Lo mismo vale para lo que sepas que no te gusta en general, en cualquier web que hayas visto. No necesitas ser diseñador ni usar la terminología correcta de diseño para explicarlo. Cualquier descripción honesta con tus propias palabras, aunque sea imperfecta, le da a tu agente algo real con lo que trabajar, y es muchísimo más útil que no expresar ninguna preferencia.

Cuando tus direcciones de diseño estén listas, el agente te las mostrará en una vista previa viva y funcional, para que puedas juzgarlas bien en lugar de mirar una imagen plana. Mira cada una con atención. Tienes varias opciones: aprobar la que te guste, pedir una versión revisada de una que casi te guste, rechazarlas todas y pedir una dirección completamente distinta, o mezclar: por ejemplo, decirle al agente que quieres un concepto como base pero con un elemento concreto tomado de otro, como su combinación de colores o su maquetación. Nada del diseño es definitivo hasta que tú lo apruebas, así que tómate tu tiempo aquí.

Una vez apruebas una dirección de diseño, el agente pasa a construir la web real. En términos sencillos, escribe el código que sostiene la web, sección a sección, a partir del contenido de negocio que aprobaste y del diseño que elegiste. Por el camino ejecuta además sus propias comprobaciones básicas sobre lo que acaba de escribir y arregla lo que esté claramente roto antes de seguir.

Más allá de esa primera pasada, una segunda ronda de comprobaciones más a fondo se ejecuta automáticamente entre bastidores después de que el agente guarda su trabajo, y cubre cosas como si la web se ve bien tanto en móviles como en ordenadores, y si cumple los estándares de accesibilidad para que también puedan usarla las personas con tecnologías de apoyo. El agente lee los resultados de esas comprobaciones y arregla lo que saquen a la luz; no necesitas ejecutar ni vigilar este paso.

No necesitas entender ningún detalle técnico detrás de esto. Solo es útil saber que «construir» no es una acción instantánea única; ocurre por capas, con comprobaciones tanto mientras el agente escribe como otra vez, automáticamente, después.

Durante toda la etapa de construcción, tu web en vivo, en la misma dirección que confirmaste antes en este curso, se actualiza sola a medida que el agente completa partes del trabajo. Cada vez que tu agente te diga que es buen momento para mirar, abre esa dirección otra vez en tu navegador y revisa qué ha cambiado. Nunca necesitas hacer nada para que aparezca una actualización; ocurre por sí sola una vez el agente ha guardado su trabajo.

Conviene decirlo sin rodeos: puedes —y debes— pedir cambios en cualquier momento de este proceso, ya estés revisando el resumen de tu negocio, tu diseño o tu web terminada. No tienes que sentir que estás siendo difícil o desagradecido por pedir que algo sea distinto. Decir con claridad qué quieres cambiar, en cada una de las etapas, no es un efecto secundario de usar bien estas herramientas; es la verdadera habilidad que implica trabajar con un agente de IA. Quienes obtienen los mejores resultados son los que miran con atención y piden exactamente lo que quieren, tantas veces como haga falta.

Un patrón sencillo hace eficaz el pedir cambios. Primero, mira lo que el agente acaba de enseñarte: un resumen, un diseño o la web en vivo. Segundo, examínalo con atención en lugar de echarle un vistazo; lee el texto de verdad, fíjate en espaciados y colores, haz clic por ahí si es el sitio en vivo. Tercero, identifica en concreto qué está mal, qué falta o qué podría ser mejor. Cuarto, pide exactamente ese cambio en lenguaje llano. Repite este ciclo tantas veces como necesites, en cualquier etapa, hasta que estés de verdad conforme con el resultado.

Si algo de tu web se ve mal de una forma que es más fácil mostrar que describir, hazle una captura de pantalla y añádela a tu mensaje al agente, junto con una descripción en lenguaje llano de qué debería ser distinto; por ejemplo, señalando a qué parte de la imagen te refieres y qué te gustaría ver en su lugar. Una captura acompañada de una explicación breve suele ser más rápida y clara que intentar describir un problema visual solo con palabras.

• En Windows, pulsa a la vez la tecla Windows, Mayúsculas y S para abrir la herramienta de recortes, y luego arrastra sobre la zona que quieras capturar.
• En un Mac, pulsa a la vez Mayúsculas, Command y 4, y luego arrastra sobre la zona que quieras capturar.

Como muchas visitas verán tu web en el móvil, vale la pena comprobarla ahí tú mismo, no solo en el ordenador con el que has estado trabajando. Envíate la dirección en vivo de tu web de alguna forma fácil de abrir en el móvil, como un mensaje a ti mismo en una app de mensajería o un correo a tu propia dirección. Luego abre ese enlace en el navegador del móvil y recorre tu web como lo haría una visita real: comprueba que el texto se lee bien, que los botones son fáciles de pulsar y que nada se ve apretado o cortado. Si detectas un problema, usa el mismo método para pedir cambios descrito antes en este módulo.

Si lo que detectas es un problema visual que merece capturarse, haz una captura de pantalla ahí mismo en el móvil, como harías normalmente. Luego abre [claude.ai/code](https://claude.ai/code) en el navegador del móvil, selecciona el chat donde se está trabajando en tu web y adjunta ahí la captura a tu mensaje, junto con una descripción en lenguaje llano de qué debería ser distinto.

Ahora mismo la dirección de tu web termina en workers.dev, una dirección gratuita que Cloudflare da a cada proyecto. Un dominio es una dirección web que eliges y registras específicamente para tu negocio, como nombredetunegocio.com, que resulta más profesional y es más fácil de recordar para los clientes.

Cuando tu web esté terminada y estés conforme con ella, tu agente te guiará para conectar un dominio real si quieres uno. Te mostrará el nombre de dominio exacto disponible y el precio exacto antes de que ocurra nada, y esperará tu aprobación clara antes de registrar o comprar absolutamente nada. Nunca se compra nada automáticamente ni sin que tú aceptes de forma explícita el dominio y el precio exactos que se te muestran.

Si decides que ahora mismo no quieres un dominio propio, no pasa nada. Tu web sigue funcionando perfectamente en su dirección workers.dev, y siempre puedes añadir un dominio real más adelante.

Una vez publicada tu web, no queda grabada en piedra. Puedes volver cuando quieras, la semana que viene o el año que viene, abrir la misma tarea con tu agente, describir qué te gustaría cambiar, y el agente se encarga igual que construyó el sitio la primera vez. No hay ninguna configuración aparte que rehacer ni nada más que ajustar; simplemente describes el cambio.

No todos los cambios pasan exactamente por los mismos pasos, pero nunca necesitas averiguar de qué tipo es el tuyo; de eso se ocupa el agente automáticamente. Si pides un cambio real de dirección de diseño, el agente te muestra opciones nuevas y espera tu aprobación igual que la primera vez. Si pides otro tipo de cambio visible, como un texto nuevo, una página nueva o una foto actualizada, el agente hace el cambio, vuelve a ejecutar discretamente sus comprobaciones habituales entre bastidores y te muestra el resultado para que lo confirmes antes de publicarlo. Si el cambio es algo pequeño y puramente interno que ninguna visita notaría, puede publicarse sin más, sin necesidad de una nueva aprobación tuya. En cualquier caso, tu web en vivo solo cambia a algo que hayas visto y con lo que estés conforme.

Cuando el agente considere que tu web está completa, te pedirá que revises el sitio terminado una vez más antes de que se convierta en la versión pública y real de tu web. Recórrelo con atención, igual que se describe en el módulo sobre pedir cambios, y pide los últimos ajustes que quieras antes de dar tu aprobación. Es tu última oportunidad de pedir cambios antes de la publicación.

Creaste tu repositorio como privado desde el principio, así que lo más probable es que aquí no haya nada que cambiar. Esto es una comprobación final. Tu web en vivo es pública y sigue siéndolo; lo que permanece privado son tus archivos en GitHub.

Abre tu repositorio en GitHub y mira junto a su nombre, en la parte superior de la página. Debería aparecer una pequeña etiqueta que dice Private. Si pone Public, elegiste la otra opción al crearlo: cámbialo ahora.

1. Haz clic en Settings.
2. Quédate en la pestaña General.
3. Baja del todo, hasta la sección llamada Danger Zone.
4. Haz clic en Change visibility.
5. Elige Make private y confirma.

En cualquier caso, tu web en vivo no se ve afectada. Hacer privado un repositorio cambia quién puede leer tus archivos, nunca quién puede visitar tu sitio.

Esta plantilla y este curso se te entregan tal como están, sin garantía sobre el resultado. Conviene decir con claridad dónde está esa línea, para que nada importante quede sobreentendido.

• La web la escribe un agente de IA, y puede equivocarse. Lee lo que produce antes de publicar. Trátalo como un borrador que tú apruebas, no como un trabajo profesional terminado.
• No se prometen posiciones, tráfico ni resultados de negocio. La web está construida para que los buscadores y los asistentes de IA puedan leerla bien. Que la posicionen, la citen o te manden clientes no está en manos de nadie.
• Los servicios que se usan aquí pertenecen a otras empresas. GitHub, Cloudflare y Anthropic fijan sus propias condiciones, precios y disponibilidad, y pueden cambiarlos en cualquier momento.
• Nada de este curso es asesoramiento legal, fiscal ni profesional. Una web de empresa suele necesitar su propia política de privacidad, aviso legal o aviso de cookies, según dónde estéis tú y tus clientes. Esa parte te toca a ti.

Nada de esto es motivo para dudar. Es el mismo reparto que este curso describe desde el principio: del trabajo técnico se encarga el agente, y la verdad sobre tu negocio sigue siendo tuya.

Al final de este curso no hay examen ni trabajo que entregar. Has terminado cuando tu web está en línea y tu repositorio está en privado, como vimos en la lección anterior. Eso es todo: ahora eres dueño de una web de negocio real y funcional que has construido sin escribir ni una sola línea de código.

Si más adelante quieres ir más lejos con cosas como estrategia en profundidad, investigación de la competencia o soporte continuo para tu web, IndexDock también ofrece servicios profesionales para eso. Pero es totalmente opcional, y este curso gratuito y la web que has construido con él se sostienen por sí solos.