social-x-post-card
Produz um cartão realista de postagem do X (antigo Twitter). Inclui métricas de engajamento como curtidas e visualizações, sendo útil para vídeos ou imagens compartilháveis.
O que ela faz
Esta ferramenta cria uma imagem de um post do X (antigo Twitter) com curtidas, compartilhamentos e visualizações. É útil para usar em vídeos ou compartilhar como uma imagem.
Quando usar
- ✓Quando você quer transformar uma frase legal em uma imagem para compartilhar.
- ✓Para criar um visual de post de X para usar em um vídeo.
- ✓Para salvar uma ideia importante como uma imagem fácil de ver.
Exemplo do que pedir para a IA
“Crie um post do X com o texto 'Aprender a programar abre muitas portas!' e 10 mil curtidas.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Você me diz o texto que quer no post, o nome de usuário e algumas métricas como curtidas e visualizações. Eu crio uma imagem que parece um post real do X.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill social-x-post-cardOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/social-x-post-card/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
【Modelo: Cartão de Postagem X (Twitter)】 【Intenção】Renderizar o conteúdo de um tweet (ou uma citação marcante de um usuário) em um cartão de postagem X altamente realista, para sobreposição de vídeo, postagem de imagens no Twitter e consolidação de conhecimento. Inspirado em hyperframes x-post.
【Tela】1280×720 ou 1080×1080, fundo escuro #0f1419 ou fundo claro #ffffff (de acordo com o tema X); cartão centralizado, sombra suave.
【Estrutura do Cartão】
- Borda externa: cantos arredondados de 16px, borda de 1px
#2f3336(escura) /#eff3f4(clara), preenchimento interno de 16px. - Linha superior: avatar (48×48 circular, placeholder com gradiente CSS) + nome de usuário + handle
@username+ selo azul de verificado + hora (mono, 12px, cinza). - Corpo do texto: 17-22px, peso da fonte 400; links em azul X
#1d9bf0; hashtags na mesma cor; menções na mesma cor; espaçamento entre parágrafos de 0.6em. - Opcional: cartão de citação (pequeno cartão embutido, fundo cinza, cantos arredondados de 12px).
- Opcional: 1 imagem (gradiente CSS + placeholder de descrição, não pode ser imagem externa), proporção 16:9, cantos arredondados de 12px.
- Linha de interação: 4 ícones + números (responder / retweetar / citar / curtir), ícones em SVG inline (estilo oficial X), cinza, mudam de cor ao passar o mouse.
- Logo X no canto superior direito em SVG de linha única.
- Linha de visualizações: 👁️ + número (fonte pequena).
【Fontes】
- Ocidental:
Chirp(fonte do X) → fallbackInterouSegoe UI. - Chinês:
Noto Sans SC/PingFang SC. - Números: mesma fonte principal, não usar mono.
【Detalhes de Design】
- Paleta de cores clara: bg
#fff, text#0f1419, secondary#536471, border#eff3f4, accent#1d9bf0. - Paleta de cores escura (recomendado, para sobreposição de vídeo): bg
#000, text#e7e9ea, secondary#71767b, border#2f3336, accent#1d9bf0. - Formatação de números: 1.2K / 4.5M (não usar 1234 original).
- O conteúdo deve vir da entrada do usuário, não inventar tweets.
- Se a entrada do usuário for dados → resumir automaticamente em uma "citação marcante" de tweet (≤ 280 caracteres).
- HTML de arquivo único; ícones SVG inline; não usar URLs de imagem externas.
- Opcional: adicionar um sutil brilho radial atrás do cartão
radial-gradient(...)para aumentar a legibilidade na sobreposição de vídeo.
Perguntas frequentes
Posso escolher as cores do post?
Sim, você pode escolher entre um tema claro ou escuro, que imita as cores do X.
A imagem vai ter o logo do X?
Sim, a imagem terá o logo do X e outros detalhes como o nome de usuário e o 'check' de verificado.
Posso adicionar uma foto ao post?
Sim, é possível adicionar uma imagem ao post, mas ela será um espaço reservado, não uma imagem real que você envia.
Detalhes
Descrição original do autor
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #585
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
ios-icon-gen
Faz seu agente gerar ícones para aplicativos iOS. Ele usa símbolos da Apple ou ícones de outras fontes para criar os arquivos corretos.
affaan-m/ECC
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills