¿No te pasa a veces que te cuesta llegar al resultado esperado cuando le pides algo tu LLM (Gemini, GPT, Claude…) de confianza?? A veces ocurre que cuando le pedimos algo nuevo, aunque tengamos clara la idea en la cabeza, cuesta dar con el prompt perfecto para que la IA haga exactamente lo que queremos.
Por esta razón, te recomiendo (mucho) que crees tu propia biblioteca de prompts, y cada vez que te curres un buen prompt y des con el resultado esperado, lo añadas para tenerlo siempre a mano.
¡Ojo! y aquí añado un comentario suuuper importante: ¡También puedes hacerlo al revés! y créeme, es super útil. Es decir, cuando hayas conseguido el resultado esperado, tal como querías, pregúntale a tu IA cuál debiera haber sido el prompt exacto que debieras haberle proporcionado para que te diera de una sola vez ese resultado… ¡mano de santo!
En cualquiera de los dos casos, por favor, guárdate el prompt, no sabes lo cómo que es hacer un copy-paste cuando lo vuelvas a necesitar… 🙂
Aquí te enseño a crear tu propia biblioteca de prompts para que la tengas siempre en tu PC:
- Abre tu IA favorita. Yo lo hice con GPT, pero elige la que quieras.
- Escribe exactamente este prompt que te dejo a continuación:
Actúa como un desarrollador front-end senior especializado en aplicaciones web sin backend.
Quiero que generes UN ÚNICO ARCHIVO HTML completo y funcional que actúe como una biblioteca / gestor de prompts local, cumpliendo estrictamente los siguientes requisitos:
OBJETIVO GENERAL
Crear una aplicación web local (sin servidor, sin base de datos externa) que permita organizar, crear, editar, copiar, mover y exportar prompts de forma visual e intuitiva.
REQUISITOS TÉCNICOS OBLIGATORIOS
- El resultado debe ser un único archivo HTML autocontenido.
- Debe funcionar 100% en local abriéndolo en un navegador.
- Persistencia de datos usando localStorage.
- Usar JavaScript vanilla (sin frameworks).
- Estilos con Tailwind CSS vía CDN.
- Iconos con Lucide Icons vía CDN.
- Código claro, estructurado y comentado.
DISEÑO Y ESTILO VISUAL
- Paleta de colores exclusivamente en blanco y azules.
- Fondo principal blanco o blanco roto.
- Elementos destacados (botones, selección, estados activos) en tonos azules.
- Estilo moderno, profesional y limpio.
- Tipografía sans-serif legible (por ejemplo Inter o similar).
- Transiciones suaves y feedback visual claro.
ESTRUCTURA DE LA INTERFAZ
1. Barra lateral izquierda (sidebar):
- Lista de carpetas.
- Posibilidad de:
- Crear carpeta.
- Eliminar carpeta (con confirmación).
- Renombrar carpeta con doble clic.
- Asignar color identificativo a cada carpeta.
- Expandir / colapsar carpeta.
- Mostrar los títulos de los prompts dentro de cada carpeta.
- Drag & drop para reordenar carpetas.
2. Área principal:
- Cabecera con:
- Buscador de prompts (filtra por título y contenido).
- Botones para:
- Cambiar vista (cuadrícula / lista).
- Ordenar alfabéticamente.
- Crear nuevo prompt.
- Listado de prompts de la carpeta seleccionada.
FUNCIONALIDAD DE PROMPTS
Cada prompt debe incluir:
- ID único.
- Título editable.
- Texto del prompt.
- Carpeta asociada.
- Orden dentro de la carpeta.
- (Opcional) archivo adjunto:
- txt, pdf o imagen
- almacenado como base64 en localStorage
- visualizable en una nueva pestaña
Acciones disponibles sobre cada prompt:
- Copiar contenido al portapapeles.
- Eliminar (con confirmación).
- Editar mediante doble clic (modal).
- Mover por drag & drop:
- Reordenar dentro de la carpeta.
- Mover entre carpetas.
MODOS DE VISTA
- Vista de cuadrícula (tarjetas).
- Vista de lista (una línea por prompt, sin mostrar el texto completo).
- El modo seleccionado debe persistir entre sesiones.
MODALES Y FEEDBACK
- Modal de confirmación reutilizable (eliminar carpeta / prompt).
- Modal de edición de prompt con:
- Título.
- Texto.
- Subida / eliminación de archivo adjunto.
- Toasts de notificación:
- Copiado con éxito.
- Errores.
- Acciones completadas.
EXPORTACIÓN
Añadir un botón "Exportar" junto al botón "Nuevo Prompt" con:
- Exportación de todos los prompts visibles a:
- JSON
- XML
- Descarga directa del archivo generado.
COMPORTAMIENTO INICIAL
- Si no existen datos, crear una carpeta inicial llamada "General".
- Seleccionar automáticamente la primera carpeta disponible.
- Mostrar mensajes de estado cuando:
- No hay carpeta seleccionada.
- La carpeta está vacía.
- No hay resultados en la búsqueda.
RESULTADO FINAL ESPERADO
Devuélveme exclusivamente el código HTML completo y listo para usar.
No incluyas explicaciones antes ni después.
No incluyas texto adicional fuera del archivo.3. Copia tooodo el código que te devuelva, y pégalo en tu editor favorito. Te aconsejo Visual Studio, que es gratuito y no tienes que instalar nada si no quieres. Cuando lo hayas pegado y veas que tiene un montón de colores, guárdalo en tu ordenador con extensión HTML.
4. Busca el archivo que acabas de guardar y haz doble clic. ¡Voilá! Ya tienes tu biblioteca de prompts privada 🙂
Si tienes cualquier duda, puedes ver cómo lo hice yo en este video de YouTube que te dejo a continuación.
¡Espero que te haya resultado muy útil!
