Caso de estudio · Extensión VS Code
Supermodel
Una extensión de VS Code que transforma cualquier base de código en un grafo interactivo. Cada módulo, dependencia y relación se convierte en un nodo navegable, dando a los equipos de desarrollo la claridad estructural que la documentación nunca logra.
Hacer la estructura visible, navegable y accionable.
Las bases de código modernas superan rutinariamente los 100,000 archivos. Las herramientas que los desarrolladores usan para navegarlas, árboles de archivos, grep, buscar en el proyecto, fueron diseñadas para proyectos diez veces más pequeños. Supermodel trata la base de código como un sistema vivo, no como una lista de archivos, dando a los equipos la claridad arquitectónica para construir, revisar y mantener con confianza.
Convirtiendo la base de código en un mapa
Supermodel fue diseñado para equipos de desarrollo que han superado su capacidad de mantener la arquitectura en la cabeza. Cuando un proyecto escala más allá de unos pocos miles de archivos, los modelos mentales colapsan. Supermodel hace visible lo invisible: cada módulo, cada dependencia, cada relación, renderizada como un grafo vivo y navegable dentro del editor donde ya vive el código.
Dónde colapsan los modelos mentales
Acompañamos a 11 desarrolladores senior y 5 tech leads en bases de código que van de 50K a 2M líneas de código. El patrón universal: a mayor repositorio, más tiempo de orientación antes de escribir una sola línea. Incorporar a un nuevo ingeniero tomaba en promedio tres semanas. Las revisiones de código carecían de confianza porque los revisores no podían ver el alcance total del impacto de un cambio.
Lo que el mercado hace mal
Las herramientas existentes viven fuera del editor, carecen de análisis con IA o solo ofrecen vistas estáticas de solo lectura. Ninguna combina un grafo interactivo en vivo con integración nativa en VS Code, insights impulsados por IA y una capa de planificación del impacto de cambios.
| Plataforma | Grafo interactivo | Análisis IA | Nativo VS Code | Planif. cambios | Colaboración |
|---|---|---|---|---|---|
| GitLens | No | Parcial | Sí | No | Sí |
| Code Map | Parcial | No | Sí | No | No |
| Draw.io | Parcial | No | No | No | Sí |
| Understand | Sí | No | No | No | Parcial |
| Supermodel | Sí | Sí | Sí | Sí | Parcial |
Quién vive dentro de bases de código grandes
Cuatro segmentos con relaciones distintas con la estructura del código. Los desarrolladores senior necesitan velocidad de orientación. Los tech leads necesitan visibilidad de gobernanza. Los juniors necesitan exploración guiada. Los ingenieros de seguridad necesitan escaneo de vulnerabilidades estructurales.
25-40. Se incorporan a repositorios desconocidos o mantienen grandes monorepos. Necesitan claridad estructural rápida, sin preguntar a sus compañeros.
30-48. Gobernanza de arquitectura y revisión de código. Necesitan ver el impacto antes de hacer merge, no después de un incidente en producción.
22-28. Aprenden cómo encajan sistemas complejos sin leer cada archivo ni hacer preguntas que parecen obvias para todos los demás.
Auditoría de dependencias, escaneo de vulnerabilidades y detección de importaciones circulares a nivel de arquitectura, no de archivo.
Las personas a las que debe servir el sistema
Tres arquetipos de 16 entrevistas de usuario en equipos de SaaS, fintech e ingeniería empresarial. Cada uno representa un modo de falla distinto de las herramientas de navegación actuales.
El flujo de arqueología de código antes de Supermodel
Lo que un desarrollador hace realmente cuando necesita entender cómo funciona una parte de una gran base de código, antes de que exista una herramienta como Supermodel. Los pasos 2 al 5 son exactamente lo que Supermodel fue diseñado para eliminar.
- Paso 01Abrir el proyecto: 3,400 archivos, sin mapaEl desarrollador clona el repositorio. El árbol de archivos muestra una estructura de carpetas, no un sistema. El punto de entrada, el flujo de datos y los límites de módulos son invisibles.Curioso
- Paso 02Buscar puntos de entrada: adivinando la arquitecturaEl desarrollador busca "index", "main", "app", "router". Abre 8 archivos en paralelo. Intenta deducir la estructura por nombres de archivo e importaciones.Desorientado
- Paso 03Trazar una función: perdiendo contexto en cada saltoSiguiendo una cadena de llamadas entre archivos con Ctrl+Click. Diez archivos de profundidad. La pista de navegación vive en el historial del navegador, no en el editor.Disperso
- Paso 04Mapear dependencias: grep y pizarrónEl desarrollador ejecuta grep para encontrar todos los llamadores de una función. Copia resultados en una nota. Dibuja un diagrama en papel que quedará obsoleto en dos semanas.Frustrado
- Paso 05Revisión de PR: aprobando sin visibilidad totalEl tech lead revisa el diff pero no puede ver el radio de impacto completo sin repetir los pasos 2-4. Aprueba con un comentario: "Parece bien, pero verifica los llamadores." Nadie lo hace.Ansioso
- Paso 06Supermodel: un grafo, cada relación, instantáneoSupermodel renderiza el grafo completo de dependencias de cualquier módulo en tiempo real. Haz clic en cualquier nodo para ver cada llamador, cada dependencia y planear un cambio antes de escribir una línea de código.En control
Lo que el sistema debe entregar
Seis historias del research de personas y el mapeo del journey que definieron el alcance de funciones de Supermodel. Cada historia nombra a un desarrollador específico, un contexto específico y un resultado específico que el sistema debe habilitar.
- US-01 Como desarrollador nuevo, quiero ver el grafo completo de dependencias de cualquier archivo antes de tocarlo, para saber qué podría romper antes de romperlo.
- US-02 Como tech lead, quiero detección automática de antipatrones para atrapar objetos dios, importaciones circulares y acoplamiento excesivo antes de que se acumulen como deuda técnica.
- US-03 Como cualquier desarrollador, quiero consultar la base de código en lenguaje natural, para encontrar relaciones sin conocer cada nombre de archivo ni la sintaxis de grep.
- US-04 Como tech lead, quiero previsualizar el radio de impacto de cualquier cambio planificado, para que las revisiones de código se basen en evidencia estructural, no en intuición y esperanza.
- US-05 Como cualquier desarrollador, quiero fijar nodos visitados frecuentemente para acceso rápido, para poder navegar entre módulos críticos sin volver a buscarlos en cada sesión.
- US-06 Como ingeniero de seguridad, quiero escaneo de vulnerabilidades a nivel de grafo que marque riesgos de SQL injection y XSS a nivel arquitectónico, antes de que lleguen a producción.
Verde bosque, construido para el foco
La UI oscura de carbón reduce la fatiga visual durante largas sesiones de desarrollo. El verde bosque como acento primario tiende un puente entre el mundo natural y los datos crudos, anclando una herramienta que hace visible la estructura invisible. Public Sans mantiene precisión a cualquier escala, desde etiquetas de nodo de 10px hasta encabezados de panel de 40px.
Un grafo para cada escala
El sistema final pone el grafo completo de la base de código a un atajo de teclado, detecta automáticamente antipatrones con IA, y ofrece a cada desarrollador una vista "Planear un cambio" que muestra el impacto real de una modificación antes de escribir una sola línea. El radio de impacto de cualquier decisión nunca vuelve a ser invisible.
Tu producto,
bien hecho.
Supermodel demostró que 20 años de convenciones de navegación de código aún tienen espacio para un diseño que trata la base de código como un sistema, no como una lista de archivos. Si construyes una herramienta para desarrolladores donde la claridad y el razonamiento espacial son el producto, hablemos.
