GABOTRIX × TECNIMÁTICA S.A.S · PROGRAMA DE IA APLICADA
SESIÓN A-5 · 2 HORAS · TALLER PRÁCTICO · INGENIERÍA Y DESARROLLO
Llevamos la IA a la interfaz y al conocimiento del equipo: diseñamos la identidad y las pantallas en Google Stitch, las montamos en localhost con un agente y componentes de 21st.dev, le explicamos al agente cómo se trabaja en el repositorio con AGENTS.md y empaquetamos el conocimiento del equipo en skills que cada uno crea hoy.
5 bloques
cada uno con ejercicio guiado e individual
4 herramientas
Stitch, 21st.dev, VS Code con Copilot y OpenCode
2 skills
una juntos, una suya
1 identidad
de Stitch al código
Antes de entrar: VS Code con GitHub Copilot, Node.js LTS, Git y una cuenta de Google para Stitch. La lista completa está en Antes de empezar.
Idea fuerza
“Un agente sin contexto diseña como cualquiera y documenta como nadie. Lo que convierte a la IA en un miembro del equipo de Tecnimática no es el modelo: son tres archivos de texto. El DESIGN.md que dice cómo se ve, el AGENTS.md que dice cómo se trabaja en este repositorio y las skills que enseñan a hacer cada tarea a la manera de la casa.”
Agenda · los tiempos son ajustables por el facilitador
0:00–0:05
5 min
Diagnóstico rápido: con qué diseñan hoy, qué archivos .md conocen y qué tan claro tienen qué es una skill.
Conducción: Abra TM05. Capture la línea base de archivos conocidos y claridad; no corrija todavía.
0:05–0:12
7 min
Guiado: crítica de una pantalla típica. Individual: qué principio rompe su producto.
Conducción: Use ejemplos de planta y pida evidencia de una pantalla real, sin mostrar información de cliente.
0:12–0:35
23 min
Guiado: Monitor de Dosificación y exportación de DESIGN.md. Individual: identidad y una o dos pantallas de otro producto.
Conducción: Reserve los últimos 8 minutos para el ejercicio individual y recuerde exportar DESIGN.md.
0:35–1:05
30 min
Guiado: la pantalla de Stitch en localhost con un componente integrado. Individual: lo mismo con su diseño.
Conducción: Autorice comandos y cambios uno por uno y revise que el cambio compile, respete el alcance y use los tokens del diseño.
1:05–1:15
10 min
Guiado: el facilitador muestra /init en OpenCode y se corrige el AGENTS.md. Individual: AGENTS.md de un repositorio real con el generador.
Conducción: Diferencie reglas permanentes, conocimiento ocasional, diseño y documentación humana.
1:15–1:55
40 min
Guiado: skill de identidad visual desde el DESIGN.md. Individual: skill de documentación técnica, probada sobre consumo_bache.vb.
Conducción: Evalúe primero la descripción: debe decir qué hace y cuándo se usa.
1:55–2:00
5 min
Medir capacidad, intención de uso y la próxima skill de cada participante.
Conducción: Compare las preguntas 4 y 11. Anuncie que la pregunta 13 irá con nombre al informe.
Antes de empezar
Entre a stitch.withgoogle.com.
Instale la extensión de GitHub Copilot e inicie sesión; el plan gratuito alcanza para la práctica con límites.
Compruebe en terminal con node -v.
El agente y la reversión del cambio dependen de un repositorio controlado.
Instale la aplicación desde opencode.ai/download para seguir la demostración rápida del Bloque 4; se verá a fondo en otra sesión.
Descargue consumo_bache.vb, usado en la A-4.
Stitch, 21st.dev y los agentes son servicios en la nube. Hoy se trabaja con datos de demostración: nada de código propietario de ChronoSoft, fórmulas, nombres de clientes ni cadenas de conexión. Es el semáforo de la A-1.
Bloque 1 · UI/UX que funciona en planta
Lo crítico primero y más grande: estado de planta y alarmas.
Cifras críticas de mínimo 28 px, monoespaciadas, a la derecha y con unidad.
Verde, ámbar y rojo siempre con ícono y texto; cerca de uno de cada doce hombres tiene alguna forma de daltonismo.
Vacío, cargando, error, sin conexión y alarma.
Una por pantalla; las destructivas piden confirmación.
Colores, tipografía y espaciado en un solo lugar: luego se exportan como DESIGN.md.
Pantallas densas pero agrupadas, con espaciado en múltiplos de 8 px.
Qué pasó, cuándo y quién, como los sucesos del operario en ChronoSoft.
En TM05, escriba qué principio rompe más el software que entregan hoy y en qué pantalla.
Bloque 2 · Google Stitch
Google Stitch es una herramienta gratuita de Google Labs que genera interfaces web y móviles de varias pantallas a partir de texto, imágenes o código. Desde marzo de 2026 trabaja sobre un lienzo con agente de diseño, enlaza pantallas con Play, exporta HTML con Tailwind CSS y React, entre otros, y entrega DESIGN.md. También ofrece servidor MCP y SDK.
Las funciones y los cupos cambian seguido; si algo no coincide con su pantalla, manda la herramienta.
Empiece por el producto, el usuario y el contexto.
Nombre cada pantalla y sus componentes.
Fije el tema desde el inicio: colores hexadecimales, tipografía y radio.
Use palabras de interfaz: barra lateral, tarjeta de indicador, tabla y etiqueta de estado.
Cambie una sola cosa por iteración y diga en qué pantalla.
Pida variantes cuando no sepa qué quiere.
Diseña una aplicación web de escritorio llamada Monitor de Dosificación para supervisores de plantas de alimentos balanceados. Es parte del software ChronoSoft de Tecnimática. Estilo industrial, limpio y muy legible, pensado para pantallas grandes en sala de control. Tema claro: color primario verde azulado #0F766E, texto casi negro #111827, fondo gris muy claro #F4F6F8, superficies blancas. Colores de estado: verde #16A34A para OK, ámbar #D97706 para ALERTA y rojo #DC2626 para RECHAZADO, siempre con ícono y texto. Tipografía Inter; cifras en fuente monoespaciada. Bordes redondeados de 8 px y espaciado en múltiplos de 8 px.
Pantalla 1, Panel del turno: barra lateral con Panel, Baches, Básculas, Reportes y Configuración; encabezado con la planta Puerto Salgar, el turno actual y la hora; cuatro indicadores grandes (baches del turno, toneladas dosificadas, baches en alerta, baches rechazados); tabla de los últimos 10 baches con código, fórmula, hora, desviación en % y estado; panel lateral de alarmas activas.Agrega la Pantalla 2, Detalle de bache, con exactamente el mismo estilo: encabezado con el código B-4471, la fórmula, la hora de inicio y fin y el estado RECHAZADO; tabla de materiales con kg de fórmula, kg dosificados, desviación en % y una barra visual de desviación; gráfica de barras de fórmula contra real por material; botones Exportar PDF y Marcar como revisado. Incluye un material con desviación de -8 % marcado como RECHAZADO.Agrega la Pantalla 3, Reporte del turno: filtros por fecha, turno y fórmula; resumen de consumo por material; lista de sucesos del operario con hora y descripción; botón Descargar Excel. Luego, en el Panel del turno, aumenta las cifras de los cuatro indicadores a mínimo 32 px para que se lean a dos metros.Qué debe observar
Diseña [web/móvil] llamada [nombre] para [usuario] de [contexto]. Estilo [adjetivos]. Tema: primario [hex], fondo [hex], estados [hex], tipografía [fuente], radio [px]. Pantalla 1, [nombre]: [componentes]. Pantalla 2, [nombre]: [componentes].Entregable: complete la identidad y al menos una pantalla, responda en TM05 y comparta la captura. Si el tiempo no alcanza, la segunda pantalla queda como encargo.
Bloque 3 · Del diseño al código
21st.dev es un catálogo comunitario de más de 12.000 componentes React y Tailwind CSS compatibles con shadcn/ui. Cada componente trae instalación y Copy prompt. El agente integra código que queda dentro de su repositorio, no como dependencia oculta.
Quien prefiera lo de la A-3 puede usar Antigravity: Stitch exporta directo a Antigravity.
01
Cree monitor-dosificacion/ con:
├── stitch/detalle-bache.html
└── DESIGN.md
Ábrala en VS Code: Archivo → Abrir carpeta.02
Abra el chat de Copilot, elija Plan en el selector de agente, pegue este prompt y lea el plan.
ROL: Actúa como desarrollador front-end senior en React, Vite, TypeScript y Tailwind CSS.
INSTRUCCIÓN: Crea en esta carpeta un proyecto React con Vite, TypeScript y Tailwind CSS, y convierte stitch/detalle-bache.html en una página React fiel al diseño. Toma colores, tipografía, radios y espaciado de DESIGN.md y decláralos como tokens en src/styles/tokens.css, usados desde Tailwind. Luego instala dependencias y arranca el servidor de desarrollo.
INPUT: stitch/detalle-bache.html y DESIGN.md.
OUTPUT: proyecto que corre con npm run dev en localhost y la lista de archivos creados. No agregues librerías de componentes todavía. No inventes datos: usa los del HTML.03
Cambie a Agent en el selector y escriba “Implementa el plan”. Apruebe los comandos y los cambios uno por uno. Abra http://localhost:5173.04
Busque table, stats o chart. Abra un componente y pulse Copy prompt.05
Con Agent, pegue este prompt de integración:
Integra este componente de 21st.dev en la página de detalle de bache, reemplazando la tabla de materiales. Usa los tokens de src/styles/tokens.css, no los colores del ejemplo. Conserva los datos actuales. No cambies nada más de la página. Si necesitas configurar shadcn/ui o instalar dependencias, dime cuáles y por qué antes de hacerlo.
[pegue aquí el prompt copiado de 21st.dev]Descargue revisor-ui.agent.md y guárdelo en monitor-dosificacion/.github/agents/. Elija revisor-ui en el selector de agente y escriba: “Revisa la página de detalle de bache”.---
name: revisor-ui
description: Revisa una pantalla contra DESIGN.md y la checklist de la A-4, sin modificar archivos
tools: ['search/codebase', 'search/usages']
---
Eres revisor de interfaces de Tecnimática. Lee DESIGN.md y los archivos de la pantalla indicada. Responde con una tabla de tres columnas: punto, cumple o no cumple, evidencia (archivo y línea). Revisa: 1) usa solo colores y tipografía de DESIGN.md o de tokens.css; 2) los estados tienen color, ícono y texto; 3) las cifras van en monoespaciada, alineadas a la derecha y con unidad; 4) se agregaron dependencias y cuáles; 5) cambió algo que no se pidió. No escribas código ni propongas cambios: solo evidencia.Qué debe observar
Si el modelo se queda sin cupo o el plan gratuito llega al límite, cambie de modelo en el selector del chat. Si un componente rompe el diseño, restaure el checkpoint anterior o deshaga con Git y elija otro. Use la guía oficial de shadcn para Vite. Si no encuentra el selector de agente, abra el chat de Copilot con Ctrl+Alt+I y mire la parte inferior del cuadro de mensaje.
Blazor encaja directo porque es HTML. Para WinForms o WPF, use captura y DESIGN.md como especificación visual, no como código.
En VS Code, exporte su diseño, móntelo como ruta nueva e integre un componente de 21st.dev. Responda cuál fue y qué tuvo que corregirle al agente.
Bloque 4 · Los .md que importan en IA
Lo que el agente debe saber siempre va en AGENTS.md, y corto. Lo que debe saber hacer a veces va en una skill. Cómo se ve va en DESIGN.md. Y lo que es para personas, en el README.
| Archivo | Quién lo lee | Para qué | Cuándo carga |
|---|---|---|---|
| README.md | Personas y agentes | Qué es y cómo correrlo | Al abrirlo |
| AGENTS.md | VS Code con Copilot, OpenCode, Codex, Cursor y otros | Comandos, estructura, convenciones y límites | Siempre |
| CLAUDE.md | Claude Code | Instrucciones; puede contener solo @AGENTS.md | Siempre |
| GEMINI.md | Gemini CLI | Instrucciones para Gemini | Siempre |
| .github/copilot-instructions.md | GitHub Copilot | Instrucciones del repositorio | Siempre |
| .github/instructions/*.instructions.md | GitHub Copilot | Reglas por tipo con applyTo | Al coincidir |
| .github/prompts/*.prompt.md | Copilot en VS Code | Prompts reutilizables con / | Al invocarlo |
| SKILL.md | Claude, Copilot, OpenCode y otros | Procedimiento con recursos | Si coincide |
| .github/agents/*.agent.md | VS Code con Copilot | Agentes propios con su rol y sus herramientas, como el revisor-ui del bloque 3 | Cuando usted lo elige en el selector de agente |
| DESIGN.md | Stitch y agentes | Sistema de diseño | Al mencionarlo o desde skill |
| llms.txt | Agentes que visitan sitios | Resumen del sitio | Al visitar |
Qué esAgente de código abierto, en terminal y aplicación de escritorio, compatible con muchos proveedores de modelos
/initCrear AGENTS.md
TabAlternar Build y Plan
@Llamar archivos, subagentes y skills
Próxima sesiónLo vemos a fondo en otra sesión
El facilitador abre monitor-dosificacion en OpenCode y escribe /init. Se lee el AGENTS.md generado y se corrige entre todos: agregar Límites, la regla “toda interfaz sigue DESIGN.md” y Antes de terminar. Luego, en VS Code, se prueba con Plan: “Agrega una pantalla de inicio de sesión”.
VS Code con Copilot lee el mismo AGENTS.md.
Use el generador con un repositorio real, sin secretos, y descargue el archivo.
Generador de AGENTS.md
# AGENTS.md ## Proyecto Monitor de Dosificación ChronoSoft Web (prototipo del taller). React, Vite, TypeScript y Tailwind CSS. Diseño base exportado de Google Stitch. ## Stack React, Vite, TypeScript y Tailwind CSS. ## Comandos npm install npm run dev (http://localhost:5173) npm run build ## Estructura src/pages/: una página por pantalla de Stitch. src/components/ui/: componentes de 21st.dev y shadcn/ui. src/styles/tokens.css: tokens de la identidad. DESIGN.md: sistema de diseño exportado de Stitch. ## Convenciones Componentes en PascalCase, uno por archivo. Textos en español de Colombia. Cifras con unidad, monoespaciadas y alineadas a la derecha. Toda interfaz sigue DESIGN.md. ## Límites No agregar dependencias sin decir cuáles y por qué. No modificar src/styles/tokens.css sin que se pida. No escribir colores sueltos en los componentes. Solo datos de src/data/demo.ts. ## Antes de terminar npm run build sin errores. Revisar la pantalla en el navegador. Listar los archivos tocados.
Bloque 5 · Skills
Una skill es una carpeta con un archivo SKILL.md que le enseña a un agente a hacer una tarea específica a su manera. Es como el manual de inducción de un empleado nuevo, con una diferencia: el agente solo lo abre cuando la tarea lo necesita.
| Qué es | Cuándo se usa |
|---|---|
| Prompt | Se escribe cada vez |
| Gema de la A-1 | Asistente guardado dentro de Gemini |
| AGENTS.md | Reglas del repositorio; siempre |
| Skill | Procedimiento con recursos; solo cuando hace falta y sirve en varias herramientas |
| MCP | Acceso a sistemas y datos externos; la skill es el saber hacer |
| Agente personalizado | Rol con sus propias herramientas y modelo |
Solo nombre y descripción; unas decenas de palabras.
El cuerpo de SKILL.md.
references/, scripts/ y assets/.
Por eso puede tener cien skills instaladas sin pagar sus tokens: es la palanca de costo de la A-4 hecha carpeta.
documentacion-tecnica-modulo/
├── SKILL.md obligatorio: encabezado YAML + instrucciones
├── references/ opcional: documentos que se leen solo si hacen falta
├── scripts/ opcional: código que el agente puede ejecutar
└── assets/ opcional: plantillas y archivos de salidaLa descripción lo es todo
Mala: “Ayuda con documentación.”
Buena: “Genera la documentación técnica de un módulo de software de Tecnimática con un formato fijo. Úsala cuando el usuario pida documentar código, explicar un módulo heredado o preparar la ficha técnica de un componente.”
El agente decide leyendo solo esa línea: diga qué hace, cuándo y las palabras reales del equipo.
| Herramienta | Ruta |
|---|---|
| VS Code con Copilot | .github/skills/, .claude/skills/ o .agents/skills/; personal en ~/.copilot/skills/. Se activa sola por la descripción o a mano con / en el chat. |
| OpenCode | .opencode/skills/, .claude/skills/ o .agents/skills/; global en ~/.config/opencode/skills/. También con @nombre-de-la-skill. |
| Claude Code | .claude/skills/<nombre>/ o ~/.claude/skills/<nombre>/ |
| Claude web y escritorio | Suba el .zip en configuración de skills |
“Genera documentos corporativos de GABOTRIX (OPENMARKT S.A.S.) con el branding oficial de la empresa, en PDF, Word y Excel. USA ESTA SKILL SIEMPRE que el usuario pida crear, regenerar o ajustar cualquier documento de GABOTRIX — contratos, convenios de práctica, reglamentos (RIT), políticas, formatos de RRHH (FT-GTH), propuestas comerciales, órdenes de servicio, informes técnicos, fichas de proceso, planes de trabajo en Excel, cartas o instructivos — aunque diga solo ‘en PDF con branding’, ‘con el formato de la empresa’, ‘como siempre’ o ‘con nuestro diseño’.”
docx, pdf, pptx, xlsx, frontend-design, brand-guidelines, webapp-testing, mcp-builder y skill-creator.
Skills y un servidor MCP para agentes que necesiten trabajar con diseños.
Seguridad: una skill puede traer scripts que el agente ejecuta en su máquina. Instale solo skills confiables y lea scripts antes. Nunca ponga credenciales ni datos de clientes.
Cargue el preset, pegue DESIGN.md, descargue el ZIP e instálelo en monitor-dosificacion/.claude/skills/. En VS Code con Agent, haga la prueba positiva sin nombrar la skill: “Crea una pantalla de inicio de sesión”. Haga la prueba negativa: “Explícame qué es un bache”. Finalmente escriba / en el chat y elija identidad-visual-tecnimatica. Cuando la skill se carga, en la respuesta del agente aparece la lectura del SKILL.md.
Adapte el preset de documentación, instálelo y pruébelo en VS Code con Agent sobre consumo_bache.vb usando “documenta este módulo”, sin nombrar la skill; luego pruebe una solicitud que no corresponda y finalmente escriba / en el chat y elija documentacion-tecnica-modulo. En la A-4, al documentar, la IA no solía encontrar el error del signo. Con una skill que obliga a la sección de riesgos y casos borde, ¿lo encuentra? Entregable: pegue la description en TM05.
Constructor de skills
100/100
Calidad de activación
--- name: documentacion-tecnica-modulo description: Genera la documentación técnica de un módulo, clase o proyecto de software de Tecnimática (VB.NET, C#, SQL Server o React) con un formato fijo: propósito, dependencias, entradas y salidas, flujo, reglas de negocio, riesgos, cómo probar y pendientes. Úsala cuando el usuario pida documentar código, explicar un módulo heredado, preparar la ficha técnica de un componente o actualizar la documentación técnica de un proyecto. --- # Documentación técnica de módulos ## Cuándo usarla Genera la documentación técnica de un módulo, clase o proyecto de software de Tecnimática (VB.NET, C#, SQL Server o React) con un formato fijo: propósito, dependencias, entradas y salidas, flujo, reglas de negocio, riesgos, cómo probar y pendientes. Úsala cuando el usuario pida documentar código, explicar un módulo heredado, preparar la ficha técnica de un componente o actualizar la documentación técnica de un proyecto. ## Cuándo NO usarla Para cambiar o corregir código: esta skill solo documenta. ## Pasos 1. Leer el módulo completo y sus pruebas, si existen. 2. Identificar lenguaje, framework y versión. 3. Escribir las ocho secciones en orden. 4. Revisar cada regla de negocio contra el código y citar archivo y línea. 5. Listar en Pendientes lo que no se pudo confirmar. ## Formato de salida 1 Propósito (máximo tres líneas) · 2 Ubicación y dependencias · 3 Entradas y salidas por método público, con tipos y unidades · 4 Flujo principal · 5 Reglas de negocio con archivo y línea · 6 Riesgos y casos borde · 7 Cómo probarlo · 8 Pendientes. Si se pide archivo, docs/<NombreModulo>.md; si se piden comentarios, comentarios XML sin cambiar la lógica. ## Reglas No inventar comportamiento: lo que no se confirme va como PENDIENTE POR CONFIRMAR. Nunca copiar cadenas de conexión, contraseñas, nombres de clientes ni fórmulas. Español técnico, frases cortas, sin adjetivos de marketing. ## Ejemplo Entrada: documenta ConsumoBache. Salida esperada en Riesgos: división por cero cuando formula = 0; ClasificarBache no usa valor absoluto y deja un -8 % como OK. ## Recursos Lea references/plantilla.md solo cuando lo necesite.
Encargo
Terminar su diseño de Stitch con tres pantallas, prototipo con Play y DESIGN.md exportado.
Con los agentes de VS Code, llevar una pantalla a localhost, integrar 21st.dev y pasar la checklist A-4.
Escribir el AGENTS.md de un repositorio real sin secretos y comprobar sus límites.
Usar su skill de documentación en un módulo real sin datos de cliente y traer el .md y una versión 2 con “Reglas aprendidas”.
Proponer una segunda skill para el equipo: nombre y descripción.
Cierre
La herramienta va a cambiar. La costumbre de escribir una vez el conocimiento del equipo y reutilizarlo, no.
Material