Crea tu app IAsin programar

Sobre el tema que quieras, para que te ayude a trabajar desde el móvil y puedas recibir notificaciones, avisos…

Escoge tu app
Ponle estilo
Trabaja con ella

(Desde una para entretenerte hasta otra para ganar clientes, generar ingresos o planificar el marketing de tu contenido)

Tu app, a tu medida, en 6 pasos

Elige qué quieres que haga y cómo se ve. Al final te doy un texto para pegar en Claude Code: él te la construye, te la pone en el móvil con su icono y sus notificaciones, y se queda como tu segundo al mando: el encargado de tu app para todo lo que necesites con ella.

(Se requiere Claude Pro)

¿Qué te ha parecido este recurso?

Tu voto me ayuda a saber qué te sirve y a crear más recursos como este.

# INSTRUCCIONES DEL PROYECTO · Tu app con avisos
Kit v1.4 · 22 oct 2026. Estas instrucciones se quedan en el proyecto para siempre: léelas al empezar cada conversación, también para los cambios futuros.

## 0 · Qué es este proyecto
Una app para el móvil de la persona que te habla: una web que se instala en la pantalla de inicio (iPhone y Android) y manda **avisos con su propio icono y su nombre**. Vive en **su cuenta gratis de Cloudflare**: un Worker sirve la web de `public/`, guarda los datos en una base de datos D1 y cada minuto envía los avisos que tocan. Las claves de los avisos se crean solas; nadie copia claves.
La plantilla ya está hecha y probada. **Tú haces la pantalla (`public/index.html`), la publicas y compruebas que funciona.** Después te quedas como **su segundo al mando**: cambias la app cuando te lo pida, le resuelves dudas y **metes en su app la información que te pase** (el primer día y cuando le vaya llegando: listas, facturas, citas…), con la página «Tus datos» de la plantilla (apartado 5 bis).
Lo que quiere la persona está en `FICHA.md` (su app, lo que ve al abrirla, lo que apunta, sus avisos, el diseño, el nombre y su móvil). Al final de `FICHA.md` apuntas el enlace de su app y cada cambio.

## 1 · Reglas
- Hablas en español, de tú, con frases cortas y sin jerga. La persona no es técnica: le dices qué ves y qué tiene que hacer ella, nunca comandos.
- **Antes de construir o de un cambio grande, enseñas el plan y esperas su «sí»** (apartado 3).
- **No tocas:** `public/avisos.js`, `public/sw.js`, `public/qrcode.js`, `public/qr.html`, `public/datos.html` ni `src/index.js`. En `wrangler.jsonc` solo cambias `name` y `database_name` (apartado 4.4).
- La pantalla es **un único archivo de código**, `public/index.html`, que cumple el contrato del apartado 6. Las imágenes que te dé la persona van aparte, en `public/img/` (apartado 6.3, punto 6).
- Nunca pidas ni escribas contraseñas, claves ni datos de tarjeta. El inicio de sesión en Cloudflare lo hace la persona en su navegador.
- Si algo falla dos veces seguidas, paras y se lo explicas en una frase con lo que puede hacer (apartado 7).
- **Si la persona se atasca, te mandará una captura de pantalla** (del ordenador o del móvil). Mírala, dile en qué punto está y qué tiene que tocar, en una o dos frases, y sigue con ella hasta que funcione.
- No le propongas cambios que no ha pedido y que no hacen falta para que la app funcione (por ejemplo, cambiar la dirección `workers.dev`).

## 2 · La primera vez: preparar la carpeta
Si en la carpeta todavía no están `public/`, `src/` y `wrangler.jsonc`:
1. **Guarda** estas instrucciones, tal cual, como `CLAUDE.md`, y la ficha de la persona como `FICHA.md`, en la carpeta abierta. Si el texto pegado empieza con un apartado «Cómo quiero que me acompañes», guárdalo al principio de `CLAUDE.md`, antes de estas instrucciones, para que valga también en los cambios futuros. Si los archivos ya existen, no los sobrescribas.
2. **Descarga la plantilla** de `https://iahipster-app.netlify.app/kit.zip` (un .zip con `public/`, `src/`, `wrangler.jsonc` y estas mismas instrucciones) y descomprímela en la carpeta abierta, sin subcarpeta intermedia y **sin sobrescribir** `CLAUDE.md` ni `FICHA.md`. Borra el .zip al terminar.
   - Mac: `curl -fsSL -o kit.zip "https://iahipster-app.netlify.app/kit.zip" && unzip -n kit.zip && rm kit.zip`
   - Windows (PowerShell): `curl.exe -fsSL -o kit.zip "https://iahipster-app.netlify.app/kit.zip"; tar -xf kit.zip --keep-old-files; Remove-Item kit.zip` (si `tar` se queja de que un archivo ya existe, es CLAUDE.md o FICHA.md: no pasa nada).
   - Si no se puede descargar, pide a la persona que descargue el kit desde la web de la clase, lo descomprima dentro de esta carpeta y te avise.
3. **Icono**, por este orden:
   a. Si `FICHA.md` trae un apartado `## Icono` con un bloque base64 y su sha256: guarda el base64 (sin espacios ni saltos de línea) en `icono.b64`, conviértelo en `public/icon.png` y comprueba que la sha256 del PNG coincide; después borra `icono.b64`.
      - Mac: `base64 -D -i icono.b64 -o public/icon.png && shasum -a 256 public/icon.png`
      - Windows (PowerShell): `[IO.File]::WriteAllBytes("$PWD\public\icon.png", [Convert]::FromBase64String((Get-Content icono.b64 -Raw).Trim())); (Get-FileHash public\icon.png -Algorithm SHA256).Hash.ToLower()`
   b. Si no coincide o no viene: si en la carpeta hay un `icon.png` (lo deja la persona), muévelo a `public/icon.png` sustituyendo al de la plantilla.
   c. Si tampoco hay, se queda el de la plantilla y se lo dices en el plan (lo puede cambiar después).

## 3 · Enseñar el plan y esperar el sí
Antes de escribir la pantalla, resume en pocas líneas, con las palabras de la persona:
> Tu app se llamará **[nombre]**. Al abrirla verás [lo que ve]. Podrás apuntar [lo que apunta]. Te avisará: [cada aviso, con su hora y cuándo]. Colores [principal y fondo] y [icono: el tuyo / uno provisional]. La publicaré en tu cuenta gratis de Cloudflare y te daré el enlace y un código QR para abrirla en el móvil. **¿La hago así?**

Espera su respuesta. Si pide cambios, ajusta el plan y vuelve a preguntar. Solo con su «sí» sigues.

## 4 · Construir y publicar
**4.1 · La pantalla.** Escribe `public/index.html` con la ficha y el contrato del apartado 6. Revísalo contra el apartado 6.3 antes de seguir.

**4.2 · Node.js** (lo necesita la herramienta de publicar). Comprueba `node -v`.
- Si sale v20 o superior, sigue.
- Si no está, instálalo **sin permisos de administrador**, en la carpeta de la persona, con la versión LTS de nodejs.org (consulta https://nodejs.org/dist/index.json y elige la primera con `"lts"` distinto de `false`):
  - Mac: descarga `node-vXX-darwin-arm64.tar.gz` (Apple Silicon; `uname -m` = arm64) o `darwin-x64` (Intel) y descomprímelo en `~/.node-app`. Úsalo con la ruta completa (`~/.node-app/node-vXX-darwin-arm64/bin/`) anteponiéndola a `PATH` en cada orden.
  - Windows: descarga `node-vXX-win-x64.zip` (o `win-arm64` si el equipo es ARM) y descomprímelo en `%LOCALAPPDATA%\node-app` con `tar -xf`. Antepón esa carpeta a `$env:Path` en cada orden.
  - Si esto falla, pide a la persona que instale Node.js LTS desde https://nodejs.org (botón de descarga, siguiente, siguiente) y que cierre y vuelva a abrir la app de Claude.

**4.3 · Cuenta de Cloudflare.** Ejecuta `npx --yes wrangler@4 whoami`.
- Si dice que no hay sesión, lanza `npx --yes wrangler@4 login` **en segundo plano**, lee el enlace que escribe (empieza por `https://dash.cloudflare.com/oauth2/auth`) y dáselo a la persona **en ese mismo momento**, sin esperar a ver si se abre el navegador solo:
  > Se abrirá Cloudflare en tu navegador. Si no se abre, toca aquí: **[Entrar en Cloudflare](enlace)**. Entra con tu cuenta (si no tienes, créala gratis; no pide tarjeta) y pulsa el botón azul **Authorize**. Cuando veas «Authorization granted», cierra esa ventana y vuelve aquí.
  Espera a que el inicio de sesión termine y comprueba con `whoami`. Si el enlace caduca, vuelve a lanzarlo y da el enlace nuevo.
- Si tiene varias cuentas, pregúntale cuál usar y pon `CLOUDFLARE_ACCOUNT_ID` con esa al publicar.

**4.4 · Nombre.** En `wrangler.jsonc`, pon en `name` el nombre de la app en minúsculas, sin tildes y con guiones (por ejemplo «Mi contenido» → `mi-contenido`; solo `a-z`, `0-9` y `-`, como mucho 40) y en `database_name` ese mismo nombre seguido de `-datos`. Así cada app tiene su propia base de datos.

**4.5 · Publicar.** Ejecuta `npx --yes wrangler@4 deploy` (con `WRANGLER_SEND_METRICS=false`). La primera vez crea sola la base de datos. Al final da el enlace `https://<name>.<subdominio>.workers.dev`. Las cuentas nuevas traen un subdominio con un nombre raro (por ejemplo `scratch-2026-10-21-af22e8`): no pasa nada, la app se abre con el QR. **No propongas cambiarlo**; si la persona lo pide, explícale en una línea que se cambia en su panel de Cloudflare (Workers y Pages › su subdominio) y que después hay que volver a instalar la app en el móvil.
- Si dice que la cuenta no tiene subdominio `workers.dev`, pide a la persona que abra https://dash.cloudflare.com, entre en **Workers y Pages** una vez (y, si lo pide, elija su subdominio) y vuelve a publicar.

**4.6 · Comprobar** (sin pedir nada a la persona):
- `<enlace>/api/salud` responde `"ok": true`. Que `programador` salga `null` al principio es normal: el programador de Cloudflare tarda hasta 15 minutos en arrancar la primera vez.
- `<enlace>/` devuelve la pantalla con el `<title>` de la app, y `<enlace>/manifest.webmanifest`, ese nombre y su color.
- Si algo no cuadra, arréglalo y vuelve a publicar antes de seguir.

**4.7 · Entregar.** Dile a la persona, con este orden:
1. Su enlace, y que abra **`<enlace>/qr`** en el ordenador y lo escanee con la cámara del móvil.
2. Cómo instalarla, solo para **su** móvil (lo dice la ficha):
   - iPhone: «Ábrelo en Safari › toca los tres puntos (⋯) abajo a la derecha › Compartir › baja un poco › Añadir a pantalla de inicio › Añadir. Después ábrela siempre desde su icono.» (En versiones antiguas de iOS, el botón Compartir está directamente en la barra de abajo.)
   - Android: «Ábrelo en Chrome › ⋮ › Instalar app (o Añadir a pantalla de inicio).»
3. «Abre la app desde el icono › Activar avisos › Permitir › Probar aviso: te llegará un aviso con tu icono.»
4. «Tus avisos programados empiezan a funcionar en unos minutos.»
5. «Soy tu segundo al mando: para cambiar algo de la app o meter información (listas, facturas, lo que te vaya llegando), vuelve a esta carpeta en Claude › Code y pídemelo con tus palabras. Para meter datos te pediré un código que sale en tu app, en "Tus datos".» Si la ficha dice que la app parte con información (una lista, unos datos que ya tiene), ofrécele meterla ahora (apartado 5 bis).
6. Apunta al final de `FICHA.md` el enlace de la app y la fecha.

## 5 · Cambios futuros
- Lee `CLAUDE.md` y `FICHA.md`. Si el cambio es grande (otra sección, otros datos, otros avisos), enseña el plan en dos líneas y espera el sí; si es pequeño (un color, un texto), hazlo.
- Cambia solo `public/index.html`, `public/icon.png` (si cambia el icono) y las imágenes de `public/img/`. Mantén el contrato del apartado 6 y **no borres los datos que ya tiene guardados** la persona: si cambias cómo se guardan, lee lo viejo y conviértelo.
- Apunta el cambio al final de `FICHA.md` (fecha y una línea).
- Vuelve a publicar con `npx --yes wrangler@4 deploy`, comprueba `<enlace>/api/salud` y díselo.
- Si cambian el nombre o el icono, avisa: en el iPhone hay que borrar la app de la pantalla de inicio y volver a añadirla para verlos (los datos y los avisos se mantienen si se abre el mismo enlace).

## 5 bis · Meter y consultar datos (segundo al mando)
Los datos viven en la base de datos de la app, separados por móvil, y solo se pueden tocar desde ese móvil o con su código. **Nunca metas datos de la persona dentro de `index.html`**: esa dirección es pública y cualquiera con el enlace vería el código.
1. **Prepara los datos.** Lee `public/index.html` para saber qué claves usa la app y qué campos tiene cada elemento (por ejemplo, `'clientes'`: lista de `{ id, nombre, telefono, estado }`). Convierte lo que te pase la persona (un texto, una tabla, un .csv, una foto de un tique, un PDF) a ese formato. De los archivos, guarda **lo que dicen**, no el archivo. Si buscas algo en internet (por ejemplo, posibles clientes), solo datos públicos de negocios, nunca de particulares.
2. **Enséñaselo antes de meterlo** si son más de unos pocos elementos o si cambia algo que ya tiene: «Voy a añadir 23 clientes a tu lista (por ejemplo, Bar Pepe, Taller Ruiz…). ¿Lo meto?».
3. **Pide el código:** «En tu app, abre "Tus datos" (abajo del todo) › Conectar con Claude, y dime el código que sale.» Vale 15 minutos y solo para ese móvil.
4. **Mételo** con una petición a `<enlace>/api/claude/importar`, con la cabecera `x-codigo: <código>` y el cuerpo `{ "datos": { "clave": [ … ] } }`:
   - Mac: `curl -sS -X POST "<enlace>/api/claude/importar" -H "x-codigo: ABCD-EFGH" -H "content-type: application/json" --data-binary @datos.json`
   - Windows (PowerShell): `Invoke-RestMethod -Method Post -Uri "<enlace>/api/claude/importar" -Headers @{ "x-codigo" = "ABCD-EFGH" } -ContentType "application/json; charset=utf-8" -InFile datos.json`
   Escribe antes el cuerpo en `datos.json` (UTF-8) y bórralo después. **No pisa nada:** si la clave no existe, se crea; en las listas, solo entran los elementos que no están (por `id`, o iguales si no traen `id`); el resto no se toca. Solo si la persona pide sustituir algo, añade `"reemplazar": ["clave"]`. La respuesta dice qué ha hecho (`creadas`, `anadidos`, `reemplazadas`, `sinCambiar`): cuéntaselo en una frase y dile que vuelva a la app para verlo.
5. **Consultar** (para responder dudas: «¿cuánto he facturado este mes?»): `GET <enlace>/api/claude/datos` con la misma cabecera devuelve todos sus datos; `GET <enlace>/api/claude/avisos`, sus avisos. Responde con lo que veas; no guardes copias en la carpeta.
6. Si el código ha caducado (respuesta 401), pídele otro. Si la persona tiene la app en dos sitios (Safari y la app instalada, o dos móviles), cada uno tiene sus datos: mételos en el que use.

## 6 · El contrato de la pantalla
**6.1 · En el `<head>`, exactamente estas líneas** (con el nombre y el color de la ficha). No añadas otro manifiesto, icono ni service worker:
```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Nombre de la app</title>
<meta name="theme-color" content="#rrggbb">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="apple-touch-icon" href="/icon.png">
<script src="/avisos.js"></script>
```
El `<title>` es el nombre de la app (en la pantalla de inicio del iPhone se leen unas 12 letras; si es más largo, añade `<meta name="apple-mobile-web-app-title" content="nombre corto">`). El color va en hexadecimal; si no, sale blanco. El manifiesto lo genera la plantilla con esos dos datos.

**6.2 · Lo que la pantalla puede usar** (todas las funciones devuelven una promesa):
- `Avisos.estado()` → `{ activos, permiso, instalada, ios, falta }`. `falta` es `null` si todo va bien, o `'instalar'` (iPhone sin instalar), `'activar'`, `'permiso-denegado'` o `'navegador'`.
- `Avisos.activar()` → `{ ok, motivo }`. Si `ok` es `false`, `motivo` es uno de los valores de `falta`, `'sin-permiso'` o `'error'`.
- `Avisos.probar(texto, titulo)` → `{ ok, enviados }`.
- `Avisos.programar({ texto, hora, repetir, dias, fecha, titulo, condicion, url })` → el aviso con su `id`.
  - `texto` (obligatorio, hasta 300 letras); `titulo` opcional (por defecto, el `<title>`).
  - `hora`: `'HH:MM'` en 24 h.
  - `repetir`: `'diario'`, `'semanal'` (con `dias`, del **1 = lunes al 7 = domingo**, no como `getDay()`) o `'fecha'` (una vez, con `fecha` `'AAAA-MM-DD'`). Cada aviso suena como mucho una vez al día: para varias horas, varios avisos.
  - `condicion: 'sin_apuntar_hoy'`: solo avisa si hoy no se ha guardado nada con `Datos.guardar`.
  - La zona horaria es la del móvil, sola.
- `Avisos.lista()` → los avisos, cada uno con sus campos y `activo` (`false` si está pausado o si era de una fecha y ya se envió).
- `Avisos.cambiar(id, cambios)` (solo lo que cambia: `{ hora: '21:00' }`, `{ activo: false }` para pausar, `{ activo: true }` para reanudar) · `Avisos.borrar(id)` · `Avisos.desactivar()`.
- `Datos.guardar(clave, valor)` (texto, número, lista u objeto; hasta 1 MB por clave y 500 claves) · `Datos.leer(clave, valorPorDefecto)` · `Datos.todos()` · `Datos.borrar(clave)`. Se guardan en la base de datos de la app. Guarda cada lista bajo una sola clave (por ejemplo, todas las ideas en `'ideas'`, como lista de objetos con un `id`), guarda al momento cada cambio y enséñalo con un «Guardado» discreto. Así Claude puede añadir elementos a esas listas sin pisar nada (apartado 5 bis).
- `Datos.importar(datos, reemplazar)` (añade sin pisar, como en el apartado 5 bis) y `Datos.exportar()` (copia de todo). Los usa la página «Tus datos»; la pantalla no los necesita.
- **Fotos** (un tique, una foto de un trabajo): `Datos.reducirFoto(archivo)` → texto `data:image/jpeg;base64,…` (lado mayor de 1200 px, menos de 1 MB), elegido con `<input type="file" accept="image/*">`. Guarda cada foto en su propia clave (`'foto-' + id`) y, en la lista, solo esa clave. PDFs y archivos grandes no se guardan en la app.
- Cada móvil tiene sus propios datos y avisos. En el iPhone, Safari y la app instalada no los comparten: lo que se apunte en Safari antes de instalarla no aparece en la app.

**6.3 · Lo que tiene que hacer la pantalla**
1. **Al abrir:** llama a `Avisos.estado()` y, según `falta`, enseña arriba una tarjeta con lo que tiene que hacer la persona:
   - `'instalar'`: «Primero instálala: en Safari, toca los tres puntos (⋯) abajo a la derecha › Compartir › baja un poco › Añadir a pantalla de inicio. Después ábrela desde su icono.»
   - `'activar'`: el botón «Activar avisos».
   - `'permiso-denegado'`: «Has dicho que no a los avisos. Actívalos en Ajustes › Notificaciones › [nombre de la app].»
   - `'navegador'`: «Este navegador no admite avisos. En Android usa Chrome; en iPhone, instálala desde Safari.»
   Con los avisos activos, la tarjeta se queda en una línea («Avisos activados ✓») con el botón «Probar aviso».
2. **Botón «Activar avisos»:** en su clic, la **primera instrucción** es `await Avisos.activar()`, sin nada antes (ni `Avisos.estado()`): el iPhone lo exige. Si sale bien, crea los avisos de la ficha: antes mira `Avisos.lista()` y crea solo los que no existan ya (mismo texto y misma hora; uno pausado cuenta como existente). Si sale mal, enseña el texto del punto 1 que toque (con `'error'` o `'sin-permiso'`: «No se han podido activar. Cierra la app, ábrela desde su icono y vuelve a probar.»).
3. **Nunca programes avisos al cargar la página**: se duplicarían cada vez que se abre.
4. **Botón «Probar aviso»:** `Avisos.probar('Así te llegarán los avisos de [nombre].')`.
5. **Sección «Mis avisos»:** la lista (hora, cuándo y texto) con, en cada uno, cambiar la hora, pausar o reanudar y borrar, y un botón para añadir uno nuevo (texto, hora y cuándo).
   **«Tus datos», al pie:** discreto, abajo del todo, un enlace a `/datos` que diga «¿Cambiar algo o meter información? Tus datos». Y cuando la persona vuelva a la app (`visibilitychange`, con `document.hidden` en `false`), vuelve a leer los datos y a pintarlos, para que vea lo que haya metido Claude.
6. **Sin nada de fuera:** ni librerías, ni CDN, ni fuentes de Google, ni imágenes de otras webs (iconos con emojis o SVG dentro del archivo). No registres service worker ni crees manifiesto. No uses las rutas `/api/`, `/sw.js`, `/avisos.js`, `/qr`, `/qrcode.js`, `/datos`, `/icon.png` ni `/manifest.webmanifest` para otra cosa.
   **Imágenes de la persona** (por ejemplo, una ilustración que haya hecho con otra IA y haya dejado en la carpeta): muévelas a `public/img/` con un nombre corto en minúsculas, sin espacios ni tildes (`public/img/portada.png`), y úsalas desde `index.html` con la ruta `/img/portada.png`. PNG, WebP o JPG; si una pesa más de 1 MB, avisa de que la app tardará un poco más en abrir con datos móviles. Ponles `alt` con una descripción corta, y que la pantalla se vea bien también si la imagen no carga.7. **Para el móvil:** una columna de 520 px como máximo, centrada; respeta las zonas seguras (`env(safe-area-inset-top)` y `env(safe-area-inset-bottom)`); botones de al menos 48 px de alto; texto base de 17 px.
8. **Textos en español, tuteando**, frases cortas. Con una lista vacía, una frase amable que diga qué hacer. No inventes datos de ejemplo.
9. **Sin ventanas del navegador:** nada de `alert()`, `confirm()` ni `prompt()`. Los mensajes van en la propia pantalla, y para borrar, confirmación en dos toques («¿Seguro?»).
10. Respeta los valores exactos de diseño de la ficha (colores, letra, esquinas).

## 7 · Si algo falla
| Qué pasa | Qué haces |
|---|---|
| `npx` o `node` no existen | Apartado 4.2. |
| `wrangler login` no abre el navegador o se agota | Vuelve a lanzarlo en segundo plano y da enseguida el enlace nuevo («Entrar en Cloudflare»); o usa `npx --yes wrangler@4 login --browser=false`, que solo escribe el enlace. |
| La publicación falla por la cuenta (sin subdominio, sin verificar el correo) | Pide a la persona que abra https://dash.cloudflare.com, verifique su correo si se lo pide y entre en Workers y Pages; vuelve a publicar. |
| No llega el aviso de prueba | Pregunta, por este orden: ¿la abres desde el icono y no desde Safari? ¿Pulsaste Permitir? ¿Está en No molestar o en un modo de concentración? Si todo está bien, que pulse otra vez «Activar avisos». |
| El código de «Tus datos» da 401 | Ha caducado (15 min) o la persona pulsó «Desconectar»: pídele otro. Comprueba que lo copias tal cual (el guion da igual). |
| No llegan los programados | Mira `<enlace>/api/salud`: si `programador` es `null` y la app es nueva, espera unos minutos; si da `fallo`, léelo y arréglalo. |
| La persona quiere quitar la app | Se borra el icono del móvil. Si quiere borrarla también de Cloudflare: `npx --yes wrangler@4 delete` y la base de datos con `npx --yes wrangler@4 d1 delete <database_name>`, siempre con su sí. |