business-model-canvas

Business Model Canvas interactivo en HTML — los 9 bloques clásicos del BMC con layout grid, zonas por color, bloques editables, timeline de fases y visión de futuro ERA. Template reutilizable para cualquier proyecto.

Ir a la instalación

Repositorio: Ntizar/NtizarBrainMasterMind
Última actividad en el origen: 11 de julio de 2026 a las 03:39
Idioma detectado de SKILL.md: español
Estrellas: 2
Forks: 0

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Volver a la búsqueda Volver a la instalación

name	business-model-canvas
description	Business Model Canvas interactivo en HTML — los 9 bloques clásicos del BMC con layout grid, zonas por color, bloques editables, timeline de fases y visión de futuro ERA. Template reutilizable para cualquier proyecto.
version	1.0.0
author	Hermes Agent
tags	["canvas","business-model","Osterwalder","estrategia","editable","interactivo"]

Business Model Canvas — Template Interactivo

Genera Business Model Canvases interactivos en HTML para presentar modelos de negocio de cualquier proyecto. Basado en el framework de Alexander Osterwalder con los 9 bloques clásicos.

Cuándo usarlo

Usuario pide un Business Model Canvas, modelo de negocio, lienzo estratégico o presentación del modelo de un proyecto
Necesitas visualizar y documentar un modelo de negocio completo en una sola página
Quieres un template editable que David pueda modificar directamente en el navegador
Se enfoca en el futuro/ERA del proyecto, no solo el estado actual

Estructura del Canvas

Los 9 bloques se disponen en el grid clásico del BMC:

Posición	Bloque	Zona	Color
Arriba izq.	Socios Clave	Infraestructura	Índigo (#6366f1)
Arriba izq.	Recursos Clave	Infraestructura	Índigo (#6366f1)
Centro superior	Actividades Clave	Infraestructura	Índigo (#6366f1)
Centro	Propuesta de Valor	Oferta	Naranja (#f97316)
Arriba der.	Segmentos de Clientes	Clientes	Azul (#2563eb)
Arriba der.	Canales	Clientes	Azul (#2563eb)
Lado der.	Relación con Clientes	Clientes	Azul (#2563eb)
Abajo izq.	Estructura de Costes	Finanzas	Verde (#16a34a)
Abajo izq.	Fuentes de Ingresos	Finanzas	Verde (#16a34a)

Layout CSS Grid

El canvas usa un grid de 5 columnas × 4 filas:

[socios] [recursos] [actividades] [propuesta] [clientes]
         [costes]                    [propuesta] [canales]
         [ingresos]                  [propuesta] [relacion]

Socios + Recursos: columnas 1-2, filas 1-2 (alto 2)
Actividades: columna 3, fila 1 (alto 1)
Propuesta de Valor: columna 4, filas 1-2 (alto 2, más grande)
Clientes: columna 5, filas 1-2 (alto 2)
Canales: columna 5, fila 2
Relación: columna 5, filas 3-4 (alto 2)
Costes: columna 2, filas 3-4 (alto 2)
Ingresos: columna 1, filas 3-4 (alto 2)

Bloques editables

Cada bloque <div class="bmc-block"> tiene contenteditable="true" — David puede hacer clic y modificar cualquier texto directamente en el navegador. Al hacer focus, se muestra un outline azul.

Tags temporales

Cada ítem dentro de los bloques lleva una etiqueta:

🔵 <span class="future-tag current">HOY</span> — lo que ya existe
🟢 <span class="future-tag future">ERA</span> — visión de futuro

Secciones extra (obligatorias)

Todo BMC generado debe incluir:

Stats bar — KPIs principales del proyecto (4 stats alternando azul/naranja/verde)
Legenda — Muestra los colores por área (Clientes, Oferta, Infraestructura, Finanzas)
Sección Visión de Futuro — Grid de cards con initiatives futuras, cada una con título, descripción y prioridad
Timeline / Hoja de Ruta — 4 fases en horizontal con flechas (→) entre ellas
Footer — "Hecho con ❤️ por David Antizar"

Prioridades de la sección futura

Usar 3 niveles de prioridad:

alta — Rojo (#dc2626) — imprescindible
media — Amarillo (#d97706) — importante pero no crítico
estrategica — Azul (#2563eb) — impacto transformador a largo plazo

Responsive

Desktop (>900px): grid de 5 columnas como definido arriba
Móvil (≤900px): todos los bloques en 1 columna apilados verticalmente
Las flechas del timeline cambian de → a ↓

Template mínimo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PROYECTO — Business Model Canvas</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.nucleo.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.data.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.ui.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Ntizar/Ntizar-Aurora@master/ntizar.motion.css">
</head>
<body class="nz" data-nz-skin="aurora" data-nz-theme="light">
  <!-- Header con badge ERA -->
  <!-- Stats bar -->
  <!-- Canvas grid con 9 bloques contenteditable -->
  <!-- Sección Visión de Futuro ERA -->
  <!-- Timeline de fases -->
  <!-- Footer -->
</body>
</html>

Pitfalls

No usar gradientes azul→naranja — colores sólidos puros del Núcleo Aurora
body class="nz" obligatorio — sin .nz en el body, nada funciona
No inventar clases Aurora — el grid del BMC requiere CSS custom propio, es normal y justificado
Cada bloque debe tener contenteditable — es la clave interactiva del canvas
Usar 4 stats en la stats bar — alternando colores, no todos iguales
Timeline siempre con 4 fases — mínimo 4 fases en la hoja de ruta

Referencias

Ver references/ciaf-bmc-template.md para la implementación completa y verificada del template.