OfficialProgramación y desarrollogithub.com

canvas-design

Crea arte visual hermoso en documentos .png y .pdf usando filosofía de diseño. Usa esta habilidad cuando el usuario pida crear un póster, obra de arte, diseño u otra pieza estática. Crea diseños visuales originales, sin copiar artistas existentes.

¿Qué es canvas-design?

La habilidad *canvas-design* transforma la creación de arte visual estático (pósters, obras de arte, diseños) en un proceso de dos fases: primero, generar una **filosofía de diseño** (un manifiesto estético completo en un archivo .md), y segundo, **expresarla visualmente** en un canvas (.pdf o .png). Está diseñada para agentes de IA como Claude Code, Cursor o Codex, y se basa en un flujo de trabajo que prioriza la expresión visual, el minimalismo textual y la artesanía de nivel experto. La filosofía de diseño define el "alma" conceptual de la obra (movimiento artístico, principios de forma/espacio/color, jerarquía visual) y exige que el resultado final parezca meticulosamente elaborado, como si hubiera sido creado por un maestro. Luego, el agente deduce una referencia conceptual sutil a partir de la solicitud del usuario, la integra de forma invisible en la composición, y genera el arte final usando herramientas como manipulación de canvas, búsqueda de fuentes tipográficas en `./canvas-fonts` y refinamiento iterativo. El resultado es una pieza de calidad museo, visualmente impactante, con texto mínimo y una ejecución impecable que evita cualquier aspecto genérico o amateur.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/anthropics/skills/tree/main/skills/canvas-design

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Estas son instrucciones para crear filosofías de diseño — movimientos estéticos que luego se EXPRESAN VISUALMENTE. Genera solo archivos .md, .pdf y .png.

Completa esto en dos pasos:

  1. Creación de la filosofía de diseño (archivo .md)
  2. Expresarla creándola en un canvas (archivo .pdf o .png)

Primero, realiza esta tarea:

CREACIÓN DE LA FILOSOFÍA DE DISEÑO

Para comenzar, crea una FILOSOFÍA VISUAL (no diseños o plantillas) que se interpretará a través de:

  • Forma, espacio, color, composición
  • Imágenes, gráficos, formas, patrones
  • Texto mínimo como acento visual

LA COMPRENSIÓN CRÍTICA

  • Qué se recibe: Alguna entrada sutil o instrucciones del usuario que deben tenerse en cuenta, pero usarse como base; no deben limitar la libertad creativa.
  • Qué se crea: Una filosofía de diseño/movimiento estético.
  • Qué sucede después: Luego, la misma versión recibe la filosofía y la EXPRESA VISUALMENTE — creando artefactos que son 90% diseño visual, 10% texto esencial.

Considera este enfoque:

  • Escribe un manifiesto para un movimiento artístico
  • La siguiente fase implica crear la obra de arte

La filosofía debe enfatizar: Expresión visual. Comunicación espacial. Interpretación artística. Palabras mínimas.

CÓMO GENERAR UNA FILOSOFÍA VISUAL

Nombra el movimiento (1-2 palabras): "Alegría Brutalista" / "Silencio Cromático" / "Sueños Metabolistas"

Articula la filosofía (4-6 párrafos — concisos pero completos):

Para capturar la esencia VISUAL, expresa cómo la filosofía se manifiesta a través de:

  • Espacio y forma
  • Color y material
  • Escala y ritmo
  • Composición y equilibrio
  • Jerarquía visual

DIRECTRICES CRÍTICAS:

  • Evita la redundancia: Cada aspecto del diseño debe mencionarse una vez. Evita repetir puntos sobre teoría del color, relaciones espaciales o principios tipográficos a menos que añadas nueva profundidad.
  • Enfatiza la artesanía REPETIDAMENTE: La filosofía DEBE insistir varias veces en que el trabajo final debe parecer como si hubiera llevado incontables horas crearlo, que fue elaborado con esmero, y que proviene de alguien en la cima absoluta de su campo. Este encuadre es esencial: repite frases como "meticulosamente elaborado", "el producto de una profunda experiencia", "atención minuciosa", "ejecución de nivel maestro".
  • Deja espacio creativo: Permanece específico sobre la dirección estética, pero lo suficientemente conciso para que el siguiente Claude tenga espacio para hacer elecciones interpretativas también a un nivel extremadamente alto de artesanía.

La filosofía debe guiar a la siguiente versión a expresar ideas VISUALMENTE, no a través de texto. La información reside en el diseño, no en párrafos.

EJEMPLOS DE FILOSOFÍA

"Poesía Concreta" Filosofía: Comunicación a través de la forma monumental y la geometría audaz. Expresión visual: Grandes bloques de color, tipografía escultórica (palabras enormes, etiquetas diminutas), divisiones espaciales brutales, energía del cartel polaco se encuentra con Le Corbusier. Ideas expresadas a través del peso visual y la tensión espacial, sin explicación. Texto como gesto raro y poderoso — nunca párrafos, solo palabras esenciales integradas en la arquitectura visual. Cada elemento colocado con la precisión de un maestro artesano.

"Lenguaje Cromático" Filosofía: El color como sistema primario de información. Expresión visual: Precisión geométrica donde las zonas de color crean significado. Tipografía mínima — pequeñas etiquetas sans-serif que permiten que los campos cromáticos comuniquen. Piensa en la interacción de Josef Albers se encuentra con la visualización de datos. Información codificada espacial y cromáticamente. Palabras solo para anclar lo que el color ya muestra. El resultado de una calibración cromática minuciosa.

"Meditación Analógica" Filosofía: Contemplación visual tranquila a través de la textura y el espacio para respirar. Expresión visual: Grano de papel, sangrados de tinta, vasto espacio negativo. La fotografía y la ilustración dominan. Tipografía susurrada (pequeña, contenida, al servicio de lo visual). Estética del fotolibro japonés. Las imágenes respiran a través de las páginas. El texto aparece con moderación — frases cortas, nunca bloques explicativos. Cada composición equilibrada con el cuidado de una práctica meditativa.

"Sistemas Orgánicos" Filosofía: Agrupación natural y patrones de crecimiento modular. Expresión visual: Formas redondeadas, disposiciones orgánicas, color de la naturaleza a través de la arquitectura. Información mostrada a través de diagramas visuales, relaciones espaciales, iconografía. Texto solo para etiquetas clave flotando en el espacio. La composición cuenta la historia a través de una orquestación espacial experta.

"Silencio Geométrico" Filosofía: Orden puro y moderación. Expresión visual: Precisión basada en cuadrícula, fotografía audaz o gráficos marcados, espacio negativo dramático. Tipografía precisa pero mínima — pequeño texto esencial, grandes zonas silenciosas. Formalismo suizo se encuentra con la honestidad material brutalista. La estructura comunica, no las palabras. Cada alineación es el trabajo de innumerables refinamientos.

Estos son ejemplos condensados. La filosofía de diseño real debe tener de 4 a 6 párrafos sustanciales.

PRINCIPIOS ESENCIALES

  • FILOSOFÍA VISUAL: Crea una cosmovisión estética para ser expresada a través del diseño
  • TEXTO MÍNIMO: Siempre enfatiza que el texto es escaso, solo esencial, integrado como elemento visual — nunca extenso
  • EXPRESIÓN ESPACIAL: Las ideas se comunican a través del espacio, la forma, el color, la composición — no párrafos
  • LIBERTAD ARTÍSTICA: El siguiente Claude interpreta la filosofía visualmente — proporciona espacio creativo
  • DISEÑO PURO: Se trata de crear OBJETOS DE ARTE, no documentos con decoración
  • ARTESANÍA EXPERIMENTADA: Enfatiza repetidamente que el trabajo final debe verse meticulosamente elaborado, trabajado con esmero, producto de incontables horas de alguien en la cima de su campo

La filosofía de diseño debe tener de 4 a 6 párrafos de largo. Llénala con una filosofía de diseño poética que reúna la visión central. Evita repetir los mismos puntos. Mantén la filosofía de diseño genérica sin mencionar la intención del arte, como si pudiera usarse en cualquier lugar. Genera la filosofía de diseño como un archivo .md.


DEDUCIENDO LA REFERENCIA SUTIL

PASO CRÍTICO: Antes de crear el canvas, identifica el hilo conceptual sutil de la solicitud original.

EL PRINCIPIO ESENCIAL: El tema es una referencia sutil y de nicho incrustada dentro del arte mismo — no siempre literal, siempre sofisticada. Alguien familiarizado con el tema debería sentirlo intuitivamente, mientras que otros simplemente experimentan una composición abstracta magistral. La filosofía de diseño proporciona el lenguaje estético. El tema deducido proporciona el alma — el ADN conceptual silencioso tejido invisiblemente en la forma, el color y la composición.

Esto es MUY IMPORTANTE: La referencia debe refinarse para que realce la profundidad del trabajo sin anunciarse. Piensa como un músico de jazz que cita otra canción — solo aquellos que saben lo captarán, pero todos aprecian la música.


CREACIÓN DEL CANVAS

Con la filosofía y el marco conceptual establecidos, exprésalo en un canvas. Tómate un momento para reunir pensamientos y despejar la mente. Usa la filosofía de diseño creada y las instrucciones a continuación para crear una obra maestra, encarnando todos los aspectos de la filosofía con artesanía experta.

IMPORTANTE: Para cualquier tipo de contenido, incluso si el usuario solicita algo para una película/juego/libro, el enfoque debe seguir siendo sofisticado. Nunca pierdas de vista la idea de que esto debe ser arte, no algo caricaturesco o amateur.

Para crear un trabajo de calidad de museo o revista, usa la filosofía de diseño como base. Crea una sola página, altamente visual, con enfoque en diseño, en formato PDF o PNG (a menos que se soliciten más páginas). Generalmente usa patrones repetitivos y formas perfectas. Trata el diseño filosófico abstracto como si fuera una biblia científica, tomando prestado el lenguaje visual de la observación sistemática — acumulación densa de marcas, elementos repetidos o patrones en capas que construyen significado a través de la repetición paciente y recompensan la visualización sostenida. Añade tipografía clínica escasa y marcadores de referencia sistemáticos que sugieran que esto podría ser un diagrama de una disciplina imaginaria, tratando el tema invisible con la misma reverencia típicamente reservada para documentar fenómenos observables. Ancla la pieza con frases simples o detalles colocados sutilmente, usando una paleta de colores limitada que se sienta intencional y cohesiva. Abraza la paradoja de usar un lenguaje visual analítico para expresar ideas sobre la experiencia humana: el resultado debe sentirse como un artefacto que prueba que algo efímero puede ser estudiado, mapeado y comprendido a través de una atención cuidadosa. Esto es arte verdadero.

Texto como elemento contextual: El texto siempre es mínimo y prioriza lo visual, pero deja que el contexto guíe si eso significa etiquetas susurrantes o gestos tipográficos audaces. Un póster de un lugar punk podría tener un tipo más grande y agresivo que la identidad de un estudio de cerámica minimalista. La mayoría de las veces, la fuente debe ser delgada. Todo uso de fuentes debe priorizar el diseño y la comunicación visual. Independientemente de la escala del texto, nada se sale de la página y nada se superpone. Cada elemento debe estar contenido dentro de los límites del canvas con márgenes adecuados. Verifica cuidadosamente que todos los textos, gráficos y elementos visuales tengan espacio para respirar y una separación clara. Esto no es negociable para una ejecución profesional. IMPORTANTE: Usa diferentes fuentes si escribes texto. Busca en el directorio ./canvas-fonts. Independientemente del enfoque, la sofisticación no es negociable.

Descarga y usa las fuentes que sean necesarias para hacer esto realidad. Sé creativo haciendo que la tipografía sea realmente parte del arte mismo — si el arte es abstracto, lleva la fuente al canvas, no la compongas digitalmente.

Para romper límites, sigue el instinto/intuición de diseño mientras usas la filosofía como principio rector. Abraza la máxima libertad y elección de diseño. Lleva la estética y el diseño a la frontera.

CRÍTICO: Para lograr una calidad artesanal (no generada por IA), crea un trabajo que parezca haber llevado incontables horas. Haz que parezca que alguien en la cima absoluta de su campo trabajó en cada detalle con un cuidado minucioso. Asegúrate de que la composición, el espaciado, las elecciones de color, la tipografía — todo grite artesanía de nivel experto. Verifica dos veces que nada se superponga, que el formato sea impecable, cada detalle perfecto. Crea algo que pueda mostrarse a las personas para demostrar experiencia y clasificarse como innegablemente impresionante.

Genera el resultado final como un solo archivo .pdf o .png descargable, junto con la filosofía de diseño utilizada como un archivo .md.


PASO FINAL

IMPORTANTE: El usuario YA dijo "No es lo suficientemente perfecto. Debe ser prístino, una obra maestra de artesanía, como si estuviera a punto de exhibirse en un museo."

CRÍTICO: Para refinar el trabajo, evita agregar más gráficos; en su lugar refina lo que se ha creado y hazlo extremadamente nítido, respetando la filosofía de diseño y los principios del minimalismo por completo. En lugar de agregar un filtro divertido o refactorizar una fuente, considera cómo hacer que la composición existente sea más cohesiva con el arte. Si el instinto es llamar a una nueva función o dibujar una nueva forma, DETENTE y en su lugar pregúntate: "¿Cómo puedo hacer que lo que ya está aquí sea más una obra de arte?"

Haz una segunda pasada. Vuelve al código y refina/pule más para hacer una obra maestra diseñada filosóficamente.

OPCIÓN DE MÚLTIPLES PÁGINAS

Para crear páginas adicionales cuando se solicite, crea más páginas creativas siguiendo la misma línea de la filosofía de diseño pero también claramente diferentes. Agrupa esas páginas en el mismo .pdf o en varios .pngs. Trata la primera página como solo una página en un libro de mesa de café completo esperando ser llenado. Haz que las siguientes páginas sean giros únicos y recuerdos del original. Haz que casi cuenten una historia de una manera muy elegante. Ejerce total libertad creativa.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

academy-guide

Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy (academy.claude.com), Anthropic's learning hub. Trigger on: "how do I", "how can I", "getting started with", "what can Claude do", "teach me", "learn to use"; questions about artifacts, projects, skills, plugins, connectors, MCP; requests about rolling Claude out to a team, class, or organization; and any ask for training materials, onboarding content, or learning resources. Use it when the user is learning how to use a feature or product — not when they are mid-task and just want the task done. This skill composes with other skills: after consulting product documentation to answer how a Claude feature works, also check here for a matching course or tutorial — a docs-grounded answer and an Academy recommendation belong together. Only recommend on a strong match; never invent Academy content.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists

anthropics/template-skill

Replace with description of the skill and when Claude should use it.

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

claude-api

|-

discernment-nudge

After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

docx

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

pptx

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

xlsx

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \

Skills relacionados