TDM

¿Cómo creé mi primer software .exe para Windows con Claude Code y Codex?

Hace dos meses que hago vibe-coding, primero con Claude Code y luego con Codex CLI. Estas últimas semanas tenía bastantes tokens disponibles y pocos proyectos, así que me lancé, solo por diversión, a crear una herramienta para escuchar documentos en audio y anotarlos al mismo tiempo (una mezcla de Audible y Kindle). Al final, resultó ser realmente útil: mis padres, cuya vista ha bajado bastante, la necesitan para que les lean libros en voz alta con IA. Decidí hacer la versión para software de Windows (un simple .exe) para que puedan instalarlo en su ordenador.

Es la primera vez que creo un software. Aunque tengo algo de experiencia, no soy desarrolladora en absoluto, sé lo que es un algoritmo y he programado varios scripts para automatizar mi trabajo (en marketing). Pero nunca he compilado nada ni sé lo que es Electron.

Cuando trabajaba (en marketing) para una empresa de software, admiraba especialmente a los equipos de Product Management (que inventan funcionalidades) y al equipo de QA (quality assurance (cuyo trabajo es solo encontrar bugs y fallos). Con mi propio software, por fin pude «jugar» a ser product manager y QA. ¡Síííí!

Escribo este prompt en chatGPT.


Quiero crear un software tipo audible que funcione en web local en Windows. Se pueden subir URLs pero también archivos epub, html, txt, pdf. Una vez subido el archivo, los capítulos se detectarán automáticamente. En la columna izquierda, hay botones "subir un archivo", "subir URL", "acceder a la biblioteca"; al hacer clic en acceder a la biblioteca, se ve a la derecha la lista de archivos ya subidos; se pueden ordenar por fecha de adición o de A a Z, o de Z a A, también se puede modificar el título del archivo, y se puede eliminar fácilmente cada archivo. Cuando se quiere iniciar la reproducción de un archivo, se hace clic en el título del archivo, se muestra el texto del archivo + los botones de reproducción, avanzar un párrafo/capítulo, la lista de capítulos, + selección de idiomas (EN, FR, VN), voz (hombre/mujer), tipos de voz, velocidad, tono. El software debe mostrar el párrafo que se está leyendo y mantener la posición si se detiene o cierra el software. Propónme la interfaz de usuario adecuada, ¿tienes adiciones o sugerencias de mejora? 
  

chatGPT me propone algunas mejoras, hago algunas modificaciones, el desafío un poco. Llegamos a un plan detallado, luego me genera mockups, que me gustan mucho:

Mockup

Me parecen muy buenos y le pido un prompt para Claude Code para codificar el software. Empezamos con el modo plan para validar el plan técnico, ¡y allá vamos!

El proyecto se trata en varias fases, Claude Code codifica cada fase, se detiene, yo verifico, hago comentarios, corrige y luego continuamos con otra fase.

El esqueleto del software se hizo muy rápido y cada vez puedo «tocar» el software antes de sugerir modificaciones.

Me encanta muchísimo el proceso, requiere mucha reflexión para hacer que la interfaz sea fácil de usar y lógica, y añadir funcionalidades que a nadie se le ocurren pero que todo el mundo encuentra útiles. No porque haya pocos botones significa que haya poco trabajo, porque precisamente el trabajo se ha hecho antes para tener la menor cantidad de botones y clics posible.

Esto me recuerda un almuerzo donde mi antiguo jefe me dijo, hace 13 años, que me veía haciendo un trabajo donde haría de puente entre los expertos y los desarrolladores, es decir, traducir las necesidades «de negocio» en especificaciones para los desarrolladores… una especie de product manager interno. En ese momento, el timing no era bueno para que hiciera otra reconversión, pero esto demuestra que era tan visionario e intuitivo que vio el camino correcto para mí. Si tienen a alguien así de visionario e intuitivo en su entorno, invítenlo a almorzar, será más efectivo que un balance de competencias.

El riesgo con este tipo de software es la seguridad. Los pdf y epub que se encuentran en línea pueden contener scripts que se ejecutan y pueden arruinar un ordenador, por lo que hay que pedir a Claude Code que asegure al máximo.

Para ello, he creado un agente especializado en ciberseguridad, un agente especializado en UX/UI y un agente de QA que auditan cada fase del proyecto, rastrean y corrigen los errores.

Para las voces, uso tanto las voces deEdge TTS (gratuito, requiere conexión a Internet) como Microsoft (gratuito, sin conexión pero menos natural).

Descubrí que «compilar un software» estaba al final del proceso. Electron permite empaquetar una interfaz web con Chromium y Node.js para convertirlo en una aplicación clásica de Windows. Al final del proceso, se obtiene un archivo de instalación en .exe, pero luego hay que probar el software en otro ordenador (el de mis padres), reportar los bugs automáticamente y gestionar las actualizaciones (pronto).

Mis puntos favoritos

  1. División automática del documento en capítulos: era un punto delicado y difícil porque hay que cubrir una amplia gama de formatos y archivos mal maquetados. Usé varios softwares de lectura con IA y todos tienen muchos problemas con los capítulos.
  2. Subrayado y anotación: me encanta subrayar y anotar, y me encanta activar el modo «subrayado total», el cursor se convierte en rotulador. Es algo que he mejorado respecto a Kindle, donde hacían falta 2 clics para subrayar cualquier cosa. Se pueden exportar fácilmente los subrayados y anotaciones.
  3. Las voces vietnamitas : estoy muy contenta con la calidad de las voces vietnamitas, he probado otras apps y no me gustaban tanto como mi software 🙂 espero que mis padres también estén contentos
  4. Y aparte de los costes de desarrollo que he pagado a la IA, este software será GRATIS de usar
  5. El diseño minimalista, no soy profesional en UX/UI pero creo que la IA y yo nos hemos defendido bien!
  6. El software gestiona la biblioteca de libros en el ordenador pero también abre un acceso al móvil a través de la red local (es porque no tengo ganas de crear una app para iPhone ni un sitio web). En el móvil, es una versión ligera que se comporta casi como Audible. Pero con la posibilidad de seguir el texto mientras suena el audio (si se quiere).
CapaTecnologías y función
Aplicación de escritorioElectron 43 — convierte la interfaz web en aplicación Windows
LenguajeTypeScript para el proceso principal, el preload, la interfaz y el código compartido
InterfazReact 19, React Router y CSS personalizado, sin Tailwind
Estado de la interfazZustand
Validación de datosZod para las comunicaciones IPC, la API local y los esquemas compartidos
Compilación y buildVite 7 y electron-vite
Pruebas automatizadasVitest y jsdom — alrededor de 210 pruebas
Calidad del códigoESLint y Prettier
Instalador de Windowselectron-builder con destino NSIS y script NSIS personalizado para el comportamiento del instalador (elección del idioma por defecto).
Base de datos localSQLite mediante node-sqlite3-wasm, sin compilador C++
Importación de documentospdfjs-dist para PDF, node-html-parser para HTML y fflate para EPUB y archivos ZIP
Síntesis de vozEdge TTS con msedge-tts y Web Speech API para voces de Windows
Audio móvil en red localTransmisión HLS, con FFmpeg ejecutado por un servidor local en el puerto 8789
InternacionalizaciónInterfaz disponible en francés, inglés y vietnamita, con las traducciones agrupadas en messages.ts
Iconoslucide-react

No conocía ninguna de estas tecnologías (excepto SQL y CSS) hasta hace 3 días 😀 El vibe coding no se trata solo de escribir un gran prompt y esperar a que la IA haga todo. Hay que dividir el proyecto en pequeños pasos, probar cada función, detectar comportamientos extraños y reformular con precisión lo que queremos (también podemos cambiar de opinión en el camino).

Aún faltan funciones avanzadas, pero estoy muy satisfecha con la v1. Dejemos las funciones más avanzadas para las v1.1, 1.2… También he previsto las bases necesarias para la gestión futura de informes de errores y actualizaciones, en caso de que decida distribuir el software a un público más amplio.

Comentarios desactivados en ¿Cómo creé mi primer software .exe para Windows con Claude Code y Codex?