Mapa de la ruta
Contenido detallado
🎨 theme-factory
Toolkit para aplicar uno de los 10 presets de color y fuente a cualquier artifact — slides, docs, landing pages HTML — o generar un tema completamente nuevo al instante a partir de una descripción.
Theme-factory es una skill que mantiene 10 temas visuales predefinidos (cada uno con una paleta de colores y un par de fuentes) listos para aplicar a cualquier artifact de presentación o interfaz HTML.
En lugar de elegir colores y fuentes desde cero para cada nueva diapositiva o página, eliges un tema y Claude aplica todo de forma coherente y profesional.
Presets, paleta de colores, par tipográfico, consistencia visual.
La skill se activa cuando se pide aplicar un tema, cambiar el aspecto de un deck o se menciona «theme-factory», «tema», «palette», «colores y fuentes» en el contexto de un artifact.
Conocer los disparadores ayuda a formular solicitudes que activan el skill adecuado en el momento oportuno, sin tener que invocarlo manualmente.
Description como disparador, frases clave, invocación automática.
Cada uno de los 10 presets vive en un archivo dedicado de la carpeta themes/ y define colores con códigos hex exactos, fuentes para títulos y texto, y una identidad visual diferenciada para distintos contextos (corporativo, creativo, minimalista, etc.).
Elegir el tema adecuado antes de generar el artifact ahorra trabajo repetido: cada preset está pensado para un tipo de audiencia o contexto.
Presets con nombre, carpeta themes/, identidad según el contexto.
Además de los presets, es posible describir la identidad deseada en lenguaje natural («quiero algo sombrío con tonos morados y tipografía serif») y la skill genera un tema coherente desde cero.
Permite crear identidades visuales únicas sin necesidad de saber elegir fuentes ni crear paletas a mano.
Generación de temas, lenguaje natural y paletas a pedido.
Claude lee el archivo del tema elegido, extrae los colores y las fuentes especificadas, y los reemplaza de forma consistente en todos los puntos de color y tipografía del artifact, manteniendo el contraste y la legibilidad.
Entender el proceso ayuda a crear artifacts que aprovechen el tema (usar variables CSS o clases con nombre, no valores hardcoded dispersos).
Reemplazo coherente, contraste, legibilidad.
theme-factory es una capa de estilo que se aplica sobre cualquier artifact generado por otra skill — frontend-design, web-artifacts-builder, canvas-design — y deja el resultado final visualmente unificado.
Saber que es un "paso final de estilo" te ayuda a planificar el flujo: primero genera el contenido y luego aplica el tema.
Capa de estilo, composición, paso final.
🏷️ brand-guidelines
Aplica los colores y la tipografía oficiales de la marca Anthropic (apariencia corporativa) a cualquier artifact que se beneficie de un patrón visual de marca — documentos técnicos, interfaces, presentaciones institucionales.
Una skill que incorpora el manual de identidad visual de Anthropic: paleta de colores oficial, tipografía corporativa (Poppins para UI, Lora para lectura extensa) y reglas para aplicar acentos y formas.
Permite generar cualquier artifact con el estilo visual de la marca sin consultar el manual cada vez ni equivocarse con los colores exactos.
Manual de marca, paleta oficial, tipografía corporativa.
La skill se activa cuando se pide aplicar «brand guidelines», «identidad Anthropic», «look-and-feel de la marca» o cuando el contexto incluye documentos oficiales, presentaciones corporativas o artifacts institucionales.
Distinguir cuándo usar brand-guidelines (marca específica) y theme-factory (tema genérico) evita aplicar la apariencia equivocada en el contexto incorrecto.
Contexto institucional, disparadores de marca, nivel de detalle.
La paleta incluye tonos neutros oscuros para los fondos, coral/terracota como acento primario y blancos para los textos. Tipografía: Poppins (títulos e interfaz) y Lora (texto extenso) — se cargan desde Google Fonts cuando es necesario.
Conocer el sistema permite crear artifacts que parecen genuinamente Anthropic, no solo «parecidos».
Poppins, Lora, paleta de Anthropic, acento de color.
La skill aplica automáticamente la fuente correcta según el tipo de elemento: Poppins en encabezados, botones y etiquetas de interfaz; Lora en párrafos de lectura extensa. No es una sustitución ciega: se adapta inteligentemente al contexto de cada etiqueta.
Mezclar fuentes manualmente es donde falla la mayoría de los diseños de aficionados. La skill lo hace bien de forma predeterminada.
Jerarquía tipográfica, fuente de interfaz frente a fuente de lectura, aplicación contextual.
Además de colores y fuentes, la skill orienta el uso de formas geométricas y acentos visuales que componen el estilo Anthropic: bordes sutiles, fondos con degradado suave e íconos alineados con el sistema.
Los detalles son los que elevan un artifact de "bien formateado" a "genuinamente acorde con la marca".
Formas, acentos, gradientes sutiles, completitud visual.
brand-guidelines aplica una identidad específica y fija (la de Anthropic). theme-factory aplica cualquiera de 10 temas neutros o uno generado bajo demanda. Usa brand-guidelines para el contexto institucional; theme-factory para la libertad creativa.
Confundir las dos da como resultado un artifact «genérico» cuando se quería uno «corporativo», o viceversa.
Identidad específica vs. genérica, contexto de uso, elección consciente.
🖼️ canvas-design
Crea arte visual estático —pósteres, piezas gráficas, banners— con una filosofía de diseño propia. El resultado final es una imagen exportable (.png, .pdf), generada a partir de un concepto visual elaborado por Claude.
Una skill que crea piezas de arte visual originales —pósteres, thumbnails, banners y piezas de campaña— con una metodología de "filosofía de diseño" que va del concepto a la ejecución HTML/CSS renderizable.
A diferencia de generar una imagen a partir de un prompt de texto, canvas-design produce HTML/CSS que se puede ajustar, exportar y reproducir con calidad uniforme.
Arte estático, filosofía visual, HTML/CSS exportable.
La skill se activa cuando el usuario pide «crea un póster», «haz una pieza gráfica», «diseño para un banner» o menciona canvas-design. También se activa con pedidos de «arte visual» con dimensiones fijas.
Saber cuáles son los desencadenantes evita activar la skill en casos en los que bastaría con editar una plantilla existente: es mejor para crear algo original.
Creación original, solicitudes de arte, dimensiones fijas.
Antes de escribir una línea de CSS, la skill genera una "filosofía de diseño": la esencia visual de lo que se creará, la referencia implícita que dedujo de la solicitud, el sistema de colores y la tipografía elegidos. Es el cerebro antes que las manos.
Esta etapa de conceptualización es lo que diferencia el arte con intención de un diseño aleatorio, y puede refinarse antes de ejecutar.
Filosofía visual, referencia implícita, concepto antes que código.
El canvas se genera como HTML/CSS con dimensiones exactas en píxeles. La skill usa elementos con posicionamiento absoluto, capas de color y tipografía precisa para componer la pieza. Para exportarlo a .png o .pdf, el artifact HTML se convierte mediante el navegador.
Entender el formato HTML/CSS permite editar manualmente cualquier elemento antes de exportarlo: control total.
Posicionamiento absoluto, capas, exportación mediante el browser.
La skill admite la creación de varias piezas conectadas por la misma filosofía visual —por ejemplo, un póster principal + versión para stories + banner horizontal— manteniendo una identidad coherente en todos los formatos.
Las campañas visuales necesitan múltiples formatos. La skill lo hace sin recrear el concepto desde cero para cada pieza.
Varios formatos, identidad coherente, reutilización de la filosofía.
canvas-design crea piezas estáticas y únicas con una intención compositiva consciente. algorithmic-art crea arte generativo en bucle, ideal para fondos y animaciones, pero sin el mismo control de composición estática.
Las dos skills se complementan: canvas-design para el póster, algorithmic-art para el fondo animado detrás de él.
Estático vs. generativo, composición vs. sistema, complementariedad.
🌀 algorithmic-art
Arte algorítmico y generativo con p5.js — campos de flujo, sistemas de partículas, aleatoriedad con seed. Ideal para heroes de página, fondos interactivos y arte reproducible que se comporta de forma diferente con cada seed.
Una skill que crea arte visual con algoritmos y p5.js: el resultado no es una imagen fija, sino un sistema que genera distintos elementos visuales en cada ejecución (o de forma reproducible con la misma seed). Incluye flow fields, partículas, noise y geometría generativa.
El arte generativo produce variaciones infinitas de una misma idea visual: perfecto para fondos, heroes y piezas en las que lo estático parecería rígido.
p5.js, sistema generativo, variaciones infinitas.
La skill se activa cuando el usuario menciona "arte generativo", "p5.js", "flow field", "fondo animado", "fondo de página", "partículas", "noise field" o cuando pide algo "que genere variaciones". También responde a "algorithmic art" cuando se menciona explícitamente.
Pedidos vagos como «fondo bonito» no activan la skill: especificar el tipo de visual garantiza que la herramienta correcta entre en acción.
Disparadores precisos, arte generativo, p5.js mencionado.
Todo algoritmo usa randomSeed(seed) e noiseSeed(seed) para que el resultado sea reproducible: con el mismo número de seed, el aspecto generado es idéntico. Inspirado en el estándar de NFT generativos de Art Blocks.
La reproducibilidad permite iterar: si encuentras una variación atractiva, anota el seed y siempre volverá a aparecer. Sin seed, sería imposible recuperar la obra.
randomSeed, noiseSeed, estándar de Art Blocks, reproducibilidad.
El artifact generado incluye una barra lateral con controles interactivos: sliders para parámetros numéricos (cantidad, escala, velocidad), selectores de color opcionales, navegación Prev/Next/Random para seeds y botones Regenerate, Reset y Download PNG.
Los controles transforman el arte de "generado una vez" en algo que se puede "explorar de forma interactiva": el usuario puede encontrar la variación perfecta sin volver a abrir Claude.
Sliders, navegación de seed, Download PNG, artefacto autosuficiente.
Al igual que canvas-design usa una «filosofía de diseño», algorithmic-art define una «filosofía algorítmica» antes de codificar: ¿cuál es la esencia del sistema? ¿Orgánico? ¿Matemático? ¿Caos controlado? El algoritmo fluye de la filosofía, no de un menú de patrones.
Sin una filosofía clara, el resultado es ruido aleatorio sin personalidad. La filosofía es lo que le da carácter al arte.
Filosofía algorítmica, carácter visual, sistema con intención.
algorithmic-art es ideal como fondo de la sección hero de una landing page, fondo de una diapositiva animada o arte destacado en un portafolio. El canvas en p5.js puede incrustarse como elemento HTML y controlarse con CSS para que quede detrás del contenido.
Saber dónde integrar el arte generativo en una página real es el paso de la creación a la aplicación, y es ahí donde el usuario final percibe el valor visual.
Fondo del hero, canvas integrado, z-index, aplicación en una página real.