Veinte herramientas gratuitas para el trabajo del sprint, agrupadas por el paso donde ayudan: pensar la narrativa, bocetar el mockup, elegir paleta y tipografía, practicar CSS, sumar íconos o imágenes — y cuatro recursos extra para ti como docente.
Editor de historias interactivas no lineales: pasajes conectados por decisiones.
Para el sprint: prototipar la historia ramificada antes de llevarla al HTML.
Editor de interfaces con capas, componentes y plantillas.
Para el sprint: bocetar la página completa con precisión.
Plantillas listas para armar diseños sin experiencia previa.
Para el sprint: alternativa simple si el grupo recién empieza a diseñar.
Combina wireframes y diagramas de flujo en un mismo lienzo.
Para el sprint: bocetar la página y el mapa de la narrativa juntos.
Alternativa de código abierto a Figma, sin límites de plan gratuito.
Para el sprint: si prefieres una herramienta 100 % libre.
Boceto minimalista, sin necesidad de crear una cuenta.
Para el sprint: un boceto rápido en una sola clase.
Generador de paletas; exporta los códigos hexadecimales.
Para el sprint: elegir los 2 o 3 colores de tu narrativa y pasarlos directo al CSS.
Rueda cromática con reglas de armonía (complementarios, análogos).
Para el sprint: entender por qué ciertos colores combinan entre sí.
Usa inteligencia artificial para generar paletas según tus gustos.
Para el sprint: explorar variantes de la paleta que ya elegiste.
Banco de fuentes gratis, libres de licencia para la web.
Para el sprint: elegir las fuentes de tu narrativa.
Sugiere combinaciones de dos fuentes de Google Fonts con vista previa.
Para el sprint: combinar una fuente de título con una de cuerpo de texto.
Juego para practicar selectores CSS resolviendo consignas.
Para el sprint: reforzar selectores antes de escribir el styles.css.
Juego clásico para aprender Flexbox moviendo ranas con CSS.
Para el sprint: practicar el acomodo de elementos en la página.
Lo mismo que Flexbox Froggy, pero para CSS Grid.
Para el sprint: practicar diseños de página en cuadrícula.
Ilustraciones vectoriales gratis, sin atribución obligatoria.
Para el sprint: sumar elementos gráficos de tu historia, con el color de tu paleta.
Ilustraciones animables y personalizables (Freepik).
Para el sprint: íconos o escenas que acompañen el contenido.
Bancos de íconos muy grandes, gratis con atribución.
Para el sprint: íconos puntuales (insignias, botones, señales).
Asistente conversacional de Google, gratis con una cuenta de Google.
Para el sprint: conversar sobre tu narrativa — pedirle ideas de personajes, motivaciones o finales alternativos, y decidir tú qué te sirve.
Generador y editor de imágenes de Gemini: crea ilustraciones desde texto, cambia estilos o agrega texto legible (carteles, cómics). Requiere una cuenta de 18 años o más.
Para el sprint: generar imágenes de tu narrativa con el estilo de tu paleta; en el aula, conviene que las genere el docente y las comparta con el grupo.
Genera mockups de interfaces web a partir de una descripción en texto (Google Labs, en beta, gratis con cuenta de Google).
Para el sprint: ver variantes rápidas de tu mockup antes de bocetarlo a mano o pasarlo a Figma/Canva.
Analiza tus propias fuentes (PDF, presentaciones, apuntes de clase) y genera resúmenes, guías de estudio o audios a partir de ellas — no inventa contenido nuevo, solo usa lo que subes.
Para ti: sube las presentaciones y PDF del curso y genera resúmenes o guías basados en tus propias fuentes (no es tarea de los estudiantes).
Plataforma para programadores: permite construir con los modelos de Gemini con más control sobre prompts y parámetros.
Para ti: opcional, si quieres ir más allá y programar con IA generativa (no es necesario para este sprint).
Portal de experimentos de IA de Google: ahí aparecen Stitch, Nano Banana y otras herramientas nuevas a medida que se publican.
Para ti: explorar qué suma Google más adelante, además de lo que ya está en esta lista.
El nombre que le da Google a describir en lenguaje natural lo que quieres y que la IA construya la app o el diseño por ti (así funcionan Google AI Studio, Stitch y Opal).
Para ti: no se recomienda para los estudiantes — el sprint busca que ellos escriban su propio HTML y CSS. Puede servir como disparador de debate en clase sobre qué tareas conviene delegarle a la IA y cuáles no.