De la idea a la app.El caso RocoWork.
Cómo un equipo de contenido construyó su propia plataforma colaborativa —tareas, videos, calendario, inspiración— usando IA, sin saber programar, y la puso en internet funcionando de verdad.
Todo empezó con una necesidad real
Nada de "quiero hacer una app". El punto de partida fue un problema concreto del día a día de un equipo que produce videos para redes:
Recreación de la conversación que dio origen al proyecto.
Planear antes de programar
La regla fue clara: planear ANTES de intentar construir. Nada más nacer la idea, se instaló en Claude Code el skill de Superpowers, y fue él quien guió todo el arranque: entrevistó, ayudó a armar la propuesta y el guion del proyecto, y lo partió en documentos y tareas (el PDF que tienes en tus manos es el primero). Solo con ese plan terminado, Claude Code empezó a construir. Ese plan fue el 50% del éxito.
📄 Descargar el PDF del plan originalEl plan
Qué hace la app, decisiones tomadas, costos. La fuente de verdad del proyecto.
Modelo de datos
Qué información guarda: usuarios, tareas, archivos, estadísticas… y cómo se relacionan.
Arquitectura
Las piezas técnicas y cómo se conectan (la veremos en un diagrama 👇).
Roadmap por fases
El orden de construcción: 8 fases, una a la vez, sin saltarse ninguna.
Pantallas
Qué pantallas existen y qué se ve en cada una.
Seguridad
Las reglas no negociables y la checklist antes de publicar.
⚡ El skill: Superpowers
Metodologías para Claude Code: te entrevista, escribe la propuesta y el diseño, lo parte en tareas y verifica antes de dar nada por terminado. Se usó desde la idea, antes de construir. Instalación (dentro de Claude Code):
/plugin install superpowers@claude-plugins-official
Alternativa: /plugin marketplace add obra/superpowers-marketplace y luego /plugin install superpowers@superpowers-marketplace
El look no salió de la nada: Claude Design
Antes de construir pantallas, se diseñó la interfaz — y tampoco fue "a ver qué inventa la IA". Se le dieron dos ingredientes: qué hace la app y cómo queríamos que se viera.
El resumen
Se le pidió a Claude un resumen de la app: qué hace, qué secciones tiene, para quién es.
Claude Design
Ese resumen + imágenes de referencia del estilo que nos gustaba entraron a Claude Design → propuso la interfaz: modo oscuro, verdes, tarjetas de vidrio.
Handoff al proyecto
Con Share → Handoff to Claude, el diseño aterrizó en el proyecto y se le pidió a Claude Code aplicarlo a la app real.
¿De dónde sacar las referencias? 🔎
Antes de ir a Claude Design, junta 2-3 capturas del estilo que te late. Estas son las mejores galerías para encontrarlo:
🏆 Galerías generales (sitios completos premiados)
📱 UI, componentes y flujos (apps y producto)
🎯 Nichos específicos
💡 Conceptos y exploración (no son webs en vivo)
La arquitectura, sin tecnicismos
Cuatro piezas: el navegador (lo que ve el equipo), el servidor (el cerebro), la base de datos (la memoria) y el almacén de videos (Backblaze B2). Y un truco clave: los videos pesados NUNCA pasan por el servidor — viajan directo del navegador al almacén con un "pase de invitado" que caduca (la famosa URL firmada).
Por fases. Una a la vez. Sin saltarse ninguna.
El roadmap dividió el proyecto en fases pequeñas. Cada una se le pedía a Claude Code (con Fable, su modelo más rápido), se probaba en el navegador, y solo entonces se pasaba a la siguiente.
Fase 0 · PrepararLas cuentas y herramientas
Cuenta de almacenamiento (Backblaze B2), instalar Node y Claude Code. Sin código aún.
Fase 1 · EsqueletoProyecto, base de datos y login
La app nace: menú lateral estilo Notion, modo oscuro, login con dos roles (admin y miembro).
✓ Verificado: entrar/salir con ambos roles.
Fase 2 · El corazónTareas con tabla y Kanban
Crear, asignar y mover tareas (Por hacer → En proceso → Revisión → Terminado). Editor de guion que se guarda solo.
✓ Verificado: cada miembro ve solo lo suyo; el admin ve todo.
Fase 3 · Los videosSubida directa al almacén
Archivos de hasta 2 GB con barra de progreso, usando los "pases firmados" del diagrama anterior.
✓ Verificado: subida real navegador → B2 confirmada.
Fase 4 · InspiraciónGalería de reels
Pegas un link de Instagram o TikTok y todo el equipo lo ve con vista previa, tipo Pinterest.
Fase 5 · CalendarioLas entregas, automáticas
Cada tarea con fecha límite aparece sola en el calendario del mes, coloreada por estado.
Fase 6 · EstadísticasLos números de redes
Captura mensual de Instagram y TikTok con gráficas y comparativa mes contra mes.
Fase 7 · CorreosNotificaciones automáticas
Te asignan una tarea o cambia su fecha → te llega un correo con el enlace directo.
Fase 8 · PublicarLa app sale a internet
Checklist de seguridad completa y despliegue a producción. La app deja de vivir en una computadora.
El lanzamiento (y cuánto cuesta de verdad)
Una app real necesita varias piezas en internet. La sorpresa: casi todas tienen plan gratuito de sobra para un equipo chico.
al mes de operación · ~$1/mes si prorrateas el dominio
* los videos cuestan ~$6 USD por TERABYTE al mes cuando se supere lo gratis — centavos durante mucho tiempo
¿Y si mejor hubiéramos rentado plataformas?
Para hacer lo mismo (tareas + guiones, revisión de video con comentarios al segundo, y almacenar videos pesados) un equipo de 5 necesitaría un combo como este:
🏢 El combo rentado (5 personas)
- Notion — tareas y guiones~$50/mes
- Frame.io — revisión de video~$75/mes
- Drive/Dropbox 2 TB — archivos~$10/mes
🐶 RocoWork (propia)
- Tareas, guiones y calendarioincluido
- Revisión con comentarios al segundoincluido
- Videos pesados (subida directa)incluido
Honestidad: ¿qué sí podríamos llegar a pagar?
El $0 no es magia: son planes gratuitos con límites. La diferencia con rentar es que se paga por uso real, no por persona — y así crecen los números:
| Pieza | Cuándo se empieza a pagar | Cuánto |
|---|---|---|
| 📦 Backblaze (videos) | Al pasar los 10 GB gratis. Hoy: 0.5 GB. Cobra ~$6 por terabyte. | 100 GB ≈ $0.60/mes · 1 TB ≈ $6/mes |
| 📧 Resend (correos) | Al pasar 3,000 correos/mes (un equipo de 5 manda decenas) | difícil llegar · luego $20/mes |
| 🗄️ Neon (base de datos) | Si el uso de la base se vuelve muy intensivo | hoy sobra · luego ~$19/mes |
| 🌐 Netlify (hosting) | Solo con muchísimo tráfico (miles de visitas diarias) | improbable · luego ~$19/mes |
| 🔗 Dominio | Desde el día uno, una vez al año | ~$12/año |
Escenario realista a futuro: con cientos de GB de video acumulados, RocoWork costaría $2–7 USD al mes. El combo rentado seguiría en $135 — y subiendo con cada persona nueva.
La app no termina al lanzar: empieza
En cuanto el equipo la usó de verdad, llegó el oro: feedback real. Este es el mensaje real (resumido) que mandó Roco tras probarla:
La seguridad no es una fase: está en todas
Desde el documento de planeación, estas 5 reglas acompañaron cada fase:
El servidor decide, no el navegador
Cada permiso se verifica del lado del servidor. Lo que ves en pantalla jamás es la única barrera.
Contraseñas irrecuperables
Se guardan "trituradas" (hash). Ni quien administra la base puede leerlas.
El almacén es privado
Nadie puede ver un video con solo adivinar el enlace: todo acceso pasa por un pase firmado.
Los pases caducan
Las URLs firmadas viven minutos u horas. Un enlace filtrado muere solo.
Los secretos, fuera del código
Claves y contraseñas viven en variables de entorno, nunca escritas en el código ni compartidas en chats.
Y al final, la auditoría con un skill 🛡️
Ya terminada la primera versión — y después de iterar varias veces — se corrió un skill de seguridad sobre el proyecto completo antes de publicarlo. Estas son las opciones (todas conviven con Claude Code):
🧪 /security-review (nativo)
El comando oficial de Claude Code: revisa el proyecto buscando vulnerabilidades. El punto de partida más simple.
/security-review
🧠 Skill de Sentry
En vez de darle un checklist, le enseña a la IA a pensar en seguridad. El favorito por método.
npx skills install getsentry/skills@security-review
📋 OWASP Top 10
Audita contra el estándar OWASP 2025 — las 10 vulnerabilidades más comunes en apps web.
npx -y skills add agamm/claude-code-owasp --skill owasp-security --agent claude-code
🔍 security-review (10 dominios)
Revisión amplia que evalúa 10 dominios de seguridad del proyecto.
npx -y skills add affaan-m/everything-claude-code --skill security-review --agent claude-code
🤖 GitHub Action oficial
Para equipos con GitHub: revisa la seguridad automáticamente en cada pull request.
6 lecciones que se llevan a cualquier proyecto
El plan es la mitad del trabajo
Las horas invertidas en documentos antes de programar se recuperan multiplicadas. La IA construye lo que el plan dice — si el plan es vago, la app es vaga.
Fases pequeñas, victorias constantes
Pedir todo junto produce monstruos imposibles de revisar. Pedir poco, probar y avanzar produce apps que funcionan.
Tú decides, la IA construye
La IA no sabe qué necesita tu equipo: tú sí. Las decisiones (qué hace la app, qué es prioridad, qué se descarta) siguen siendo humanas.
El feedback real no tiene sustituto
Las 6 mejoras más valiosas de RocoWork no salieron de la planeación: salieron de Roco usándola una semana.
Estándares = libertad
Protocolo S3 para archivos, Postgres para datos: piezas intercambiables. Si un proveedor falla o cobra de más, te mueves sin reescribir nada.
Producción es otro deporte
Dominio, DNS, certificados, correo, cuentas… La última milla tiene su propia curva. Presupuesta tiempo (y paciencia) para ella.
Glosario para no perderse
- Hosting
- La computadora (de alguien más) donde vive tu app, prendida 24/7 en internet.
- Base de datos
- La memoria ordenada de la app: usuarios, tareas, fechas. Todo lo que debe recordarse.
- Bucket
- Una "cubeta" de almacenamiento en la nube donde se echan archivos (aquí, los videos).
- URL firmada
- Un enlace con pase de invitado: da acceso a UN archivo por tiempo limitado y luego caduca.
- Deploy (desplegar)
- Publicar la app: subir la versión nueva al hosting para que todos la usen.
- Dominio
- La dirección con nombre propio (rocowork.com en vez de un enlace genérico). Se renta por año.
- DNS
- La "agenda telefónica" de internet: traduce el dominio a la dirección real donde vive la app.
- Certificado SSL (el candado 🔒)
- Lo que cifra la conexión y hace que el navegador no marque el sitio como "no seguro".
- Variable de entorno
- Una cajita secreta junto a la app donde viven las claves, fuera del código.
- CORS
- El permiso que un servicio (el almacén) da para que tu página web le hable directamente.
- Producción
- La versión "de verdad" de la app, la que usa el equipo. Lo contrario de "en mi computadora".
- Skill (de Claude Code)
- Un "manual de método" que se le instala a la IA. Las de Superpowers la obligan a planear, preguntar y verificar antes de programar.
- Roadmap
- El mapa de ruta: la lista ordenada de fases para construir sin perderse.