Communitygithub.com

ComposioHQ/canvas-design

Crie belas artes visuais em documentos .png e .pdf usando filosofia de design. Use esta habilidade quando o usuário pedir para criar um pôster, obra de arte, design ou outra peça estática. Crie designs visuais originais, nunca copiando o trabalho de artistas existentes para evitar violações de direitos autorais.

O que é canvas-design?

Esta skill capacita o agente de IA a criar arte visual sofisticada (em formato PNG ou PDF) seguindo um processo de duas etapas: primeiro, a geração de uma filosofia de design original — um manifesto estético que atua como um movimento artístico — e, em segundo lugar, a expressão visual dessa filosofia em uma tela digital. A filosofia de design, escrita em um arquivo .md, enfatiza a comunicação visual através de espaço, cor, composição e forma, com texto mínimo usado apenas como acento visual. A skill exige que o trabalho final pareça meticulosamente artesanal, como se fosse criação de um mestre em sua área, priorizando a qualidade de nível profissional e a execução impecável. Suporta a geração de resultados de página única ou múltiplas páginas, todas contidas em um PDF ou em vários PNGs, e o agente pode baixar e usar fontes de um diretório local para garantir tipografia sofisticada. A skill é útil para designers, artistas ou qualquer pessoa que deseje criar arte visual original baseada em uma estética conceitual profunda, em vez de simples decoração ou layout.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ComposioHQ/awesome-codex-skills/tree/main/canvas-design

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Estas são instruções para criar filosofias de design — movimentos estéticos que são então EXPRESSADOS VISUALMENTE. Gere apenas arquivos .md, arquivos .pdf e arquivos .png.

Complete isso em duas etapas:

  1. Criação da Filosofia de Design (arquivo .md)
  2. Expressão criando-a em uma tela (arquivo .pdf ou arquivo .png)

Primeiro, realize esta tarefa:

CRIAÇÃO DA FILOSOFIA DE DESIGN

Para começar, crie uma FILOSOFIA VISUAL (não layouts ou modelos) que será interpretada através de:

  • Forma, espaço, cor, composição
  • Imagens, gráficos, formas, padrões
  • Texto mínimo como acento visual

O ENTENDIMENTO CRÍTICO

  • O que é recebido: Alguma entrada sutil ou instruções do usuário que devem ser levadas em consideração, mas usadas como base; não devem restringir a liberdade criativa.
  • O que é criado: Uma filosofia de design/movimento estético.
  • O que acontece depois: Então, a mesma versão recebe a filosofia e a EXPRESSA VISUALMENTE — criando artefatos que são 90% design visual, 10% texto essencial.

Considere esta abordagem:

  • Escreva um manifesto para um movimento artístico
  • A próxima fase envolve fazer a obra de arte

A filosofia deve enfatizar: Expressão visual. Comunicação espacial. Interpretação artística. Mínimo de palavras.

COMO GERAR UMA FILOSOFIA VISUAL

Nomeie o movimento (1-2 palavras): "Alegria Brutalista" / "Silêncio Cromático" / "Sonhos Metabolistas"

Articule a filosofia (4-6 parágrafos — concisos, mas completos):

Para capturar a essência VISUAL, expresse como a filosofia se manifesta através de:

  • Espaço e forma
  • Cor e material
  • Escala e ritmo
  • Composição e equilíbrio
  • Hierarquia visual

DIRETRIZES CRÍTICAS:

  • Evite redundância: Cada aspecto do design deve ser mencionado uma vez. Evite repetir pontos sobre teoria das cores, relações espaciais ou princípios tipográficos, a menos que adicionem nova profundidade.
  • Enfatize o ARTESANATO REPETIDAMENTE: A filosofia DEVE enfatizar várias vezes que o trabalho final deve parecer como se tivesse levado inúmeras horas para ser criado, foi trabalhado com cuidado e vem de alguém no auge de sua área. Esse enquadramento é essencial — repita frases como "meticulosamente elaborado", "produto de profunda especialização", "atenção meticulosa", "execução de nível mestre".
  • Deixe espaço criativo: Permaneça específico sobre a direção estética, mas conciso o suficiente para que o próximo Claude tenha espaço para fazer escolhas interpretativas também em um nível extremamente alto de artesanato.

A filosofia deve guiar a próxima versão a expressar ideias VISUALMENTE, não através de texto. A informação vive no design, não em parágrafos.

EXEMPLOS DE FILOSOFIA

"Poesia Concreta" Filosofia: Comunicação através da forma monumental e da geometria ousada. Expressão visual: Blocos de cor massivos, tipografia escultórica (palavras únicas enormes, rótulos minúsculos), divisões espaciais brutalistas, energia de pôster polonês encontra Le Corbusier. Ideias expressas através de peso visual e tensão espacial, não de explicação. Texto como gesto raro e poderoso — nunca parágrafos, apenas palavras essenciais integradas à arquitetura visual. Cada elemento colocado com a precisão de um mestre artesão.

"Linguagem Cromática" Filosofia: Cor como o sistema primário de informação. Expressão visual: Precisão geométrica onde zonas de cor criam significado. Tipografia mínima — pequenos rótulos sem serifa permitindo que campos cromáticos se comuniquem. Pense na interação de Josef Albers encontra visualização de dados. Informação codificada espacial e cromaticamente. Palavras apenas para ancorar o que a cor já mostra. O resultado de uma calibração cromática meticulosa.

"Meditação Analógica" Filosofia: Contemplação visual silenciosa através da textura e espaço para respirar. Expressão visual: Granulado de papel, sangria de tinta, vasto espaço negativo. Fotografia e ilustração dominam. Tipografia sussurrada (pequena, contida, servindo ao visual). Estética de fotolivro japonês. Imagens respiram através das páginas. Texto aparece com moderação — frases curtas, nunca blocos explicativos. Cada composição equilibrada com o cuidado de uma prática de meditação.

"Sistemas Orgânicos" Filosofia: Agrupamento natural e padrões de crescimento modular. Expressão visual: Formas arredondadas, arranjos orgânicos, cor da natureza através da arquitetura. Informação mostrada através de diagramas visuais, relações espaciais, iconografia. Texto apenas para rótulos-chave flutuando no espaço. A composição conta a história através de orquestração espacial especializada.

"Silêncio Geométrico" Filosofia: Ordem pura e contenção. Expressão visual: Precisão baseada em grade, fotografia ousada ou gráficos marcantes, espaço negativo dramático. Tipografia precisa, mas mínima — texto essencial pequeno, grandes zonas silenciosas. Formalismo suíço encontra honestidade material brutalista. A estrutura comunica, não as palavras. Cada alinhamento é o trabalho de inúmeros refinamentos.

Estes são exemplos condensados. A filosofia de design real deve ter de 4 a 6 parágrafos substanciais.

PRINCÍPIOS ESSENCIAIS

  • FILOSOFIA VISUAL: Crie uma visão de mundo estética a ser expressa através do design
  • TEXTO MÍNIMO: Sempre enfatize que o texto é escasso, apenas essencial, integrado como elemento visual — nunca extenso
  • EXPRESSÃO ESPACIAL: As ideias se comunicam através do espaço, forma, cor, composição — não de parágrafos
  • LIBERDADE ARTÍSTICA: O próximo Claude interpreta a filosofia visualmente — forneça espaço criativo
  • DESIGN PURO: Trata-se de criar OBJETOS DE ARTE, não documentos com decoração
  • ARTESANATO ESPECIALIZADO: Enfatize repetidamente que o trabalho final deve parecer meticulosamente elaborado, trabalhado com cuidado, produto de inúmeras horas de alguém no auge de sua área

A filosofia de design deve ter de 4 a 6 parágrafos de comprimento. Preencha-a com filosofia de design poética que reúna a visão central. Evite repetir os mesmos pontos. Mantenha a filosofia de design genérica, sem mencionar a intenção da arte, como se pudesse ser usada em qualquer lugar. Gere a filosofia de design como um arquivo .md.


DEDUZINDO A REFERÊNCIA SUTIL

ETAPA CRÍTICA: Antes de criar a tela, identifique o fio conceitual sutil do pedido original.

O PRINCÍPIO ESSENCIAL: O tópico é uma referência sutil e de nicho incorporada na própria arte — nem sempre literal, sempre sofisticada. Alguém familiarizado com o assunto deve senti-la intuitivamente, enquanto outros simplesmente experimentam uma composição abstrata magistral. A filosofia de design fornece a linguagem estética. O tópico deduzido fornece a alma — o DNA conceitual silencioso tecido invisivelmente na forma, cor e composição.

Isso é MUITO IMPORTANTE: A referência deve ser refinada para que aumente a profundidade do trabalho sem se anunciar. Pense como um músico de jazz citando outra música — apenas quem conhece perceberá, mas todos apreciam a música.


CRIAÇÃO DA TELA

Com a filosofia e a estrutura conceitual estabelecidas, expresse-as em uma tela. Reserve um momento para reunir pensamentos e clarear a mente. Use a filosofia de design criada e as instruções abaixo para criar uma obra-prima, incorporando todos os aspectos da filosofia com artesanato especializado.

IMPORTANTE: Para qualquer tipo de conteúdo, mesmo que o usuário solicite algo para um filme/jogo/livro, a abordagem ainda deve ser sofisticada. Nunca perca de vista a ideia de que isso deve ser arte, não algo cartoon ou amador.

Para criar um trabalho de qualidade de museu ou revista, use a filosofia de design como base. Crie uma única página, altamente visual, em PDF ou PNG com design inovador (a menos que mais páginas sejam solicitadas). Geralmente, use padrões repetitivos e formas perfeitas. Trate o design filosófico abstrato como se fosse uma bíblia científica, emprestando a linguagem visual da observação sistemática — acúmulo denso de marcas, elementos repetidos ou padrões em camadas que constroem significado através da repetição paciente e recompensam a visualização sustentada. Adicione tipografia clínica e esparsa e marcadores de referência sistemáticos que sugiram que este poderia ser um diagrama de uma disciplina imaginária, tratando o assunto invisível com a mesma reverência normalmente reservada para documentar fenômenos observáveis. Ancora a peça com frase(s) simples ou detalhes posicionados sutilmente, usando uma paleta de cores limitada que pareça intencional e coesa. Abrace o paradoxo de usar linguagem visual analítica para expressar ideias sobre a experiência humana: o resultado deve parecer um artefato que prova que algo efêmero pode ser estudado, mapeado e compreendido através de atenção cuidadosa. Isso é arte verdadeira.

Texto como elemento contextual: O texto é sempre mínimo e visual em primeiro lugar, mas deixe o contexto guiar se isso significa rótulos em sussurro silencioso ou gestos tipográficos ousados. Um pôster de um local de punk pode ter tipos maiores e mais agressivos do que a identidade de um estúdio de cerâmica minimalista. Na maioria das vezes, a fonte deve ser fina. Todo uso de fontes deve ser inovador no design e priorizar a comunicação visual. Independentemente da escala do texto, nada cai para fora da página e nada se sobrepõe. Cada elemento deve estar contido dentro dos limites da tela com margens adequadas. Verifique cuidadosamente se todos os textos, gráficos e elementos visuais têm espaço para respirar e separação clara. Isso é inegociável para uma execução profissional. IMPORTANTE: Use fontes diferentes ao escrever texto. Pesquise o diretório ./canvas-fonts. Independentemente da abordagem, a sofisticação é inegociável.

Baixe e use as fontes necessárias para tornar isso realidade. Seja criativo fazendo com que a tipografia seja realmente parte da arte — se a arte for abstrata, traga a fonte para a tela, não a digite digitalmente.

Para ultrapassar limites, siga o instinto/intuição do design, usando a filosofia como princípio orientador. Abrace a liberdade e escolha máximas de design. Leve a estética e o design até a fronteira.

CRÍTICO: Para alcançar qualidade artesanal humana (não gerada por IA), crie um trabalho que pareça ter levado inúmeras horas. Faça com que pareça que alguém no auge de sua área trabalhou em cada detalhe com cuidado meticuloso. Garanta que a composição, espaçamento, escolhas de cor, tipografia — tudo grite artesanato de nível especializado. Verifique novamente se nada se sobrepõe, a formatação está impecável, cada detalhe perfeito. Crie algo que possa ser mostrado às pessoas para provar expertise e ser classificado como inegavelmente impressionante.

Gere o resultado final como um único arquivo .pdf ou .png para download, juntamente com a filosofia de design usada como um arquivo .md.


ETAPA FINAL

IMPORTANTE: O usuário JÁ disse "Não está perfeito o suficiente. Deve ser imaculado, uma obra-prima do artesanato, como se estivesse prestes a ser exibido em um museu."

CRÍTICO: Para refinar o trabalho, evite adicionar mais gráficos; em vez disso, refine o que foi criado e torne-o extremamente nítido, respeitando a filosofia de design e os princípios do minimalismo inteiramente. Em vez de adicionar um filtro divertido ou refatorar uma fonte, considere como tornar a composição existente mais coesa com a arte. Se o instinto for chamar uma nova função ou desenhar uma nova forma, PARE e em vez disso pergunte: "Como posso tornar o que já está aqui mais uma obra de arte?"

Faça uma segunda passagem. Volte ao código e refine/polir ainda mais para tornar isso uma obra-prima filosoficamente projetada.

OPÇÃO DE MÚLTIPLAS PÁGINAS

Para criar páginas adicionais quando solicitado, crie páginas mais criativas na mesma linha da filosofia de design, mas também distintamente diferentes. Agrupe essas páginas no mesmo .pdf ou em vários .pngs. Trate a primeira página como apenas uma única página em um livro de mesa inteiro esperando para ser preenchido. Faça as próximas páginas reviravoltas e memórias únicas do original. Faça com que elas contem quase uma história de uma forma muito elegante. Exercite completa liberdade criativa.

Individual skills in this repo

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

ComposioHQ/-21risk-automation

Automate 21risk tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/-2chat-automation

Automate 2chat tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/ably-automation

Automate Ably tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/abstract-automation

Automate Abstract tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/abuselpdb-automation

Automate Abuselpdb tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/abyssale-automation

Automate Abyssale tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/accelo-automation

Automate Accelo tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/accredible-certificates-automation

Automate Accredible Certificates tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/acculynx-automation

Automate Acculynx tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/active-campaign-automation

Automate ActiveCampaign tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/addresszen-automation

Automate Addresszen tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/adobe-automation

Automate Adobe tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/adrapid-automation

Automate Adrapid tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/adyntel-automation

Automate Adyntel tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/aeroleads-automation

Automate Aeroleads tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/aero-workflow-automation

Automate Aero Workflow tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/affinda-automation

Automate Affinda tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/affinity-automation

Automate Affinity tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/agencyzoom-automation

Automate Agencyzoom tasks via Rube MCP (Composio). Always search tools first for current schemas.

ComposioHQ/agent-deep-links

Build, validate, and troubleshoot deep links for Codex, Cursor, VS Code, Visual Studio, and similar tools. Use when users ask for clickable links (especially in Slack) that open threads, files, folders, or app settings.

Habilidades Relacionadas