🧩 Qué es / qué hace
Definición precisa a partir del SKILL.md de canvas-design.
Arte visual original en .png y .pdf según una filosofía de diseño.
O canvas-design crea imágenes estáticas de calidad museística. El proceso tiene dos etapas: primero genera una filosofía de diseño (manifiesto de un movimiento estético, en un archivo .md), después expresa esa filosofía visualmente — 90% imágenes, 10% texto esencial — y produce el archivo final .pdf o .png. Nunca copia artistas existentes, para evitar infringir los derechos de autor.
La distinción clave: la skill no crea documentos decorados. Crea objetos de arte que comunican mediante formas, espacio, color y composición, no con párrafos explicativos. El texto aparece como un elemento visual poco frecuente y poderoso, nunca como un bloque corrido.
✓ canvas-design produce
- ✓ Pósteres de eventos / campañas visuales
- ✓ Imágenes OG y miniaturas meta
- ✓ Imágenes estáticas para el hero de landing pages
- ✓ Material de difusión impreso (.pdf)
- ✓ Piezas de arte conceptual y editorial
- ✓ Assets de identidad visual estáticos
✗ canvas-design no hace
- ✗ Animaciones o videos (→ usa remotion)
- ✗ Páginas HTML interactivas (→ usa frontend-design)
- ✗ Arte generado con código/algoritmo (→ usa algorithmic-art)
- ✗ Sistemas de tokens o paletas (→ usa theme-factory)
- ✗ Copia del estilo de artistas específicos
🎣 Cuándo se activa
Los desencadenantes exactos que hacen que Claude active canvas-design.
"Crea arte visual hermoso en documentos .png y .pdf usando principios de diseño. Debes usar esta skill cuando el usuario pida crear un poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
Palabras y contextos que activan el skill
"Crea un póster para el evento X", "quiero un póster promocional", "haz un póster de estilo futurista"
"Crea una pieza de arte para mi marca", "quiero un diseño estático", "haz una obra visual"
"Necesito una imagen OG para el sitio", "crea una miniatura estática", "quiero una imagen hero"
"Necesito material visual para una campaña", "crea assets promocionales", "quiero un flyer / banner estático"
El disparador es semántico: cualquier solicitud de imagen estática final (no animada, no HTML) con intención visual/artística activa el skill. Si dudas entre canvas-design y algorithmic-art, la diferencia está en la ejecución — canvas usa una filosofía estética manual; algorithmic usa código (p5.js, etc.).
🚀 Cómo mejora tus páginas
Valor concreto que canvas-design aporta a proyectos web y de identidad.
Las páginas HTML se construyen con código, pero lo que ve el usuario a primera vista suele ser una imagen estática: la imagen OG en la vista previa de WhatsApp/Slack, la sección hero, la miniatura del curso. canvas-design eleva exactamente esta capa.
Imágenes OG y metadatos
Cuando compartes tu enlace por WhatsApp, Twitter, Slack o LinkedIn, lo que aparece es la OG image. Un póster generado por canvas-design reemplaza la captura de pantalla automática y genérica por una pieza visual intencional y profesional.
Heros estáticos
Cuando la hero section no necesita animación, un .png generado con una filosofía de diseño es más ligero, más controlado y puede tener calidad editorial, algo que HTML/CSS rara vez alcanza sin mucho esfuerzo.
Material de difusión
Publicaciones para Instagram, banners de lanzamiento, portadas de cursos: recursos que deben funcionar fuera del contexto web. canvas-design genera estos recursos en el mismo flujo que el desarrollo de la página.
En un proyecto de landing page, el workflow ideal es: brand-guidelines define la identidad → theme-factory genera los tokens de color → canvas-design crea el póster y la OG image → frontend-design construye la página usando los assets generados. canvas-design es el vínculo entre la identidad visual y la presencia web.
✓ Casos de alto impacto
- ✓ Imagen OG del curso — aparece en cada contenido compartido
- ✓ Miniatura del módulo — identidad visual coherente
- ✓ Póster de lanzamiento — difusión integrada al desarrollo
- ✓ Portada de e-book / PDF — calidad editorial directamente desde Claude
✗ Cuándo no lo resuelve
- ✗ Necesitas interactividad → usa frontend-design
- ✗ Necesitas movimiento → usa animation-designer o remotion
- ✗ Necesitas variaciones sistemáticas → usa algorithmic-art
- ✗ Necesitas editar una foto existente (retocar, eliminar el fondo) → herramienta específica
⚙️ Cómo funciona por dentro
Stack, enfoque, archivos y etapas reales de canvas-design.
canvas-design es un proceso de dos fases: Fase 1 genera el manifiesto filosófico; Fase 2 interpreta y expresa este manifiesto visualmente. La misma instancia de Claude recibe la filosofía y la ejecuta: es como escribir un manifiesto artístico y luego pintar siguiendo sus principios.
Pipeline interno, paso a paso
El SKILL.md indica a Claude que tome la entrada del usuario no como una restricción literal, sino como punto de partida para deducir una referencia cultural/estética implícita. Ej.: «póster para un festival de jazz nocturno» → referencia: minimalismo gráfico de los años 60.
Genera un manifiesto de 4-6 párrafos: nombra el movimiento estético ("Chromatic Silence", "Brutalist Joy"), articula cómo se expresa en el espacio, el color, la escala, la composición y la jerarquía. Enfatiza la artesanía: el resultado debe parecer hecho por alguien del más alto nivel del área, tras incontables horas de trabajo.
La segunda fase usa la filosofía como biblia científica. Crea una composición única: patrones repetidos, formas perfectas, capas superpuestas. Prioridad absoluta a la calidad — composición, espaciado, elección de colores, tipografía — todo transmite un nivel de experiencia excepcional.
Entrega dos archivos: la filosofía en .md y el archivo visual en .pdf o .png. La opción multipágina (.pdf con varias páginas) está disponible cuando el contexto lo requiere; por defecto, es una sola página.
El SKILL.md es explícito: nunca copies el estilo de artistas existentes. El skill crea movimientos estéticos originales. Si el usuario pide "al estilo de Mondrian" o "igual que Saul Bass", canvas-design debe interpretar la esencia filosófica (grid, geometría primaria; contraste tipográfico limpio) y crear algo nuevo — no una reproducción.
💬 Ejemplo práctico + PROMPT listo
Prompts reales para pegar en Claude Code y activar canvas-design.
Escenario A — Imagen OG para un curso en línea
Creaste una landing page para un curso de diseño y necesitas una imagen OG que aparezca cuando se comparta el enlace (1200×630px).
Escenario B — Póster de lanzamiento de producto
Estás lanzando un SaaS de automatización y quieres un póster para redes sociales (formato cuadrado 1080×1080px).
Escenario C — Imagen hero estática para una landing page
- • Especifica las dimensiones y el formato (.png o .pdf)
- • Da contexto emocional o temático (no instrucciones de diseño)
- • Limita el texto que debe aparecer — cuanto menos, mejor para la skill
- • Nunca pidas «copiar el estilo de X»; pide «inspiración en la filosofía de X»
- • Para varias páginas, menciona explícitamente: «quiero 3 páginas con diseños diferentes»
🧬 Combina con / límites
Composiciones potentes con otros skills y cuándo no usar canvas-design.
canvas-design está en el centro de la Trilha 2, entre la identidad de marca (brand-guidelines, módulo 2.2) y el arte generado por código (algorithmic-art, módulo 2.4). Entender los tres juntos revela cuándo usar cada uno:
Define las reglas, la paleta y la voz de la marca. Es el conjunto de restricciones dentro de los cuales canvas-design va a crear. Alimenta la filosofía de diseño con los colores y el tono correctos.
Crea piezas de arte estáticas usando la filosofía. Recibe las restricciones de brand-guidelines y las transforma en imágenes de calidad editorial. Salida: .png y .pdf.
Genera arte mediante código (p5.js, scripts). Mientras canvas-design crea piezas únicas hechas a mano, algorithmic-art crea sistemas y variaciones infinitas. Para fondos de pantalla generativos, patrones procedurales y arte interactivo.
Composiciones con otros skills
Usa theme-factory para generar los tokens de color de la marca (primary, secondary, accent) → pásalos a canvas-design como paleta → garantiza que el póster y la OG image usen exactamente los mismos colores que el sistema de diseño del sitio.
brand-guidelines define el tono de voz y las restricciones visuales → canvas-design recibe ese briefing y crea dentro de las reglas → resultado: coherencia total entre la identidad documental y la expresión visual de las piezas.
canvas-design crea el póster principal de la campaña (pieza única, alto impacto) → algorithmic-art genera las variaciones y patrones procedurales basados en la misma estética (fondos de pantalla, texturas, fondos). Juntos cubren piezas únicas y sistemas visuales.
canvas-design entrega la hero image y la OG image como .png → frontend-design usa esos assets al crear la página HTML. Separación clara de responsabilidades: arte visual ≠ código web.
- ✗ Necesitas animación — cualquier movimiento o transición → usa animation-designer, remotion o seedance.
- ✗ Variaciones en masa — decenas de versiones de una pieza → usa algorithmic-art (los sistemas de código generan variaciones infinitas).
- ✗ Edición de una foto existente — quitar el fondo, retocar, cambiar el tamaño → usa herramientas de edición específicas (no es el ámbito de la skill).
- ✗ Contenido interactivo — formulario, botón, componente de UI → usa frontend-design o web-artifacts-builder.
- ✗ Diagramas técnicos — diagramas de flujo, arquitectura de sistemas → usa beautiful-mermaid o excalidraw.
📋 Resumen del Módulo 2.3
Qué aprendiste
- ✓ canvas-design crea arte visual en .png y .pdf según una filosofía de diseño
- ✓ Proceso en dos fases: manifiesto .md → expresión visual en el canvas
- ✓ Se activa con pedidos de póster, pieza artística, diseño estático, OG image
- ✓ Ideal para imágenes OG, heroes estáticos y material promocional
- ✓ Nunca copia a artistas: crea movimientos estéticos originales
- ✓ Complementa brand-guidelines (alimentación) y algorithmic-art (variaciones)
- ✓ No hace animaciones, variaciones en masa ni UI interactiva
Referencia rápida
Arte generado con código — sistemas visuales procedurales con p5.js, variaciones infinitas y patrones algorítmicos. El complemento perfecto para canvas-design.