Guía para Juan Manuel

Cómo hacer una página, guardarla y mandársela a un cliente

No necesitas saber programar. Necesitas saber pedirle a tu Claude lo correcto, guardar lo que te devuelve, y mandarlo. En la primera parte armas y mandas una página simple. En la segunda, si quieres que junte datos de un formulario, ves qué cuentas crear y cómo conectarlas.

¿Quieres armar algo más grande, con usuarios que se registran y su propia base de datos? Ese proceso completo está en el curso de plataformas.

Primero

Qué es esto, en criollo

1Un archivo HTML es una página web que vive en un solo archivo de texto. Cualquier navegador la abre y la muestra bonita, con colores, títulos y botones.
2No se instala nada. No se compila nada. Se escribe (o se le pide a Claude que la escriba) y queda lista.
3Es mejor que un PDF: se ve mejor en el celular, puedes poner un botón de WhatsApp que funciona de verdad, y no obliga al cliente a descargar nada si además le mandas el link.
Segundo

El prompt que le pides a tu Claude

Cópialo tal cual, cámbiale lo que está entre [corchetes] y pégalo en tu chat de Claude.

prompt.txt
Hazme una página HTML para mandarle a un cliente. Un solo archivo, autocontenido.

Debe tener, en este orden:
1. Un título con el nombre de [CLIENTE] y lo que le estoy ofreciendo
2. Los 3 puntos que más le importan a él (no a mí), muy breves
3. El precio, una sola cifra, bien grande y clara
4. Un botón al final que diga "Hablemos" y abra WhatsApp a este número: [TU NÚMERO CON CÓDIGO PAÍS]

Que se vea bien en el celular. Nada de relleno: máximo 400 palabras en total.
Dámelo como un solo archivo .html listo para guardar.

Claude te va a devolver un bloque de código que empieza con <!doctype html>. Ese bloque completo es lo que guardas en el paso 4.

Tercero

Practica aquí mismo, sin guardar nada

Pega cualquier código HTML que te dé Claude en el cuadro de la izquierda. A la derecha ves, al instante, cómo se vería esa página de verdad.

Edita a la izquierda → mira a la derecha

Esto es exactamente lo que va a pasar cuando abras tu archivo .html haciendo doble clic: el navegador dibuja el código.

Cuarto

Cómo lo guardas

  1. Copia todo el códigoDesde <!doctype html> hasta el </html> final, completo.
  2. Abre el Bloc de notasPega el código adentro.
  3. Guardar como…Nombre: cliente.html (que termine en .html, no en .txt). En "Tipo", elige "Todos los archivos".
  4. Doble clic al archivoSe abre solo en tu navegador. Así se va a ver para el cliente.
Quinto

Cómo se la mandas al cliente

ARápido: mándale el archivo .html directo por WhatsApp o mail, como adjunto. Al tocarlo, se abre en su navegador. No necesita nada instalado.
BCon link: si quieres que la vea sin descargar nada, súbela a app.netlify.com/drop: arrastras el archivo (o la carpeta si son varios), y te da un link que puedes mandar directo.
Ojo: en Netlify Drop, si tu página usa imágenes o más de un archivo, arrastra la carpeta completa, no un .zip — si no, las imágenes no van a cargar.
Hasta aquí ya puedes: pedirle la página a Claude, verla funcionar aquí mismo antes de guardarla, guardarla bien, y mandarla — con o sin link.
Parte 2 · Cuando la página necesita juntar datos

Todo lo de arriba te alcanza para una página simple, tipo folleto. Si en algún momento quieres que el cliente deje sus datos en un formulario — nombre, teléfono — necesitas dos cuentas más, gratis las dos, y saber cómo conectarlas. Es lo que viene ahora.

Sexto

Las dos cuentas que te conviene tener

1Netlify — ahí vive la página, con un link fijo que no cambia y que puedes actualizar cuando quieras. Ya la usaste en la Parte 1 sin cuenta; ahora vas a crear una para que quede guardada.
2Supabase — ahí quedan guardados los datos que la gente deja en tus formularios. Es como una planilla en la nube que solo tú puedes ver.
Séptimo

Crear tu cuenta en Netlify

  1. Entra a netlify.comToca "Sign up" y regístrate con tu cuenta de Google — es lo más rápido, no necesitas crear otra contraseña.
  2. Listo, no hay nada más que configurarLa cuenta queda lista de inmediato.
  3. Para publicar, sigue igual que en la Parte 1Entra a app.netlify.com/drop y arrastra tu archivo o carpeta. La diferencia es que ahora queda guardada en tu cuenta, con historial y puedes cambiarle el nombre al link.
Octavo

Crear tu cuenta en Supabase

  1. Entra a supabase.comToca "Start your project" y regístrate con Google.
  2. "New Project"Ponle un nombre (el del cliente, o el tuyo), crea una contraseña para la base de datos y guárdala en un lugar seguro. No la vas a usar seguido, pero si la pierdes hay que resetearla.
  3. Elige región y esperaLa más cercana a Chile que aparezca. Toma unos 2 minutos mientras Supabase arma el proyecto.
  4. Ve a Settings → APIAhí están dos datos que vas a necesitar en el próximo paso: la Project URL y la anon public key. Cópialos a un bloc de notas.
Noveno

Prepara dónde van a caer los datos

Antes de conectar, hay que decirle a Supabase qué vas a guardar. En el menú de la izquierda, entra a SQL Editor, pega esto y toca Run:

tabla-leads.sql
create table leads (
  id bigint generated always as identity primary key,
  nombre text,
  telefono text,
  creado timestamptz default now()
);

alter table leads enable row level security;

create policy "cualquiera puede escribir"
  on leads for insert to anon
  with check (true);

Esto crea una tabla llamada leads con espacio para nombre y teléfono, y la deja abierta para recibir datos desde tu página. Nadie de afuera puede leer lo que ya hay adentro — solo tú, desde tu panel de Supabase.

Décimo

Conectar tu página con Supabase

Dale este prompt a tu Claude, cambiando [TU PROJECT URL] y [TU ANON KEY] por los datos que guardaste en el paso 8.

prompt-conectar.txt
Tengo un proyecto en Supabase. Mi Project URL es [TU PROJECT URL] y mi anon key es [TU ANON KEY].
Ya tengo una tabla llamada leads con las columnas nombre y telefono.

Hazme una página HTML con un formulario simple (nombre y teléfono) que, al enviarse, guarde esos
datos directo en esa tabla de Supabase usando supabase-js desde un CDN. Que muestre un mensaje de
"¡Gracias!" después de guardar, y que se vea bien en el celular. Todo en un solo archivo .html.

Con eso, Claude te arma la página ya conectada. La pruebas aquí arriba en el taller, la guardas igual que en el paso 4, y la subes a Netlify igual que en el paso 5.

Para ver lo que va llegando: entra a tu proyecto de Supabase → Table Editor → tabla leads. Ahí aparece cada persona que llenó el formulario, con fecha y hora.

Con las dos partes ya puedes: mandar una página simple sin cuentas, o una con formulario que guarda los datos en tu propia base. Cuando tengas dudas de una propuesta concreta, pregúntale a Mario antes de mandarla.
Copiado