Hay una parte del trabajo con webs que no suele salir en las capturas de pantalla: entender qué demonios está pasando detrás de ellas.
Cuando un proyecto es pequeño, abrir los archivos y echar un vistazo suele ser suficiente. HTML por aquí, CSS por allá, un poco de JavaScript y listo.
El problema llega cuando el proyecto crece.
Más archivos. Más dependencias. Más componentes. Más carpetas con nombres que ya no recuerdas por qué existen.
Ahí es donde he descubierto Code Wiki, una herramienta pensada para convertir un repositorio de código en una documentación mucho más fácil de explorar.
¿Qué es Code Wiki?
Code Wiki es una plataforma desarrollada por Google para generar una especie de wiki interactiva de un repositorio de código.
La idea es bastante sencilla de entender: en lugar de obligarte a recorrer manualmente cientos o miles de líneas de código para descubrir cómo está construido un proyecto, Code Wiki analiza el repositorio y genera documentación estructurada sobre él.
La documentación puede incluir explicaciones de diferentes partes del proyecto, enlaces hacia los archivos relacionados y diagramas que ayudan a visualizar cómo se organiza el código.
Además, Code Wiki incorpora un sistema de consulta basado en Gemini que permite hacer preguntas sobre el repositorio utilizando la documentación generada como contexto.
Dicho de una manera menos técnica: es como tener un mapa para orientarte dentro de un proyecto que no has construido tú.
¿Para qué puede servir Code Wiki?
Una de las situaciones más interesantes aparece cuando tienes que trabajar con un proyecto existente.
Imagina que un cliente te entrega una web que lleva años funcionando. Hay HTML, CSS, JavaScript, plugins, componentes y seguramente alguna carpeta cuyo contenido nadie se atreve a tocar porque «eso lleva ahí desde siempre».
Antes de modificar nada, necesitas entender qué tienes delante.
Ahí una documentación generada automáticamente puede ahorrar bastante trabajo de exploración.
Entender proyectos que no has creado tú
Para mí, este es uno de los usos más interesantes.
Cuando entras en un proyecto nuevo, gran parte del tiempo no se dedica a escribir código. Se dedica a leerlo.
Hay que descubrir qué hace cada parte, cómo se relacionan los componentes y dónde está aquello que necesitas modificar.
Code Wiki intenta reducir precisamente esa barrera inicial creando una visión más organizada del repositorio.
Ayudar durante el aprendizaje
También puede resultar interesante para quienes están aprendiendo desarrollo web o programación.
Leer un proyecto real puede ser bastante más complicado que seguir un tutorial. Un tutorial suele llevarte de la mano. Un repositorio real no tiene esa consideración. 😅
Contar con documentación que explique la estructura del proyecto puede ayudarte a pasar de «no entiendo nada» a «vale, esta parte hace esto y se comunica con aquella otra».
Documentación para equipos
La documentación del código suele acabar siendo una de esas tareas que todos consideran importante y que, misteriosamente, nadie quiere hacer el viernes por la tarde.
Code Wiki plantea otra posibilidad: generar y mantener una documentación vinculada al propio código.
La propuesta de Google es que la documentación se actualice cuando cambia el repositorio, de manera que no dependa únicamente de mantener manualmente documentos separados del código.
¿Y qué tiene que ver esto con el diseño?
A primera vista, bastante poco.
Code Wiki está pensado principalmente para trabajar con código y proyectos de software. Pero cuanto más trabajo con diseño web, más evidente me parece que diseño y desarrollo no viven en compartimentos estancos.
Un diseñador puede trabajar sobre la estructura visual de una web, los componentes, la navegación o la experiencia de usuario sin escribir grandes cantidades de código.
Pero entender cómo está construida esa web cambia la forma de trabajar.
Por ejemplo, si sabes que una determinada estructura se repite mediante componentes, puedes plantear el diseño pensando en esa lógica. Si conoces las limitaciones del sistema que utilizará el proyecto, puedes evitar diseñar algo precioso que luego resulte absurdo de implementar.
Y esto también ocurre al revés.
Una buena estructura técnica debería ayudar a que una interfaz sea coherente, mantenible y fácil de modificar.
Al final, una web no es solamente una imagen bonita dentro de un navegador.
Es un sistema.
Code Wiki y la documentación del código
Una de las cosas que más me ha llamado la atención es el enfoque de Code Wiki hacia la documentación.
Google presentó la herramienta como una forma de mantener una documentación estructurada y actualizada de los repositorios, con navegación hacia las partes concretas del código que se están explicando.
Eso puede ser especialmente útil en proyectos grandes, donde leer el código directamente no siempre es la forma más rápida de hacerse una idea general.
Primero puedes entender la arquitectura.
Después localizar el módulo que te interesa.
Y finalmente bajar hasta el código concreto.
Ese recorrido, de lo general a lo particular, también es bastante parecido a cómo solemos enfrentarnos a un buen proyecto de diseño: primero necesitamos entender el conjunto y después entrar en los detalles.
Una herramienta que me guardo
No creo que Code Wiki vaya a sustituir la lectura del código. Tampoco debería convertirse en una excusa para confiar ciegamente en cualquier documentación generada por inteligencia artificial.
La propia naturaleza de este tipo de herramientas hace que convenga comprobar la información cuando vas a tomar decisiones técnicas importantes.
Pero como punto de partida me parece una idea muy interesante.
Sobre todo porque ataca un problema bastante real: cuando un proyecto crece, entenderlo puede ser casi tan complicado como construirlo.
Y eso también afecta a quienes trabajamos alrededor del código, aunque nuestra especialidad sea el diseño.
En Lumazaki me paso buena parte del tiempo entre diseño gráfico, WordPress, HTML y CSS. Así que cualquier herramienta que me ayude a mirar un proyecto y entender rápidamente qué hay debajo del capó tiene bastantes papeletas para acabar en mi carpeta de «cosas que quiero probar».
Y sí, esa carpeta empieza a necesitar su propia documentación.
Si quieres conocer la propuesta directamente, puedes consultar la presentación oficial de Code Wiki de Google.