Claude Code: del feedback a la app

Esta clase se hace con Claude Code, la versión de Claude que trabaja sobre una carpeta de tu computador. Vas a construir, de principio a fin, una encuesta de satisfacción con un QR para tu negocio: tu cliente escanea el código, contesta «¿cómo te fue hoy?» con una nota de 1 a 5, y esa respuesta se guarda, aparece en un panel y, si fue mala, te llega por correo.

No vas a escribir código. Vas a pedir, mirar y aprobar. Lo que se construye lo escribe Claude; lo que se decide lo decides tú.

Si viste videos de Claude Code, viste una pantalla negra con letras. Hoy no la vamos a usar. Trabajamos en la aplicación de escritorio de Claude, cuya pestaña Code trae Claude Code puesto.

1. Descarga la aplicación de escritorio en claude.com/download. Hay para Mac y para Windows.
2. Ábrela e inicia sesión con tu cuenta de Claude.
3. Haz clic en la pestaña Code, arriba al centro. Si te pide subir de plan, ya sabes qué falta.
4. Solo en Windows: instala Git for Windows (gratuito, en git-scm.com) y reinicia la app. En Mac no hace falta.

El proyecto usa tres servicios. Los tres tienen una capa gratuita que alcanza de sobra, y los tres se crean con tu correo en cinco minutos. Créalos antes de empezar, con el mismo correo.

Cinco datos, y los cinco prompts salen ya con lo tuyo adentro. Los dos que más se prestan a error son el nombre del proyecto en Vercel (es tu dirección pública, y tiene que ser el mismo cada vez que publiques) y el nombre del proyecto en Supabase (tal cual lo escribiste al crearlo: en el vivo el único tropiezo fue justo ese).

Hasta hoy, Claude vivía en una ventana de chat. Le pegabas cosas, te respondía cosas. Desde la Clase 6 además podía leer tu correo y tu calendario. Pero nunca había tocado tu computador.

En el vivo se dijo de otra forma: hagan de cuenta que tienen al mejor ingeniero de software del mundo al lado, y ustedes solo lo guían hacia lo que quieren conseguir.

1. Crea en tu computador una carpeta nueva y vacía para el proyecto. En el vivo se llamó FEEDBACK CX; puede llamarse encuesta. Lo que importa: una carpeta, un proyecto. No abras Documentos entero ni el Escritorio, porque Claude ve todo lo que hay ahí.
2. En la pestaña Code, elige Local: Claude va a trabajar en tu computador, con tus archivos.
3. Seleccionar carpeta y elige la que acabas de crear.
4. El modelo: deja el que venga elegido. Para esto, Sonnet basta y sobra.
5. En el selector junto al botón de enviar, elige el modo Manual. Es el que pregunta antes de todo.

• La tarjeta de permiso. Dice qué quiere hacer y espera. Aceptar o Rechazar. Si rechazas, no se enoja: te pregunta cómo prefieres seguir.
• El diff. Un indicador como +12 −4: doce líneas nuevas, cuatro quitadas. Haz clic y lo ves en verde y rojo. No necesitas entenderlo línea por línea: necesitas ver qué archivo toca.
• La vista previa. Un panel donde se abre lo que Claude construyó, como en un navegador. Haz clic en el nombre de cualquier archivo .html del chat y se abre ahí.

Y una cosa más: puedes interrumpirlo. Si va por mal camino, escribes la corrección y Enter, sin esperar a que termine. En el vivo pasó exactamente eso: el Prompt 3 salió con el nombre equivocado del proyecto, se paró a Claude a mitad de camino, se corrigió el nombre y siguió como si nada.

Al final de la Clase 8 salió la pregunta que importa: ¿y qué pasa cuando alguien hace clic en enviar? La respuesta era un proyecto de fin de semana: algo publicado, que guarda, y que avisa. Hoy lo hacemos en una hora.

Le sirve a un café, a un taller, a un consultorio, a una tienda y a una asesoría. Es anónima: no pide nombre, correo ni teléfono. Y cambia de escala sola: en el vivo, una alumna describió una suite de reclamos para centros comerciales, y la estructura era la misma — un QR, un formulario, una base de datos, un panel, una notificación.

Así quedó la carpeta al terminar. Claude puede ponerle otros nombres a los archivos; lo que importa es qué hace cada uno.

Un conector es una llave de tu cuenta que le prestas a Claude. En la Clase 6 le prestaste las de tu correo y tu calendario. Hoy le prestas tres más. Por dentro se llaman MCP, la forma estándar en que dos plataformas se hablan hoy; por fuera, para ti, son un botón que dice Conectar.

Hay dos caminos, y los dos llegan al mismo lugar.

Podríamos hacer que la página hablara directo con Supabase y con Resend. Sería más corto. Pero la página se descarga en el celular de cada cliente, y con ella se descargaría todo lo que tiene adentro — incluidas las llaves de tus cuentas. Cualquiera podría verlas.

Por eso hay una función: un archivo chico que corre en Vercel, del lado de adentro, donde nadie lo ve. La página le manda la respuesta; la función la guarda y avisa. Las llaves viven en Vercel, en un cajón que se llama variables de entorno, y nunca salen de ahí.

Las cuatro etapas, en el orden en que se hacen: la página → publicar → guardar y ver → avisar. Después de cada una hay algo que se puede mostrar. Si un día solo te da el tiempo para dos, las dos primeras ya son una encuesta publicada.

Al empezar cada sesión, Claude Code lee un archivo de tu carpeta llamado CLAUDE.md, si existe. Es el Proyecto de la Clase 5 y la skill de la Clase 7 en su forma más simple: instrucciones en un archivo de texto. Pídele que lo cree él:

Crea un archivo CLAUDE.md en esta carpeta con estas instrucciones para ti:
- Este proyecto es una encuesta de satisfacción con QR para [el nombre de tu negocio]. La contesta un cliente desde el
  celular y es anónima.
- Háblame siempre en español y sin jerga técnica; si usas una palabra técnica,
  explícamela en una línea.
- No instales nada en mi computador ni hagas un cambio grande sin decirme
  antes qué vas a hacer y para qué.
- Nunca me pidas que pegue llaves ni contraseñas en este chat: dime dónde
  cargarlas.

Lo primero que hace es crear el archivo en tu carpeta. Es tu primera tarjeta de permiso: léela y acepta.

Este es el mismo prompt que se usó en vivo, con tus datos adentro:

Quiero una encuesta de satisfacción para mi negocio, [el nombre de tu negocio].
Un cliente la abre desde el celular escaneando un QR: una sola página,
liviana y pensada para el teléfono.

Qué tiene que tener:
- Arriba, el nombre del negocio y la pregunta «¿Cómo te fue hoy?».
- Una nota de 1 a 5, con cinco botones grandes para tocar con el dedo.
- Un campo de comentario, opcional, de una o dos líneas.
- Un botón que diga «Enviar».
- Después de enviar, un mensaje de agradecimiento en lugar del formulario.
- Es anónima: no pide nombre, correo ni teléfono.

Cómo hacerlo:
- Un solo archivo index.html, con el estilo adentro. Sin instalar nada en
  mi computador.
- Textos en español, cortos y cálidos. Colores: [el color de tu encuesta].
- Por ahora el botón Enviar solo muestra el agradecimiento. Guardar y
  avisar lo agregamos después, en este mismo chat.

Cuando termines, dime cómo la abro en la vista previa.

En el vivo el color fue «sobrios y profesionales para la industria zapatera», y Claude eligió el resto. Si tienes el sistema de diseño de la Clase 8, este es el momento de pegarlo: la encuesta sale con tu marca desde el primer minuto.

1. Aparece la tarjeta de permiso: quiere crear index.html. Léela. Aceptar.
2. El archivo aparece en tu carpeta y su nombre en el chat. Haz clic: se abre en la vista previa.
3. Pruébala como si fueras el cliente: toca una nota, escribe algo, Enviar. Tiene que agradecerte.

Camino A: en el chat, botón + → Conectores, busca Vercel, inicia sesión y Autorizar. Si no aparece en la lista, agrégalo como conector personalizado con la dirección oficial https://mcp.vercel.com — esa y no otra. Camino B: si ya tienes Composio conectado, en Composio conecta tu cuenta de Vercel y listo. Se hace una sola vez.

El nombre del proyecto va a ser tu dirección: encuesta-cafe-luna se convierte en encuesta-cafe-luna.vercel.app. Y vas a usar el mismo nombre cada vez que vuelvas a publicar: es lo que hace que la dirección no cambie y que el QR impreso siga sirviendo.

Publica esta encuesta en Vercel usando el conector, en producción, con el
nombre de proyecto [el nombre de tu proyecto en vercel]. Cuando esté publicada, dame la
dirección pública.

Después agrega una página qr.html que muestre un código QR grande apuntando
a esa dirección, con el nombre del negocio arriba y la frase «Cuéntanos cómo
te fue» abajo, lista para imprimir en una hoja carta. Genera el QR dentro de
la misma página, sin instalar nada en mi computador, y vuelve a publicar en
el mismo proyecto.

1. Una tarjeta de permiso distinta: esta vez es el conector el que pide actuar, y dice que va a publicar en Vercel. Aceptar.
2. Claude te devuelve la dirección. Ábrela en tu computador y después en tu celular.
3. Segunda publicación, y ahora existe tu-direccion/qr.html. Ábrela: ahí está tu QR.
4. Escanéalo con la cámara del celular. Se abre tu encuesta.

Camino A: botón + → Conectores, busca Supabase; si no aparece, la dirección oficial es https://mcp.supabase.com/mcp. Te manda a iniciar sesión y a autorizar. Si te deja elegir, acota el acceso al proyecto de la encuesta: Claude no necesita ver ningún otro. Camino B: en Composio, conecta tu cuenta de Supabase.

Con el conector puesto, Claude resuelve las llaves de Supabase él solo: las obtiene y las deja en Vercel sin que las copies. En el vivo fue exactamente así, y las variables quedaron con los nombres SUPABASE_URL y SUPABASE_ANON_KEY. Si en algún momento te pide cargar una a mano, el camino es siempre el mismo:

1. Una tarjeta del conector de Supabase: va a crear la tabla. Aceptar.
2. Una tarjeta para crear la función y otra para cambiar index.html. Aceptar las dos.
3. Escaneas el QR, contestas con un 4 y un comentario. En Supabase, Table Editor → respuestas: ahí está tu fila, con la hora.

Mirar la tabla en Supabase sirve para comprobar. Para el día a día quieres un panel.

Agrega una página privada resultados.html con un panel simple: cuántas
respuestas hay, el promedio, cuántas de cada nota (una barra por nota) y
los últimos diez comentarios con su fecha.

- Los datos los lee una función del sitio en Vercel, no la página
  directamente, para que las llaves no salgan a la luz.
- Protege el panel con una clave que vaya en la dirección, guardada también
  como variable de entorno en Vercel. Dime qué nombre le pusiste y cómo
  queda la dirección completa.
- Mismo estilo que la encuesta. Vuelve a publicar en el mismo proyecto.

En el vivo la clave quedó en una variable llamada PANEL_CLAVE y la dirección terminó en resultados.html?clave=…. Sin la clave, la página dice que es privada y no muestra nada. Esa dirección completa es tuya: no la pegues en un chat grupal.

El mismo gesto de los otros dos. Camino A: botón + → Conectores, busca Resend; si no aparece, conector personalizado con la dirección oficial https://mcp.resend.com/mcp. Camino B: Composio. Resend tiene además un plugin oficial (+ → Plugins) con buenas prácticas de correo; es opcional.

Esta es la única llave que cargas a mano en toda la clase, porque Resend no se la entrega a Claude.

1. En vercel.com, abre tu proyecto → Settings → Environment Variables → Add New.
2. Key: el nombre que te dijo Claude (en el vivo, RESEND_API_KEY). Value: la llave que creaste en Resend antes de la clase. Environment: Production. Save.
3. Vuelve al chat y escríbele que ya está:

Ya agregué la llave en Vercel, vuelve a publicar.

1. Escaneas el QR y pones un 5. No llega nada. Correcto.
2. Pones un 1 o un 2 con un comentario. Revisa tu correo — y la carpeta de spam la primera vez. Ahí está.

Con el panel recién publicado, una alumna preguntó si el look & feel se podía mejorar, y pidió el logo de la marca. Este no estaba en el guion: se escribió en el momento, y por eso vale la pena verlo tal cual. Primero el pedido general, y un segundo mensaje con el logo adjunto:

me gusta todo como está, pero lo encuentro muy plano, haz un diseño más atractivo tanto
para la encuesta del cliente como para el dashboard, al dashboard ponle barras de colores
coherentes para lo bueno y lo malo.

usa el logo de mi marca que está en el archivo adjunto y usa esos colores como branding

Un cambio que debía tomar cinco minutos tomó casi media hora, y la clase terminó con Claude todavía publicando. Lo que había pasado, en palabras del propio Claude cuando terminó: el logo llegó en JPG, lo convirtió a PNG con fondo transparente (para eso escribió una pequeña función en Python), y al incrustarlo en las páginas como texto larguísimo se corrompía cada vez que lo copiaba a mano. Lo resolvió achicándolo y verificándolo con una huella antes de darlo por bueno.

Una alumna preguntó lo que todos pensaban: ¿y si esto pasara en la vida real, se puede parar y hacerlo de otra forma? Sí. Puedes interrumpirlo en cualquier momento. Pero la buena práctica es otra: antes de un cambio grande, pídele que deje una versión base — un punto al que volver — y si el cambio sale mal, usas /rewind para regresar a un mensaje anterior de la conversación y tomar otro camino desde ahí.

En el vivo no se usó, porque el cambio ya iba avanzado y detenerlo habría perdido el progreso. Pero la lección quedó dicha: checkpoints antes, rewind después.

Cuando terminó, terminó bien: la encuesta, el QR y el panel con el logo y sus colores, y las barras del panel en verde para las notas buenas y en rojo para las malas.

1. Modo Manual hasta que confíes, y leer las tarjetas: la que habla de comprar, borrar o pagar se rechaza.
2. Un conector es tu cuenta. Supabase acotado a un proyecto; nunca la base de un cliente ni la de producción.
3. Las llaves viven en Vercel. No en el chat, no en la página, no en WhatsApp. La secret, nunca en un navegador. Y si una llave se vio en una pantalla compartida, se elimina y se crea otra — es lo que se hizo después del vivo.
4. La encuesta es anónima a propósito. Si algún día pides nombre o correo, di para qué lo usas.

Y si todo sale mal: borras la carpeta del proyecto y el proyecto en Vercel, y empiezas de nuevo con el Prompt 1. Nada de esto toca el resto de tu computador. Por eso trabajamos en una carpeta.

Tu encuesta, con tu nombre y tu pregunta, publicada. El QR impreso donde lo vea un cliente. Antes, una prueba tuya con un 1, para ver que el correo llega. Si te trabas, para eso está el grupo de WhatsApp: se contesta, y si hace falta se abre un Meet de diez minutos para destrabar.

• Una segunda pregunta: «¿Qué podríamos mejorar?», con tres opciones para tocar.
• Una encuesta por sucursal o por mesa: el mismo QR con un número al final de la dirección, y el panel separado por ese número.
• Que se vea como tu marca: el Capítulo 7, pero desde el principio y con calma.
• Un resumen semanal por correo: «todos los lunes, cuántas respuestas, el promedio y los tres comentarios más largos». Te va a proponer una tarea programada en Vercel.
• Respuestas por voz, como pidieron dos alumnos en el vivo: el cliente deja un audio en vez de escribir, un transcriptor (Deepgram regala créditos al crear la cuenta) lo pasa a texto y el análisis sigue igual. Es totalmente factible; es un paso más que el de hoy.
• Al revés: una entrada de reclamos. La misma estructura sirve para recibir peticiones, quejas y reclamos, clasificarlas y seguirlas en el panel.
• Enlazarla desde tu landing de la Clase 8, o desde la firma de tu correo.

Guárdalos: son los que más se repiten después del primer resultado.

Explícame qué hace cada archivo de esta carpeta, en dos líneas cada uno,
sin tecnicismos.

Antes de hacerlo, dime qué archivos vas a tocar y qué va a cambiar para el
cliente. Espera mi ok.

Cambia solo esto: [el cambio]. No toques nada más.

Deshaz el último cambio y déjalo como estaba antes.

¿Qué conectores tienes disponibles en esta sesión y qué puedes hacer con
cada uno?

Para cerrar

En la Clase 1 le aprendiste a hablar. En la 2 construiste con ella. En la 5 le ordenaste el contexto, en la 6 le diste las llaves de tu día, en la 7 le enseñaste tus procesos y en la 8 le diste tu criterio visual. Hoy le diste manos. Nos vemos en la próxima.

La grabación es un solo video de 55 minutos: el vivo, sin las esperas ni las tangentes, y a continuación las tres grabaciones cortas de esa misma noche donde se terminó el Paso 4 y se probó el correo.