Paso 1: Descarga el proyecto
- Ve a la pagina de Claude Web Builder en nuestra comunidad:
https://www.tododeia.com/community/claude-web-builder
- Haz click en el boton de descarga para bajar el archivo
.zip. - Una vez descargado, descomprime el archivo ZIP.
- Te va a quedar una carpeta con todos los archivos del proyecto adentro.
- Cambiale el nombre a la carpeta por el nombre de tu negocio o proyecto. Ejemplo:
mi-sitio-web.
Paso 2: Descarga Visual Studio Code
Visual Studio Code, o VS Code, es una app gratuita donde vas a abrir el proyecto. Es como el taller donde la IA va a trabajar.
- Ve a la pagina de descarga: https://code.visualstudio.com/download.
- Descarga la version para tu sistema, Mac, Windows o Linux.
- Instalalo como cualquier otra app: siguiente, siguiente, listo.
Paso 3: Abre el proyecto en VS Code
- Abre Visual Studio Code.
- Ve a File o Archivo y luego a Open Folder o Abrir carpeta.
- Selecciona la carpeta que descomprimiste en el Paso 1.
- Si aparece un mensaje preguntando si confias en los autores, dale que si.
- Ahora deberias ver todas las carpetas y archivos del proyecto en la barra lateral izquierda.
Paso 4: Instala la extension de Claude
Aqui es donde entra Claude directamente dentro de VS Code.
- En VS Code, busca en la barra lateral izquierda el icono de cuadritos, Extensions o Marketplace.
- En el buscador escribe: claude.
- Busca la extension que dice "Claude Code for VS Code", la oficial de Anthropic.
- Dale click en Install.
- Una vez instalada, haz login con tu cuenta de Claude cuando te lo pida.
Paso 5: Inicia la construccion de tu sitio
Con Claude listo dentro de VS Code:
- Abre Claude Code dentro de VS Code.
- Escribe "hola" o "comienza", lo que tu quieras.
- Claude va a leer automaticamente todas las configuraciones del proyecto.
- Te va a decir que te va a ayudar a construir tu sitio web.
Paso 6: Contesta las preguntas
Claude te va a hacer una serie de preguntas sobre tu negocio. Contesta con honestidad y con el mayor detalle posible:
- ¿Como se llama tu negocio?
- ¿A que se dedica? En una oracion.
- ¿Quien es tu audiencia?
- ¿Que estilo visual prefieres?
- Y mas preguntas sobre lo que quieres comunicar.
Paso 7: Revisa y aprueba
- Cuando termines de contestar, Claude te va a mostrar un resumen de todo lo que va a construir.
- Revisalo. Si todo se ve bien, dile que estas de acuerdo.
- Claude va a abrir una lista de actividades y las va a ir completando en vivo frente a ti:
- Diseno de la estructura
- Eleccion de colores y tipografia
- Construccion de cada seccion
- Optimizacion para movil
- Optimizacion para Google
- Y mas
Paso 8: Mira el resultado
Cuando Claude termine, vas a tener tu sitio web profesional listo:
- Diseno profesional y moderno
- Animaciones suaves
- Responsivo, se ve bien en celular y computadora
- Optimizado para Google
- Listo para publicar
¿Dudas?
Si te atoraste en algun paso, dejalo en los comentarios de la comunidad y te ayudamos. Esto es para que cualquier persona pueda hacerlo. No necesitas saber nada de programacion.