LK PromptHub: cómo convertir una colección de prompts en una WebApp portátil

hace 3 días

9 min de lectura

1. Cuando el problema deja de ser crear prompts y pasa a ser encontrarlos

A medida que empiezas a trabajar de forma habitual con Inteligencia Artificial, los prompts dejan de ser simples instrucciones de dos líneas. Algunos empiezan a crecer, se refinan, incorporan formatos de salida, reglas, contexto, criterios de revisión y terminan convirtiéndose en pequeñas herramientas reutilizables.

Y entonces aparece otro problema. Ya no se trata solo de escribir buenos prompts, se trata de encontrar rápidamente el que necesitas cuando lo necesitas.

En nuestro caso, los prompts estaban repartidos entre artículos, PDFs, documentos, notas y conversaciones anteriores. Funcionaba, pero cada vez resultaba menos práctico.

La idea inicial fue muy sencilla:

Crear un lugar único donde tener los prompts organizados, abrir uno, copiarlo y pegarlo directamente en ChatGPT, Copilot, Claude, Gemini o cualquier otra herramienta.

Nada más. Sin ejecutar los prompts, sin conectarse a ninguna API y sin necesidad de crear una plataforma compleja. Solo una pequeña aplicación que funcionase como biblioteca personal de prompts.

Así empezó LK PromptHub.

Anuncio de PromptHub con laptop, libreta y libros; texto sobre crear una web app, modos claro/oscuro y ES/EN. — LK Prompt Hub

2. La primera decisión: una WebApp lo más simple posible

Con la idea clara, la siguiente pregunta era cómo construirla.

La solución más evidente habría sido crear una pequeña aplicación con varios archivos, servidor local e incluso alguna base de datos. Pero para el objetivo que teníamos, eso añadía más complejidad de la necesaria.

La prioridad era otra:

Que pudiera abrirse con doble clic y funcionar.

Por eso la primera versión de LK PromptHub se planteó como una WebApp totalmente autocontenida:

LK_PromptHub.html

Dentro del mismo archivo estarían:

la estructura HTML;
los estilos CSS;
la lógica JavaScript;
los datos necesarios para construir el menú y las fichas.

Sin instalación, sin servidor y sin dependencias externas.

Además, esta decisión tenía una ventaja muy práctica: el archivo podía enviarse a otra persona y seguir funcionando exactamente igual.

La idea era sencilla: si el problema es pequeño, la solución también puede serlo.

3. ¿Por qué todo dentro de un único HTML?

La decisión de concentrarlo todo en un único archivo no buscaba ser la arquitectura más elegante, sino la más práctica para este caso.

Conceptualmente, LK PromptHub sigue teniendo varias capas:

LK_PromptHub.html muestra un esquema azul con HTML, CSS, JSON, Prompts y JavaScript y sus funciones. — Estructura del HTML

La diferencia es que todas esas piezas viven dentro del mismo fichero. Eso hace que la aplicación sea muy fácil de distribuir, copiar, guardar en una carpeta compartida o subir a una web estática.

En una aplicación más grande probablemente sería mejor separar cada parte:

index.html
css/style.css
js/app.js
data/prompts.json
assets/

Pero aquí la portabilidad tenía más valor que esa separación física. La clave está en distinguir entre separación conceptual y separación de archivos: aunque todo esté dentro del mismo HTML, estructura, datos, estilo y lógica siguen estando organizados como bloques independientes.

4. El primer problema: almacenar prompts largos en JSON

La primera idea fue guardar toda la información de cada prompt directamente en un bloque JSON.

Algo así:

{
  "nickname": "WAR Briefing",
  "description": "Convierte contenido en un briefing ejecutivo",
  "prompt": "..."
}

Sobre el papel parecía perfecto: una única estructura con todos los datos y JavaScript recorriéndola para construir la aplicación. El problema apareció al empezar a meter prompts reales.

Un prompt largo puede contener:

muchos párrafos;
comillas;
saltos de línea;
listas;
Markdown;
caracteres especiales;
miles de caracteres.

Dentro de JSON, todo eso obliga a convertir el contenido en una cadena válida, escapando saltos de línea, comillas y otros caracteres.

Por ejemplo:

"prompt": "Primera línea\n\nSegunda línea con \"comillas\"..."

Funciona, pero mantener prompts así empieza a ser bastante incómodo.

Y ahí apareció una conclusión importante:

El JSON era muy bueno para organizar los prompts, pero no era el mejor sitio para escribirlos y mantenerlos.

Ese problema llevó directamente a la siguiente decisión de arquitectura.

5. Separando metadatos y contenido

La solución fue sencilla: dejar que cada parte hiciera lo que mejor sabe hacer.

El JSON se quedó para los metadatos:

ID
Nickname
Nombre
Categoría
Descripción
Tags
Orden
Featured
Notas
Referencia al prompt

Y el contenido largo del prompt pasó a almacenarse aparte, pero todavía dentro del mismo HTML:

<script type="text/plain" id="prompt-war-briefing-es">
Aquí podemos pegar el prompt completo.

Con párrafos.
Con "comillas".
Con listas.
Con Markdown.
Sin tener que escapar manualmente el contenido.
</script>

Después, JavaScript recupera ese bloque cuando el usuario selecciona el prompt.

La ventaja es importante: seguimos teniendo un único archivo HTML, pero editar un prompt vuelve a ser tan sencillo como abrir el fichero y copiar o pegar texto.

Diagrama con un único archivo HTML: panel JSON Metadatos y panel text/plain Contenido, unidos por una flecha azul. — Un único archivo HTML

En cierto modo, esta separación terminó definiendo la arquitectura de LK PromptHub:

JSON para describir el prompt.
text/plain para contenerlo.

Y con eso el mantenimiento de la biblioteca se volvió mucho más cómodo.

6. El JSON como índice de la aplicación

Una vez separados los metadatos del contenido, el JSON empezó a cumplir una función mucho más interesante: convertirse en el índice maestro de LK PromptHub.

Cada prompt define cosas como:

{
  "id": "war-briefing",
  "nickname": "WAR Briefing",
  "category": "documentos",
  "order": 10,
  "featured": true
}

JavaScript recorre esa información y construye automáticamente:

las categorías;
el menú lateral;
el orden de los prompts;
los destacados de la página de inicio;
la ficha que debe mostrarse al hacer clic.

Es decir, el menú no está escrito a mano en el HTML. Si añadimos un nuevo prompt al JSON y su bloque text/plain, la aplicación puede incorporarlo sin tener que rediseñar la navegación.

Eso permite que LK PromptHub funcione más como una pequeña aplicación basada en datos que como una página estática. El HTML define la estructura; el JSON decide qué aparece dentro.

7. Pre-Prompt + Prompt Maestro + Post-Prompt

Hasta aquí LK PromptHub ya servía como biblioteca, pero todavía faltaba una idea importante: adaptar un prompt sin modificarlo. Un Prompt Maestro debería ser estable. Pero cada vez que lo usamos podemos necesitar añadir contexto distinto.

Por ejemplo:

Pre-Prompt

Revisa únicamente la información de los últimos siete días.

Prompt Maestro

Analiza los correos relacionados con el proyecto e identifica acciones, decisiones, riesgos y pendientes.

Post-Prompt

Devuelve el resultado como un WAR Briefing HTML.

LK PromptHub combina automáticamente los tres bloques:

PRE-PROMPT

PROMPT MAESTRO

POST-PROMPT

y al pulsar Copiar Prompt envía todo el conjunto al portapapeles. Si alguno de los bloques está vacío, simplemente se ignora.

Infografía con Pre-Prompt, Prompt Maestro y Post-Prompt conectados al Prompt final; botón Copiar Prompt. — Pre-Prompt + Prompt Maestro + Post-Prompt

Esta pequeña función terminó siendo una de las más útiles de la aplicación porque permite mantener una biblioteca estable y, al mismo tiempo, adaptar cada ejecución al contexto concreto.

8. Cuando contar caracteres también importa

Al empezar a trabajar con prompts más largos apareció otra necesidad bastante práctica: saber cuánto texto estamos generando realmente.

LK PromptHub muestra el número de caracteres de cada bloque:

Pre-Prompt      182 caracteres
Prompt        6.740 caracteres
Post-Prompt     315 caracteres
────────────────────────────
TOTAL         7.241 caracteres

La aplicación utiliza exactamente el mismo texto que después enviará al portapapeles, incluidos los saltos de línea entre bloques. Así evitamos una situación absurda: que la interfaz muestre una longitud y que el texto realmente copiado tenga otra.

Es una función pequeña, pero muy útil cuando trabajamos con prompts extensos o con herramientas que pueden tener límites de entrada.

9. De una página HTML a una pequeña aplicación

Con la parte funcional resuelta, el siguiente paso fue mejorar la experiencia de uso. La estructura terminó evolucionando hacia algo mucho más cercano a una pequeña aplicación:

┌──────────────────────────────────────────┐
│ LK PromptHub                 ES | EN ☀️ │
├───────────────┬──────────────────────────┤
│               │                          │
│ Inicio        │   Contenido principal    │
│ Categorías    │                          │
│   └ Prompt    │   Prompt seleccionado    │
│   └ Prompt    │                          │
│               │   Pre / Prompt / Post    │
│ Tools         │                          │
└───────────────┴──────────────────────────┘

Se añadieron una cabecera fija, un menú lateral, una página de Inicio, una sección de Tools y scroll independiente entre el panel lateral y el contenido principal. También se incorporaron categorías desplegables y prompts destacados mediante featured: true, que aparecen automáticamente en la página de inicio.

Todo esto sigue funcionando dentro del mismo archivo HTML, pero la sensación ya no es la de una página estática. Es una buena muestra de cómo una interfaz sencilla puede evolucionar bastante sin necesidad de cambiar la arquitectura de fondo.

Pantalla de LK PromptHub con menú lateral y formulario Que pasó ayer (sencillo) en español, tema claro y azul. — LK PromptHub Front-End

10. Modo oscuro: cuando diseñar también significa probar

El modo oscuro parecía una mejora sencilla: cambiar fondos claros por tonos oscuros y adaptar el resto de la paleta. Pero al probarlo apareció un detalle que sobre el papel no se veía tan claro. El azul cobalto de Lozkorp funciona muy bien sobre fondo blanco, pero pierde contraste sobre superficies oscuras. Algunos títulos, etiquetas y elementos destacados quedaban demasiado apagados.

La solución fue utilizar el color complementario como acento en modo oscuro:

azul cobalto en modo claro;
ámbar, amarillo y naranja en modo oscuro.

No solo mejoraba la legibilidad, también mantenía la identidad visual de la aplicación.

11. Preparando PromptHub para varios idiomas

La siguiente mejora fue hacer que LK PromptHub pudiera trabajar al menos en español e inglés.

La clave no era solo traducir botones, sino separar correctamente tres niveles:

Interfaz
Metadatos
Prompt Maestro

Por eso, campos como nombre, descripción o categoría pasaron a tener versiones por idioma:

"name": {
  "es": "Documentos",
  "en": "Documents"
}

Y cada Prompt Maestro quedó también preparado con una fuente distinta:

"promptSource": {
  "es": "prompt-war-es",
  "en": "prompt-war-en"
}

Al cambiar entre ES y EN, la aplicación actualiza navegación, textos, metadatos y el propio prompt. Además, el idioma elegido se guarda en localStorage, igual que el tema visual.

Y si en el futuro queremos añadir francés, alemán u otro idioma, la arquitectura ya está preparada para ello. La idea no era traducir la aplicación después, sino dejarla diseñada desde dentro para poder crecer.

Infografía bilingüe ES/EN con tarjetas de interfaz, metadatos y prompt maestro; muestra Inicio/Home y Copiar Prompt. — Preparado para varios idiomas

12. Tools: documentación dentro de la propia aplicación

Una vez que LK PromptHub empezó a tener más funciones, apareció otra necesidad: que la propia herramienta explicase cómo utilizarse. Por eso añadimos una página Tools con dos objetivos.

Por un lado, ofrecer accesos rápidos a las herramientas donde normalmente vamos a pegar los prompts:

ChatGPT;
Microsoft Copilot;
Claude;
Gemini.

Y por otro, servir como pequeña guía de uso. Ahí explicamos la lógica. Además, incluimos recomendaciones para trabajar con prompts largos, un pequeño checklist antes de copiar y espacio para anotar límites o particularidades de cada herramienta.

Así, LK PromptHub no necesita un manual separado. La propia aplicación contiene su documentación esencial.

13. ¿Y todo esto sin frameworks?

Llegados a este punto, LK PromptHub ya tiene navegación, temas, multiidioma, lógica dinámica, contadores, favoritos destacados y una pequeña capa de documentación.

Y todo sigue funcionando con:

HTML + CSS + JavaScript

Sin React, Vue, Angular, Bootstrap, backend, base de datos ni APIs. No porque esas herramientas no sean útiles, sino porque aquí no eran necesarias.

Para este proyecto, añadirlas habría significado más estructura, más dependencias y más mantenimiento sin resolver ningún problema real.

La arquitectura elegida responde mejor a lo que buscábamos desde el principio:

portátil;
editable;
fácil de compartir;
ejecutable directamente en el navegador;
y suficientemente flexible para crecer.

14. De experimento a herramienta real: Copilot para Project Managers

LK PromptHub empezó como una solución general para organizar prompts, pero terminó encontrando enseguida un caso de uso muy concreto.

Durante la serie de artículos Copilot para Project Managers fuimos creando prompts bastante elaborados para tareas como:

revisar correos;
preparar reuniones;
estructurar información;
generar briefings;
revisar proyectos;
convertir respuestas en documentos útiles.

Hasta ahora esos prompts estaban disponibles dentro de los propios artículos y también como PDFs descargables, pero faltaba una forma más directa de utilizarlos.

Por eso se creó una versión específica de LK PromptHub para esa serie:

LK PromptHub — Copilot para Project Managers

Disponible en:

https://josejotxe.neocities.org/LK_PromptHub/LK_PromptHub_CopilotPMs

Así, el lector puede abrir la aplicación, localizar el prompt que necesita, añadir contexto con Pre-Prompt o Post-Prompt y copiarlo directamente.

La idea deja de ser solo “guardar prompts”. Pasa a ser también una forma de convertir una colección de contenidos dispersos en una pequeña herramienta utilizable.

15. Descárgalo y construye tu propio PromptHub

Una de las ventajas de haber construido LK PromptHub como un único archivo HTML es que no depende de una instalación concreta ni de una cuenta.

La idea es que cualquiera pueda descargarlo, abrirlo con un editor y adaptarlo a su propio uso.

Para crear una versión personalizada basta con modificar:

categorías
prompts
descripciones
tags
orden
destacados
notas
idiomas
colores

Y añadir los bloques text/plain con los Prompt Maestro correspondientes.

El proceso puede ser tan simple como:

Descargar el HTML.
Abrirlo con un editor de texto.
Modificar el JSON.
Añadir o editar los bloques de prompts.
Guardar el archivo.
Abrirlo en el navegador.

No hace falta recompilar nada ni desplegar un backend.

Y ese era también uno de los objetivos del proyecto:

16. Conclusiones

LK PromptHub empezó con una necesidad bastante sencilla: dejar de buscar prompts repartidos entre documentos, artículos, PDFs y conversaciones. La solución terminó siendo una pequeña WebApp capaz de organizar prompts, mostrar categorías, trabajar con Pre-Prompt y Post-Prompt, contar caracteres, cambiar de idioma y funcionar en modo claro u oscuro.

Y todo ello manteniendo la idea original:

un único archivo HTML, fácil de abrir, compartir, modificar y reutilizar.

Durante el desarrollo fueron apareciendo pequeños problemas - cómo guardar prompts largos, cómo separar datos y contenido, cómo adaptar la interfaz al modo oscuro o cómo preparar varios idiomas - y cada uno fue ayudando a definir mejor la arquitectura.

Quizá esa sea la parte más interesante del proyecto: no se diseñó todo de golpe. Fue creciendo a partir del uso. Y al final, la herramienta que nació para organizar mis propios prompts terminó convirtiéndose también en una forma práctica de distribuir los prompts de la serie Copilot para Project Managers y en una base reutilizable para que cualquiera pueda construir su propia biblioteca.