Cómo enseñar a los agentes de IA a diseñar sin plantillas y ensamblar presentaciones de video
Cualquiera que haya pedido a Claude o Cursor que construya una página de destino conoce este resultado. El código generado funciona técnicamente, pero visualmente parece una página típica de 2018 con botones azules y tarjetas redondeadas. Los modelos conocen la sintaxis de CSS y React, pero carecen de gusto de diseño integrado y comprensión de la estructura del proyecto.
El repositorio garden-skills del desarrollador chino ConardLi resuelve este problema a través del formato Agent Skills. Este es un conjunto de módulos que siguen la especificación SKILL.md y transforman a Claude Code, Cursor, Codex y otros agentes de terminal en ingenieros especializados.
Qué son los Agent Skills y cómo funcionan
Anthropic propuso recientemente un estándar abierto para extender las capacidades de los agentes. Esencialmente, un skill es una carpeta separada en tu proyecto o directorio de inicio que contiene un manifest SKILL.md con una cabecera YAML, instrucciones de texto, scripts listos para usar y guías de referencia.
El agente escanea el campo description en el manifest. Cuando la tarea del usuario coincide con la descripción, el modelo carga el contexto relevante directamente durante la conversación. Esto elimina la necesidad de copiar extensos system prompts en cada chat.
El repositorio garden-skills contiene cinco módulos listos para usar para tareas de trabajo del mundo real.
Skills listos para usar en el repositorio
Cada skill está adaptado a un escenario específico y contiene reglas de interacción estrictas para evitar que el agente alucine o se saltee las aprobaciones de etapas.
1. web-design-engineer
El módulo se enfoca en maquetar páginas, dashboards, prototipos y componentes interactivos. En lugar de plantillas genéricas, utiliza una base de datos de 25 estilos visuales listos para usar. Estos incluyen la estética de Linear, el terminal de Bloomberg, el estilo suizo, el neumorfismo, el retro-futurismo y el minimalismo inspirado en el diseñador kenyano Kenya Hara (Muji).
El skill obliga al modelo a trabajar en cinco parámetros: densidad de elementos, dinámica de animación, dependencia de assets, alineación de marca y variabilidad. El agente primero valida el concepto y la paleta en oklch(), luego construye un prototipo inicial v0, y solo escribe el código React final después de la aprobación.
2. web-video-presentation
Este skill toma texto fuente, un artículo técnico o notas de lección y ensambla una presentación web interactiva a una resolución fija de 1920×1080 usando el stack de Vite, React y TypeScript.
La presentación se controla por pasos y clics de teclado, por lo que cada énfasis semántico se sincroniza con el paso visual en pantalla. Los elementos de la interfaz se ocultan al pasar el cursor, lo que permite grabar una pantalla limpia para video.
El módulo soporta 23 temas integrados e integra con generación de voz a través de MiniMax CLI, OpenAI TTS, ElevenLabs o la utilidad del sistema macOS say.
3. beautiful-article
La herramienta convierte datos sin procesar (enlaces, PDFs, DOCX, notas o volcados de chat) en un diseño de artículo legible. El skill se basa en la biblioteca de componentes Reacticle y 11 perfiles de diseñador (Tufte, Bodoni, Vignelli, Knuth).
El módulo ofrece 10 formatos de publicación, desde tutoriales detallados con preservación del 90% del texto original hasta explicadores interactivos con reelaboración profunda del contenido. Durante el ensamblaje, el agente обязательно делает паузы para confirmar el tema, la estructura y la estrategia de ilustraciones.
4. gpt-image-2 y kb-retriever
Otros dos skills cubren tareas más específicas:
gpt-image-2contiene 79 plantillas de prompts estructuradas para generar diagramas, diagramas arquitectónicos, banners y mockups de UI a través de APIs compatibles con OpenAI. Puede funcionar en modo de generación de código o simplemente como asesor para componer prompts.kb-retrieverorganiza la búsqueda local a través de una carpeta estructurada con documentos, PDFs y tablas de Excel. En lugar de alimentar archivos pesados al agente completos y obstruir la ventana de contexto, el skill lee índices de árboldata_structure.md, usa utilidades comogrepopdftotext, y encuentra extractos precisos en un máximo de 5 iteraciones.
Formas de instalar en un proyecto
La forma más rápida de agregar skills a tu entorno de trabajo es usar el gestor de paquetes npx skills. La utilidad detecta automáticamente qué asistente de IA se está ejecutando en el directorio y coloca los archivos en la carpeta correcta.
Instalar todos los módulos a la vez:
npx skills add ConardLi/garden-skills
Instalar un skill específico en la configuración global:
npx skills add ConardLi/garden-skills -s web-design-engineer --global
Si usas Claude Code, puedes conectar plugins directamente a través del marketplace integrado:
/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills
Para versiones fijas en CI/CD o proyectos con requisitos estrictos de dependencias en los releases, el repositorio proporciona archivos .zip firmados con sumas de verificación SHA-256. Simplemente descomprime el archivo en .claude/skills/ o .agents/skills/.
Compatibilidad con agentes
El formato es abierto, por lo que los skills funcionan no solo con el ecosistema de Anthropic. El proyecto ha sido probado con las siguientes herramientas:
- Claude Code y la interfaz web de Claude.ai (a través de la sección Capabilities)
- Cursor (carpeta
.agents/skills/<name>/) - Codex CLI
- Gemini CLI
- OpenCode
A quién le será útil este proyecto
La colección de ConardLi ahorra tiempo para quienes usan agentes de IA diariamente en la terminal o editor de código. En lugar de configurar manualmente el contexto y corregir errores de maquetación infantiles, obtienes un pipeline predecible con puntos de control y tokens de diseño de calidad.
La forma más fácil de comenzar es con web-design-engineer o beautiful-article. Dan resultados visibles desde la primera solicitud y muestran cómo componer correctamente tus propias instrucciones para la especificación SKILL.md.
Proyectos relacionados