Saltar al contenido
Aula en la nube
Sesión 5 de 5FP y Secundaria · Comunitat Valenciana

Tu herramienta desde cero con OpenCode

El laboratorio: OpenCode, un agente que escribe los ficheros por ti, convierte el encargo de la sesión 4 en una herramienta web de un solo fichero que funciona sin internet y guarda los datos en tu navegador. Plan, construir, probar, corregir y compartir.

Sesión 1La fichael contexto quepegas siempreSesión 2El cuadernotus fuentes ytus promptsSesión 3Las rúbricasy un protocolode correcciónSesión 4El asistentetu agente y elencargo de la appSesión 5La herramientauna web propiaque funciona sola

Desliza el diagrama de lado para verlo entero

Hoy, en la sesión 5: juntas todas las piezas en tu propia herramienta.

Vídeo resumen

La sesión 5, en un vídeo

Estamos preparando el recorrido en vídeo de esta sesión. Aparecerá aquí y en el canal IA para docentes; mientras tanto, todo lo que se ve en la sesión está en esta página.

Canal de YouTube IA para docentes →

Vídeo en preparación

En esta sesión

Antes de empezar

De un chat a un agente que trabaja

Hasta ahora, Copilot te contestaba con texto y tú copiabas, pegabas y probabas. Un agente es el mismo tipo de IA, pero con herramientas: abre los ficheros de una carpeta, los escribe, mira lo que ha hecho y decide el siguiente paso, en bucle, hasta acabar. Tú no programas: encargas, revisas y decides.

Sesiones 1 a 4

Copilot Chat

  • Te contesta con texto: una respuesta por mensaje.
  • No ve tus ficheros: solo lo que le pegas.
  • El trabajo de copiar, guardar y probar es tuyo.

Hoy

OpenCode

  • Trabaja dentro de una carpeta de tu ordenador.
  • Crea y cambia los ficheros él mismo, con tu permiso.
  • Da vueltas hasta acabar y te avisa para que pruebes.

El bucle del agente

Tú pidesel encargo, con tu fichaPlanificaqué hace y en qué ordenEscribe ficheroscrea o cambia index.htmlTe pide permisosi editar preguntatú: sí o noMira el resultadolee lo que ha escrito¿Ha terminado?compara con lo pedidoTe avisatú la abres y la pruebassíno: otra vuelta

Desliza el diagrama de lado para verlo entero

Un chat te da una respuesta; un agente da muchas vueltas a este bucle por ti.

Por qué OpenCode

Gratis

Se descarga sin pagar y trae modelos gratuitos para empezar sin cuenta.

Código abierto

Licencia MIT: cualquiera puede leer cómo funciona por dentro.

Tus ficheros, en casa

La herramienta que construye vive en tu carpeta, no en la web de nadie.

El mismo concepto

El modo agente de Copilot y otros agentes funcionan igual: lo que aprendes aquí te sirve allí.

Lo que sigue siendo tuyo

El agente escribe el código, pero la herramienta es tuya: tú decides qué hace, tú lees cada permiso antes de aceptarlo y tú la pruebas antes de fiarte de un solo número. Si calcula mal una nota y no lo compruebas, el error no es de la IA: es de quien la usó sin mirar.

Paso 1 · Instala la app de escritorio

OpenCode tiene una versión de terminal y una app de escritorio. Para este seminario, la app: ventanas y botones, sin escribir órdenes. Se descarga de opencode.ai/download, en el apartado OpenCode Desktop.

Windows

Botón de Windows (x64); si tu portátil es ARM, el de ARM64. Es un instalador: doble clic y siguiente.

macOS

El .dmg de Apple Silicon o de Intel, según tu Mac. Lo arrastras a Aplicaciones.

Linux

Paquete .deb (Ubuntu, LliureX) o .rpm (Fedora), con el instalador de tu sistema.

¿Tu portátil no te deja instalar programas? Es normal en equipos gestionados. No pasa nada: salta al plan B y harás tu herramienta con Copilot Chat, sin instalar nada.

Descarga oficial: OpenCode: descarga de la app de escritorio (versión 2.2.5, 30 de octubre de 2026).

Los nombres de botones de esta sesión se comprobaron en la interfaz web de OpenCode 2.2.5, en castellano. Si tu app los muestra en inglés o en otro sitio, busca la misma palabra.

Dónde vive cada cosa

Tu ordenadorInternetOpenCodela app de escritorioTu carpetamemoria y reglasy tu herramientaEl modelo de IAgratis de OpenCodeo GitHub Copilotlee y escribetu petición y lo que leela respuesta

Desliza el diagrama de lado para verlo entero

Tu herramienta y tu carpeta se quedan en tu ordenador; al modelo solo viaja lo que el agente le envía.

Paso 2 · Crea tu carpeta y ábrela

El agente trabaja dentro de una carpeta. Créala vacía, solo para tu herramienta, por ejemplo en Documentos. Después, en OpenCode: Añadir proyecto, se abre la ventana Abrir proyecto, buscas tu carpeta y pulsas Seleccionar carpeta.

  • Un nombre corto y sin espacios ni tildes: cuaderno-evaluacion, banco-preguntas…
  • Nada más dentro: ni apuntes, ni listas de clase, ni fotos. Lo que haya en la carpeta, el agente lo puede leer.
  • Una carpeta por herramienta. Si mañana haces otra, otra carpeta.

Tu carpeta, al acabar la sesión

cuaderno-evaluacion
AGENTS.mdla memoria (paso 4)
opencode.jsonlas reglas (paso 5)
index.htmltu herramienta: la escribe el agente

La carpeta es su mundo

Lo que el agente puede tocarcuaderno-evaluacionAGENTS.md · la memoriaopencode.json · las reglasindex.html · tu herramientaFuera de la carpetaDocumentostus otros ficherosEscritorioy todo lo demás✕external_directory: denyel agente no sale de aquí

Desliza el diagrama de lado para verlo entero

Abre siempre una carpeta vacía, solo para la herramienta: lo que no está ahí, el agente no lo toca.

Paso 3 · Elige el modelo

El modelo es la IA que piensa; OpenCode solo es el que trabaja. Se elige en el selector que hay debajo de la caja de texto, donde se ve su nombre. En la lista, los gratuitos llevan la etiqueta Gratis.

Gratis, sin cuenta

Elige GLM o DeepSeek

GLM-5.3-Flash Free y DeepSeek V4.1 Flash Free son los únicos gratuitos que declaran no guardar lo que les escribes. La herramienta de ejemplo se hizo con GLM.

Letra pequeña

Ojo con el que viene marcado

El que sale como Predeterminado puede no ser el que quieres. Big Pickle, Flint y MiMo pueden usar lo que escribes para mejorar su modelo, y los Nemotron registran el uso.

Si eres docente verificado

GitHub Copilot

Con GitHub Education tienes Copilot Pro gratis (1.500 créditos al mes). En OpenCode: Conectar proveedor (o /connect), GitHub Copilot y «Login with GitHub Copilot».

GitHub para docentes: GitHub Copilot Pro gratis para docentes verificados (2026).

Tres caminos para el modelo

Gratis de OpenCodesin cuenta y sin pagarpor tiempo limitadosolo GLM y DeepSeekdeclaran no guardarGitHub Copilotgratis si eres docenteverificado en GitHub1.500 créditos al messe conecta con /connectDe pagoConsole o Go de OpenCode,OpenAI, Google…no te hacen faltapara este seminarioRegla de oro: en un modelo gratis, nada personal ni confidencial

Desliza el diagrama de lado para verlo entero

Paso 4 · Escribe AGENTS.md: su memoria

El modelo no recuerda nada de un día para otro. AGENTS.md es un fichero de texto en tu carpeta que OpenCode lee al empezar cada conversación: tu ficha y tus reglas. Es la ficha de la sesión 1, convertida en instrucciones.

  • Corto y concreto: se lee siempre, así que cada línea cuenta.
  • Las reglas que no se rompen: un solo fichero, sin internet, datos solo en el navegador.
  • Cada vez que el agente repita un error, una línea más.

Descarga este AGENTS.md y adáptalo, o pídeselo a Copilot con tu ficha (el prompt de abajo).

Quién la usa y qué es: AGENTS.md

cuaderno-evaluacion/AGENTS.md · parte 1 de 2
# Cuaderno de evaluación por criterios​## Qué esUna herramienta web para docentes: guarda los pesos de los criterios, las notas decada actividad y calcula la nota de cada criterio, de cada bloque y la final.​## Quién la usaDocentes de la Comunitat Valenciana que evalúan por criterios:- FP: resultados de aprendizaje (RA) con su peso y criterios de evaluación (CE) dentro de cada RA.- ESO y Bachillerato: competencias específicas con su peso y criterios de evaluación dentro de cada una.No saben programar: todo lo que vean tiene que entenderse sin explicaciones.

Reglas y forma de trabajar: AGENTS.md

cuaderno-evaluacion/AGENTS.md · parte 2 de 2
## Reglas que no se rompen- Un único fichero: index.html, con el HTML, el CSS y el JavaScript dentro.- Sin librerías, sin CDN y sin internet: tiene que funcionar abriéndolo con doble clic.- Los datos solo se guardan en este navegador (localStorage). Nada se envía a ningún sitio.- Todo en castellano. Notas de 0 a 10, con un decimal y coma decimal.- Accesible: cada campo con su etiqueta, se maneja con el teclado y el contraste se lee bien.- Modo claro y oscuro según el sistema.​## Cómo trabajar- Antes de un cambio grande, explica tu plan en cinco líneas.- Haz solo lo que se pide en cada mensaje y di qué has cambiado.- No borres ficheros ni salgas de esta carpeta.

Tu AGENTS.md, a partir de tu ficha

Prompt · Copilot Chat
Te paso la ficha de mi materia o módulo y el encargo de mi herramienta.Escríbeme un fichero AGENTS.md de menos de 30 líneas, en castellano, con cuatro apartados:1. Qué es: la herramienta en dos frases.2. Quién la usa: yo y mi contexto (etapa, materia o módulo), sin datos de alumnado.3. Reglas que no se rompen: un único index.html sin librerías ni internet; datos solo en el navegador; accesible con teclado; modo claro y oscuro; en castellano.4. Cómo trabajar: antes de un cambio grande, explica el plan; haz solo lo que se pide; no borres ficheros ni salgas de la carpeta.​Mi ficha:[PEGA AQUÍ TU FICHA]​Mi encargo:[PEGA AQUÍ EL ENCARGO DE LA SESIÓN 4]

Se lee al empezar cada sesión

Tu AGENTS.mdtu ficha ytus reglasHoysabe quién eresMañanasabe tus reglasDentro de un mesno hay que repetirlo

Desliza el diagrama de lado para verlo entero

El modelo no recuerda nada de una conversación a otra: lo que debe saber siempre va en AGENTS.md.

La extensión que Windows esconde

Si creas el fichero con el Bloc de notas, guárdalo con Tipo: Todos los archivos y codificación UTF-8. Si no, se llamará AGENTS.md.txt y OpenCode no lo encontrará. Descargarlo desde esta página te ahorra el problema.

Paso 5 · Pon las tres reglas: opencode.json

De fábrica, OpenCode lo permite casi todo sin preguntar. Este fichero, en tu carpeta, le pone tres reglas. No hace falta entender cada línea: descárgalo y déjalo tal cual.

  • edit · ask

    Para cambiar un fichero, te pregunta. Las órdenes de terminal y las webs, también.

  • external_directory · deny

    No sale de tu carpeta: ni lee ni escribe fuera de ella.

  • policies · rm, del, sudo

    Nunca borra ficheros, se lo pida quien se lo pida.

Descarga este opencode.json. El bloque final, agents, impide que el agente Plan escriba: solo piensa.

El opencode.json, entero

cuaderno-evaluacion/opencode.json
{  "$schema": "https://opencode.ai/config.json",  "permissions": [    { "action": "edit", "resource": "*", "effect": "ask" },    { "action": "shell", "resource": "*", "effect": "ask" },    { "action": "webfetch", "resource": "*", "effect": "ask" },    { "action": "external_directory", "resource": "*", "effect": "deny" }  ],  "policies": [    { "action": "tool.use", "resource": "shell:rm *", "effect": "deny" },    { "action": "tool.use", "resource": "shell:del *", "effect": "deny" },    { "action": "tool.use", "resource": "shell:Remove-Item *", "effect": "deny" },    { "action": "tool.use", "resource": "shell:sudo *", "effect": "deny" }  ],  "agents": {    "plan": { "permissions": [{ "action": "edit", "resource": "*", "effect": "deny" }] },    "explore": { "permissions": [{ "action": "edit", "resource": "*", "effect": "deny" }] }  }}

Qué pasa cuando quiere actuar

Cambiar index.htmleditarpreguntar · askTe preguntapermitir o rechazarAbrir Documentossalir de la carpetadenegar · denyNo sale de la carpetabloqueado sin preguntarBorrar un ficheroorden rmpolítica · nuncaNunca borralo prohíbe una política

Desliza el diagrama de lado para verlo entero

Permitir una vez, no permitir siempre

Cuando quiera cambiar index.html, verás Permiso requerido con tres botones: Denegar, Permitir siempre y Permitir una vez. Usa Permitir una vez: es tu ocasión de ver qué toca. En Ajustes hay un interruptor, Aceptar permisos automáticamente: déjalo apagado.

Con total transparencia: la primera versión del ejemplo se construyó sin pantalla, desde un script, con una copia de estas reglas que permitía editar y prohibía las órdenes de terminal. Todas las mejoras posteriores se hicieron en la interfaz, aprobando cada cambio con «Permitir una vez».

Paso 6 · Pide primero el plan

OpenCode trae dos agentes: Plan, que piensa y no toca ficheros, y Build, que construye. Para verlos, activa en Ajustes la opción Mostrar agente: aparece el selector Elegir agente junto al del modelo. Elige Plan y pega tu encargo de la sesión 4.

Prompt · OpenCode (agente Plan)
Lee AGENTS.md. Te paso el encargo de mi herramienta. Todavía no escribas nada: dame tu plan en pocas líneas (pantallas, cómo guardarás los datos y cómo harás los cálculos) y las dudas que tengas.​[PEGA AQUÍ TU ENCARGO EN SEIS BLOQUES]

Plan, revisas, Build, pruebas

Agente Planpiensa y proponeno toca ficherosTú revisasrespondes dudasy corriges el planAgente Buildescribe el ficherocon tu permisoTú pruebascomo el alumnomás trasto

Desliza el diagrama de lado para verlo entero

Lo que hizo el plan con el cuaderno

El plan real del ejemplo, en 34 segundos: pantallas, cómo guardar los datos y cómo calcular. Y lo más útil: sus dudas.

Lo que propuso

  • Cinco pestañas: Configuración, Alumnado, Actividades, Notas y Resultados.
  • Todo en el navegador, bajo una sola clave, y guardado a cada cambio.
  • Medias ponderadas que ignoran lo no evaluado, con avisos.

Lo que preguntó

  • Si los pesos no suman 100, ¿avisar o bloquear?
  • Al cambiar de modo FP / ESO, ¿borrar los datos?
  • Una casilla vacía, ¿es un cero o «no evaluado»?

La segunda duda importaba: proponía borrar todo al cambiar de modo. Se lo corregimos en la respuesta. Por eso el plan va antes: lo que decides ahí no hay que arreglarlo después.

Paso 7 · Da luz verde a Build

Cambia a Build y contesta sus dudas en el mismo mensaje en que le das permiso para empezar. Con cada cambio te pedirá permiso: Permitir una vez, y mira qué fichero toca.

Prompt · OpenCode (agente Build)
Respuestas a tus dudas: 1) [TU RESPUESTA]. 2) [TU RESPUESTA]. 3) [TU RESPUESTA].[SI ALGO DEL PLAN NO TE CONVENCE: «Cambia esto: …»]Adelante: construye el index.html siguiendo el plan.

En el ejemplo, este mensaje produjo la primera versión completa: un index.html de unos 35 KB con las cinco pestañas, los cálculos, la copia en JSON, el CSV y la impresión. La cadena completa, mensaje a mensaje.

Paso 8 · Pruébala como el alumno más trasto

Que funcione con los datos bonitos no significa nada. Ábrela con doble clic y intenta romperla: es lo que hará el primer día cualquier usuario con prisa.

  • Escribe «abc» en una nota¿Borra la nota que había?
  • Pon un 11 o un −2¿Lo acepta, lo cambia o avisa?
  • Deja casillas vacías¿Cuentan como cero o como «no evaluado»?
  • Pesos que no suman 100¿Avisa? ¿Calcula igual?
  • Recarga la página¿Siguen ahí tus datos?
  • Exporta el CSV y ábrelo¿Lo entiende tu hoja de cálculo?
  • Comprueba una nota a manoCon calculadora, de un alumno inventado.
  • Úsala solo con el tecladoTabulador, flechas, Intro.

Lo que encontramos en la primera versión

Los cálculos salían bien, comprobados a mano con un ejemplo inventado. Pero al escribir «abc» sobre un 5, el 5 desaparecía sin avisar, y un 11 se veía como 11 pero se guardaba como 10. Además, había rótulos en minúsculas: «Nota ra», «Añadir ce». Nada de eso se ve si solo pruebas lo que funciona.

Paso 9 · Corrige de uno en uno

Un fallo, una petición. Dile qué haces, qué pasa y qué esperabas, y pídele que arregle solo eso. Después, vuelve a probar antes de pedir lo siguiente.

Prompt · OpenCode (agente Build)
He probado [PANTALLA O BOTÓN] y hay un fallo:- Hago esto: [LO QUE HACES, PASO A PASO].- Pasa esto: [LO QUE VES].- Esperaba esto: [LO QUE DEBERÍA PASAR].Arregla solo esto y dime qué has cambiado.

Un fallo, una petición

Pruebaúsala de verdadAnota un fallosolo unoPídeloqué pasa y qué esperabasCompruebaque se arregló y nada másuna cosa por petición

Desliza el diagrama de lado para verlo entero

«Arréglalo todo» devuelve un revoltijo; una cosa por petición, y compruebas cada una.

La petición real del fallo de las notas

Prompt real · OpenCode (Build)
He probado la pestaña Notas como lo haría el alumno más trasto y hay un fallo que me puede hacer perder notas:- Si escribo «abc» en una casilla que tenía un 5, el 5 desaparece sin avisar.- Si escribo 11, la casilla enseña 11,0 pero se guarda un 10.Quiero que una nota no válida no cambie nada en silencio: la casilla se marca en rojo, sale un aviso que diga qué está mal y se conserva la nota anterior. Arregla solo esto y dime qué has cambiado.

Resultado: ahora la casilla se pone en rojo, avisa de qué está mal y, al salir, recupera la nota anterior. Se volvió a probar con «abc» y con 11: las notas se conservan.

Deshacer

Si un cambio no te gusta, vuelve atrás antes de seguir pidiendo cosas.

/undo

Escribe / en la caja y elige /undo: «Deshacer el último mensaje». Tu petición vuelve a la caja y los ficheros, a como estaban.

Restablecer a este punto

Cada mensaje tuyo tiene esta opción, para volver a ese punto de la conversación cuando quieres retroceder más de un paso.

Lo comprobamos: OpenCode solo puede devolverte los ficheros si la carpeta es un repositorio git. Si no lo es, tu red de seguridad eres tú: cada vez que una versión funcione, copia index.html con otro nombre (index-v1.html, index-v2.html…).

Paso 10 · Compártela con tu departamento

Tu herramienta es un solo fichero: se comparte como cualquier documento. Lo que no viaja son los datos, que se quedan en el navegador de cada uno.

OneDrive del centro

Sube index.html y comparte el enlace. Cada compañero lo descarga y lo abre con doble clic en su navegador.

Opcional

GitHub Pages

Una dirección web pública y gratis. Vale para la herramienta, nunca para datos. Tutorial.

Haz copia de tus datos

Si borras el historial del navegador, se borran. Exporta la copia en JSON cada semana y guárdala en tu OneDrive.

La herramienta viaja; los datos, no

Tu index.htmlun solo ficheroTu navegadortus datos, solo aquíOtro docentesus datos, en su equipoEl departamentocada uno, los suyosLos datos no viajanel fichero se comparte;las notas, nunca

Desliza el diagrama de lado para verlo entero

Para inspirarte

Todo esto está hecho con IA y el mismo método: encargo, plan, construir y probar.

Si no puedes instalar nada

Plan B: tu herramienta con Copilot Chat

Sin agente también se puede: Copilot Chat escribe el código y tú haces de agente, guardando el fichero. Es más lento para corregir, pero funciona en cualquier ordenador con navegador.

Copilot Chatte da el HTMLcompletoBloc de notaspegas todoel códigoGuardar comocuaderno.htmlcodificación UTF-8Doble clicse abre entu navegador

Desliza el diagrama de lado para verlo entero

El encargo para Copilot Chat

Prompt · Copilot Chat
[PEGA AQUÍ TU ENCARGO EN SEIS BLOQUES]​Dame el fichero index.html COMPLETO en un único bloque de código, de principio a fin, sin resumir ni cortar nada y sin explicaciones entre medias.Si no cabe en una respuesta, dímelo antes de empezar y quita funciones hasta que quepa.

Si la respuesta se corta a la mitad, el fichero no funcionará: pídele menos pantallas y añádelas después, de una en una, pidiendo siempre el fichero completo.

Vídeos de apoyo

Para ampliar

Para trabajar por tu cuenta

Tu tarea de la sesión 5

No se entrega: es tu plan para que lo de hoy se quede. Calcula entre 3 y 4 horas, mejor repartidos en dos ratos.

  • Instala OpenCode y abre tu carpetaO prepara el plan B con Copilot Chat.
  • Pon AGENTS.md y opencode.jsonDescárgalos de esta página y adapta AGENTS.md a tu ficha.
  • Pasa tu encargo por PlanResponde sus dudas antes de construir nada.
  • Construye la v1 con BuildPermitir una vez en cada cambio, mirando qué toca.
  • Haz las pruebas del alumno trastoCon el prompt de las diez pruebas, y apunta los fallos.
  • Tres mejoras en cadenaUna por petición, comprobando cada una y guardando una copia.
  • Enséñasela a un compañeroApunta dónde se atasca sin que tú le expliques nada.
  • Escribe tu hoja de rutaQué mejoras para lo que queda de curso y cuáles para el siguiente.

Al acabar tendrás

Tu herramienta v1 funcionando, con tres mejoras, una copia de seguridad de cada versión y la hoja de ruta para lo que queda de curso y el siguiente.

Lo que te llevas de la sesión 5

Una herramienta tuya, hecha desde cero sin programar: un encargo bien escrito, una carpeta con su memoria y sus reglas, un plan revisado antes de construir y una cadena de peticiones cortas, cada una comprobada.

Y el método, que vale para la siguiente: encargar, revisar, probar como un trasto y corregir de uno en uno. La IA escribe el código; el criterio sigue siendo tuyo.

El ejemplo resueltoTu herramienta, paso a paso: el cuaderno de evaluación y su cadena real de prompts →