Una herramienta local útil

Esta lección todavía está en pruebas: mejora con los comentarios de quienes la siguen. Si algo no está claro, hay que corregir la lección, no a ti.

Al final de esta lección, sabrás

hacer construir una herramienta a partir de tu especificación;
entender dónde están sus datos y qué puede borrarlos;
prever una copia de seguridad que puedes exportar y volver a importar;
comprobar cada criterio por tu cuenta.

Por qué te interesa

Una página que muestra información está bien. Una herramienta que conserva tus datos de una vez para otra es lo que cambia tu día a día: un registro de préstamos, una lista de seguimiento, un pequeño cálculo que se repite. Esta lección la construye en un solo archivo, sin servidor ni cuenta. Pero una herramienta así tiene un límite que hay que conocer antes de confiarle nada: sus datos viven en tu navegador.

Antes de empezar


Necesitas	Claude Code (app o terminal), en modo Manual, tu especificación (lección 1) y un navegador
Costo	La suscripción del agente: como mínimo Claude Pro, 18 € al mes sin IVA con facturación mensual, o 15 € al mes sin IVA con la suscripción anual de 180 € pagada por adelantado; precios mostrados en claude.com/pricing a fecha de 24/10/2026
Duración	90 minutos
Recordatorio	Prueba con datos inventados, nunca con la información real de alguien

Entenderlo en 3 minutos

¿Dónde están los datos? Una herramienta en un solo archivo, sin servidor, suele guardar sus datos en el almacenamiento local del navegador. Según MDN (la documentación de referencia de la web, 24/10/2026), estos datos se conservan entre sesiones del navegador y no tienen fecha de caducidad. Pero:

están ligados a ese navegador, en esa computadora: otro navegador u otra computadora muestra en principio una herramienta vacía (en una página abierta desde un archivo, el comportamiento exacto depende del navegador: en nuestra prueba del 28/10/2026, Chrome daba el mismo almacenamiento a todas las páginas abiertas desde un archivo; por eso, pídele al agente que dé a cada una de tus herramientas su propio nombre de almacenamiento);
en navegación privada, se borran cuando se cierra la última pestaña privada;
borrar los datos de navegación también los borra.

De ahí la copia de seguridad. Un botón «Exportar» que guarda un archivo, un botón «Importar» que lo vuelve a cargar. Es tu copia, para guardarla con tus otras copias (módulo 5, lección 6).

Construir y luego comprobar. El agente construye según la especificación. Tú compruebas cada criterio de «Funcionó si», uno por uno. Pregúntale cómo comprobar cada uno: es una lista de pruebas que hacer.

Hagámoslo juntos

1Paso 1: Construir

En Claude Code, en tu carpeta de proyecto, en modo Manual:

Lee specification.md. Construye la versión mínima en un solo archivo, [nombre].html, exactamente según la especificación.
Sin bibliotecas, sin cargar nada desde Internet. No crees ningún otro archivo.
Luego dime cómo comprobar por mi cuenta cada criterio de «FUNCIONÓ SI», en 1 línea por criterio.

En nuestra prueba del 24/10/2026, para el registro de préstamos del club, el agente construyó un archivo de 382 líneas, sin bibliotecas, y dio una prueba por criterio (por ejemplo: «Anota 3 préstamos y marca 1 como «Devuelto»: la lista muestra exactamente 2 filas»).

2Paso 2: Comprobar cada criterio

Abre la herramienta con un doble clic (lección 2). Haz cada prueba de la lista, con datos inventados, y márcala.

En nuestra prueba, hicimos estas comprobaciones de forma automática, en un navegador real (Chromium), abriendo el archivo como con un doble clic: todos los criterios se cumplieron, incluidos «ninguna solicitud a Internet» y un préstamo de 15 días marcado con retraso, y no el de 14 días. Después de cerrar y volver a abrir el navegador, los préstamos seguían ahí.

3Paso 3: La copia de seguridad, de verdad

Haz clic en Exportar una copia de seguridad: un archivo .json llega a tu carpeta de descargas (o tu navegador te pregunta dónde guardarlo, según su configuración).
Guárdalo en tu carpeta de copias.
Para practicar: abre la herramienta en otro navegador (allí el registro está vacío) y luego importa el archivo. Todo debe volver. Sin un segundo navegador: elimina uno por uno tus préstamos de prueba, con el botón de eliminar de tu herramienta, y luego importa el archivo. No borres para eso los datos de navegación de todo tu navegador: eso borra también las cookies y los datos de los otros sitios.

En nuestra prueba, el borrado lo hizo un script de prueba: 2 préstamos, luego 0 después del borrado, y de nuevo 2 después de la importación.

4Paso 4: Entender la herramienta

Explícame [nombre].html en 6 líneas, sin tecnicismos: dónde se guardan los datos, qué pasa cuando hago clic en cada botón y qué podría borrar los datos. No modifiques nada.

Para comparar con un resultado ya hecho, puedes abrir el ejemplo del registro de préstamos (recursos): es la herramienta construida en nuestra prueba.

Ahora te toca a ti

Haz construir tu herramienta a partir de tu especificación.
Comprueba cada criterio, con datos inventados, y márcalos en la especificación.
Haz una exportación, guárdala y practica cómo volver a importarla.
Anota en tu diario: dónde están los datos y cómo hacer una copia de seguridad.

Recursos para descargar

Ejemplo: el registro de préstamos del club: la herramienta construida en nuestra prueba (datos inventados, nada cargado desde Internet).

Comprobar

Funcionó si:

la herramienta se abre con un doble clic y cumple cada criterio de tu especificación;
comprobaste por tu cuenta cada criterio, con datos inventados;
una exportación, y luego una importación, devuelven todos los datos;
sabes decir qué puede borrar los datos de la herramienta.

Errores frecuentes:

creerle al agente cuando dice «todo funciona», sin comprobar;
probar con los datos reales de alguien;
usar la herramienta en navegación privada y perderlo todo al cerrar;
no exportar nunca una copia de seguridad.

Guardar y retomar

Exporta una copia de seguridad en cada sesión de uso importante y guárdala con tus copias.
Guarda una versión de la herramienta que funciona (lección 5).

Para ir más lejos

opcional

Una herramienta compartida entre varias personas (cada una ve los mismos datos) necesita un servidor y una base de datos: es otro nivel, con costos, cuentas y datos personales que proteger. Empieza siempre por la versión local.

Palabras nuevas

4 palabras explicadas

Palabra	Lo que significa
Almacenamiento local	El espacio donde el navegador guarda los datos de una página, en tu computadora
Exportar	Guardar los datos de la herramienta en un archivo
Importar	Volver a cargar los datos desde ese archivo
Datos inventados	Ejemplos sin relación con personas reales, para probar

La construcción y las comprobaciones de los pasos 1 a 3 se hicieron realmente con Claude Code 2.1.310 y luego en Chromium sin pantalla (informe de pruebas, T54). Las sesiones de prueba con Claude Code se hicieron en modo no interactivo (claude -p), una sola vez cada una: lo que veas puede ser diferente (solicitudes de permiso, redacción, número de preguntas). La persistencia después de volver a abrir el navegador también se comprobó en WebKit, el motor de Safari (T64). Por verificar: la herramienta no se ha probado en el propio Safari, ni en Firefox ni en Edge; según MDN, el almacenamiento local puede dar problemas cuando la página se abre desde un archivo, según el navegador.