# Claude Code para sitios web.

clase abierta · criterio operativo · junio 2026

En esta clase ves cómo convertir contexto real en un prototipo web profesional **con Claude Code, criterio y revisión**.

presentado por víctor paytuvi · neuralextension.com

## Claude, trabajando dentro de tu computador

- **No es un chat más**: crea archivos reales, en tus carpetas, que puedes revisar.
- **Trabaja con instrucciones claras**: tú defines objetivo, contexto, límites y criterio.
- **Lee tu material**: documentos, fotos, webs de referencia y contenido real del negocio.
- **Exige revisión**: no basta con pedir, hay que verificar lo que construye.

**La idea central:** Tú pones contexto, criterio y revisión. **Claude Code acelera el código**.

## Lo que antes era un proyecto pesado, ahora puede empezar con un prototipo revisable

**Criterio antes que plantilla:** Diseño conectado a **tu negocio, tu oferta y tu contenido real**, no a una plantilla genérica.

**Un archivo que puedes revisar:** La web queda como **código visible**, fácil de inspeccionar, ajustar y publicar.

**Velocidad con control:** Pasas de idea a prototipo **en una sesión**, revisando estructura, textos y detalles antes de publicar.

**La prueba:** Para demostrarlo, rediseñamos **dos de las webs más visitadas de Colombia**.

## EPS SURA, rediseñada con contexto

El sitio real usado en la clase contra un prototipo hecho con **contexto, instrucciones y revisión en Claude Code**:

_Antes y después: la página actual de EPS SURA (epssura.com) frente a un rediseño hecho con Claude Code._

mismo contenido real · un solo archivo html · revisión en vivo

## Bancolombia, prototipado con criterio

El banco más grande de Colombia, usado como ejercicio para mostrar **estructura, criterio visual y velocidad de iteración**:

_Antes y después: la página actual de Bancolombia (bancolombia.com) frente a un rediseño hecho con Claude Code._

marca, contenido y campañas reales · un solo archivo html · revisión en vivo

## Tres formas de darle contexto a Claude Code

La calidad no sale de pedir "hazme una web". Sale de darle **contexto suficiente para decidir bien**:

**Con referencia:** Le muestras una web que ya existe, explicas qué debe conservar y pides **una versión mejor organizada**.

**Con contexto base:** Le describes negocio, cliente, oferta y tono. Luego revisas **diseño, textos y estructura**.

**Con un documento:** Le das tu menú, brochure o portafolio en PDF y lo convierte en **una página organizada**.

## Prompts para trabajar con contexto real

Un pedido para cada forma. Cambia **lo que va entre corchetes** por tu información real:

Forma 1 · con referencia:

```text
Mira la página de mi negocio en [tu-web.com]. Crea una versión más clara y profesional en un solo archivo HTML. Mantén mis servicios, datos reales y no inventes testimonios ni resultados.
```

Forma 2 · con contexto base:

```text
Crea la página web de mi negocio: vendo [qué vendes] para [tu cliente ideal]. Usa un tono [tono], incluye solo pruebas reales y marca con [FALTA DATO] lo que necesite evidencia.
```

Forma 3 · con un documento:

```text
Lee el documento [menu.pdf] que está en esta carpeta y conviértelo en una página web de un solo archivo HTML. Organiza la información, respeta los datos reales y separa lo importante de lo accesorio.
```

## A internet sin salir de Claude Code

1. **Crea tu cuenta en vercel.com** — Hazlo con tu correo o tu cuenta de Google. Es lo único que haces fuera de Claude Code.
2. **Dale esta instrucción a Claude Code** — Él instala y configura **la herramienta de Vercel por ti**, y conecta tu cuenta paso a paso.
3. **Publica hablando** — Desde ahí: **"sube mi web a Vercel"**, "publica los cambios". Menos dashboard, más flujo de trabajo.

Instrucción de despliegue · úsala con tu proyecto:

```text
Quiero publicar esta página web en internet con Vercel. Instala y configura el Vercel CLI, ayúdame a conectar mi cuenta paso a paso, verifica que la web cargue bien y deja el flujo listo para publicar futuras actualizaciones desde este proyecto.
```

## Esto se entrena con práctica y revisión

Nerdos de la IA es la academia donde entrenas criterio operativo con IA, **en vivo y en español**:

- **Sesiones en vivo grupales** conmigo, construyendo casos reales como esta clase.
- **Todas las lecciones y el archivo completo** de sesiones grabadas, desde el día uno.
- **Comunidad de nerdos** aplicando IA a negocios, oficios y proyectos reales.
- **Acceso anual completo** a la ruta, la comunidad y las sesiones. USD $250/año.

**Siguiente paso:** Si esta clase te abrió una posibilidad, Nerdos de la IA te da una ruta completa para practicar con casos reales, sesiones en vivo y comunidad.

Entra a [neuralextension.com/academia](https://neuralextension.com/academia).

---

Clase abierta de Neural Extension · https://neuralextension.com/recursos/claude-code-para-sitios-web
Más guías y clases: https://neuralextension.com/recursos