Herramienta de levantamiento inteligente de procesos para consultoría tecnológica. Llegas con tu iPad a una empresa y TMD te ayuda a responder:
- ¿Cómo funciona la empresa?
- ¿Qué problemas tiene?
- ¿Qué software necesita?
- ¿Cuál es el ROI de automatizarla?
- ¿Qué roadmap tecnológico proponer?
Genera, en automático, roadmap por fases, estimación de proyecto, ROI y documentos (ejecutivo, técnico, roadmap, cotización y contrato).
La app está construida sin dependencias ni paso de compilación. Tres formas de usarla:
- Doble clic en
index.html(funciona directo en el navegador, modofile://). - Servidor local (recomendado para desarrollo):
Luego abre
# Con Node npx serve . # o con Python python -m http.server 8080
http://localhost:8080. - Hospedada en cualquier hosting estático (Netlify, Vercel, GitHub Pages, IIS…).
Al estar en
https, se activa el modo offline (PWA) y puedes agregarla a la pantalla de inicio del iPad (Compartir → Agregar a inicio).
Los datos se guardan localmente en el dispositivo (
localStorage), y la evidencia (fotos, audio, PDF) enIndexedDB. Usa Ajustes → Exportar para respaldar o compartir un proyecto.
| Paso | Módulo | Qué hace |
|---|---|---|
| 1 | Proyecto | Cliente, industria, responsable, fecha de visita. |
| 2 | Mapa de empresa | Giro, productos, clientes, proveedores, empleados, áreas. |
| 3 | Áreas | Módulos guiados (Compras, Inventario, Producción, Ventas, Finanzas, RH). Calcula madurez digital y sugiere problemas/oportunidades. |
| 4 | Evidencia | Fotos, video, audio y PDF asociados a cada área. |
| 5 | Procesos | Diagramas de flujo simples. |
| 6 | Problemas | Registro con impacto y frecuencia. |
| 7 | Oportunidades | Iniciativas con beneficio y prioridad. |
| 8 | Roadmap | 4 fases automáticas: Operación → Control → Automatización → IA. |
| 9 | Estimador | Complejidad, horas, riesgo, dependencias y tamaño (Pequeño→Empresarial). |
| 10 | Documentos | Genera entregables y los imprime a PDF o exporta. |
| + | Portal del cliente | Publica el proyecto y recibe las observaciones del cliente. |
| + | Requerimientos | Bitácora de cada solicitud (ID, autor, fecha, prioridad, estado). |
Vive en portal/. Es la otra cara del mismo espejo: donde el cliente
ve su proyecto cuando tú no estás enfrente.
Lo que lo distingue de mandar un PDF: el cliente no describe con palabras a qué se refiere, lo señala.
| Ancla | Dónde | Gesto |
|---|---|---|
| Región | Fotos de evidencia | Dibuja encima: trazo libre, recuadro, círculo, flecha o pin |
| Texto | Documentos | Selecciona un párrafo y aparece “Comentar esto” |
| Elemento | Tarjetas de problema, oportunidad, fase, ROI | Botón de comentario en la tarjeta |
Los tres producen el mismo objeto y caen en la misma bandeja. Desde ahí respondes, cierras, o conviertes la observación en requerimiento con un toque — y entra a tu registro con el cliente como autor y la fecha en que lo pidió.
El cliente también puede levantar solicitudes nuevas, que llegan igual.
Se publican versiones, no estado vivo. Al publicar se congela un snapshot autocontenido (v1, v2, v3…) con el diagnóstico, el roadmap, el ROI, los documentos y las fotos ya reducidas. El portal es un renderizador puro: no calcula nada. El cliente comenta sobre la v1; tú corriges y publicas la v2, y sus observaciones siguen amarradas a la versión sobre la que las hizo. Sin esto, cada cambio tuyo rompería el anclaje de sus comentarios.
Las figuras se guardan como vectores en coordenadas normalizadas (0–1), no como imagen aplanada: pesan nada, se ven nítidas a cualquier tamaño y se pueden ocultar o rehacer.
Acceso: enlace privado (token de 22 caracteres) + código de 6 dígitos. Sin registro ni contraseñas. Puedes cambiar el código o desactivar el acceso cuando quieras.
- Este dispositivo (por defecto, sin configurar nada) — el portal lee lo que TMD publicó en el mismo navegador. Sirve para enseñárselo al cliente en tu iPad al cerrar la visita. El enlace no le funcionará desde su celular.
- Supabase — real y multi-dispositivo. Pasos exactos en
supabase/README.md. Ninguna tabla queda expuesta: RLS activo sin políticas y todo pasa por una Edge Function que valida del lado del servidor.
- Madurez digital: cada respuesta puntúa el nivel de digitalización del área (radar en el panel).
- Sugerencias automáticas: reglas (
assets/js/questions.js → signals) detectan problemas y oportunidades según las respuestas. Un toque las registra. - Roadmap / Estimación / ROI: se calculan a partir de los datos (
assets/js/generators.js). - Documentos: redactados con plantillas adaptativas que reaccionan a los datos del proyecto.
La generación es determinista y funciona sin conexión. Para enriquecer la redacción con un
modelo (p. ej. Claude), sustituye/extiende las funciones doc* en assets/js/generators.js
por una llamada a tu API y reemplaza el HTML por la respuesta del modelo.
index.html · cascarón + orden de carga de scripts
manifest.webmanifest · PWA
sw.js · cache offline (solo en http/https)
assets/
styles.css · diseño (claro/oscuro, iPad-first)
icon.svg
js/
ui.js · helpers de UI (h, iconos, modal, toast, formatos, campos)
db.js · IndexedDB (evidencia)
store.js · estado + persistencia + autoguardado
questions.js · catálogo de áreas, preguntas y señales (la base de conocimiento)
generators.js · madurez, roadmap, estimación, ROI, documentos (el "cerebro")
portal-core.js · TMC: transporte local|Supabase + dibujo de anclas (compartido)
snapshot.js · arma el paquete que se publica al portal
app.js · shell, ruteo, navegación, arranque
views/*.js · una vista por paso (incluye portal.js: publicar + bandeja)
portal/ · TMC — el portal del cliente
index.html
config.js · url + anonKey de Supabase (vacío = modo local)
assets/portal.css
assets/js/
annotate.js · editor de anotación sobre imagen
views.js · secciones del portal
app.js · acceso por enlace + código, shell y ruteo
supabase/ · backend opcional
schema.sql · tablas con RLS activo y cero políticas
functions/portal-access/index.ts
README.md · pasos de conexión
TMD y el portal comparten ui.js, styles.css y portal-core.js. El portal
no carga los generadores ni el catálogo de preguntas: todo lo que muestra viene
ya calculado dentro del snapshot.
Sin frameworks: JavaScript plano con un espacio de nombres global TMD.
TechMarketDigital con sus propios sistemas:
- TMD — TechMarket Discovery (este) — levantamiento de procesos.
- TMC — TechMarket Client (este, en
portal/) — la cara de cliente: entrega y observaciones. - TMP — TechMarket Projects — gestión de proyectos.
- TMAI — TechMarket AI — generación de roadmaps, cotizaciones, contratos y documentación.
Los proyectos de TMD se exportan en JSON, listos para alimentar a TMP y TMAI. TMC nace sirviendo a TMD y está pensado para servirle después también a TMP.
El bucle que cierra: visita en iPad → publicas el portal → el cliente ve su diagnóstico → señala lo que no le cuadra → tú decides qué es duda y qué es alcance nuevo → lo que es alcance se vuelve requerimiento → y el requerimiento es tu siguiente cotización.