Juan Saravia ESEN

Proyectos · Civic Tech · Chatbot IA

Vota Informado

Un tarjetón electoral que se conversa: marcas con una X a un candidato presidencial de Colombia 2026 y una IA responde ceñida a su plan de gobierno oficial.

Ver en vivo
Vota Informado, vista de escritorio
Vota Informado, vista en celular
Compare con · los otros 4 candidatosAnexo · fuentes numeradas
RolConcepto · Diseño · Full-stack · IA
Año2026
EstadoEn producción

Resumen

Vota Informado convierte el tarjetón electoral en una entrevista. Marcas con una X a un candidato y una IA te responde en primera persona.

Las respuestas salen de 177 KB de planes de gobierno curados a mano; desde la ficha puedes compararlo con cualquiera de los otros cuatro, y cada respuesta remite a un anexo de fuentes numeradas. Es no partidista: solo habla de propuestas y nunca ataca a los rivales.

Funciones

Lo que hace.

Tarjetón interactivo

Casillas numeradas con su partido, una X dibujada a mano al marcar y la casilla de voto en blanco, que explica qué significa.

Entrevista en vivo

La respuesta llega en streaming, como la transcripción de una entrevista, ceñida al plan oficial.

Compare con

Un toque y el candidato contrasta sus propuestas con las de otro.

Fuentes como anexo

Cada candidato con su lista numerada de documentos oficiales, sitios y prensa.

Celular y escritorio

En pantalla grande el tarjetón queda sobre un escritorio, con las seis casillas en fila y el chat con la ficha al lado.

Panel de escrutinio

Analítica anónima de preguntas, con barras por candidato, actividad de 14 días y comparaciones.

Cómo funciona

De principio a fin.

  1. Fuentes oficiales

    Planes de gobierno, webs de campaña y prensa.

    5 candidatos

  2. Extracción

    Se descargan y limpian de forma automática.

    Playwright · Python

  3. Curaduría

    177 KB de planes revisados a mano y atribuidos por candidato.

    Base .md

  4. Marcas con una X

    La IA responde en primera persona, solo con el plan de ese candidato.

    Claude Haiku 4.5

  5. Respuesta con fuentes

    En vivo, con un anexo numerado de dónde sale cada dato.

    SSE

Pantallas

Así se ve.

Ficha técnica

Cómo está hecho.

Frontend

  • React 19
  • Vite
  • Tailwind 4
  • Framer Motion

Diseño

  • Archivo
  • Newsreader
  • IBM Plex Mono
  • Papel y tinta

Datos

  • Playwright (scraping)
  • Python
  • Base .md curada

IA

  • Claude Haiku 4.5
  • SSE
  • Prompt engineering

Integraciones

  • Anthropic Claude — motor conversacional en streaming
  • Supabase — analítica anónima y panel de escrutinio
  • Vercel — serverless + Analytics + Speed Insights
  • Difusión — el tarjetón como imagen para WhatsApp, Instagram y LinkedIn

Método

  • Diseño basado en el tarjetón real (casillas numeradas, franja tricolor 2:1:1 y fondo de seguridad) · curaduría humana de fuentes oficiales y prensa, con atribución por candidato · prompt engineering para mantener neutralidad y evitar alucinación.