Orshot-HQ/orshot-openclaw

Conteúdo para Redes Sociais Orshot: projete o template uma vez, publique a partir dele para sempre

O conteúdo para redes sociais da Orshot é um template projetado mais um texto fresco por postagem, não uma nova imagem de IA a cada vez. Este skill cria templates do estúdio Orshot que parecem profissionalmente projetados, e não o visual genérico de texto centralizado de "IA", para postagens do Instagram, postagens do LinkedIn, TikTok e Reels, stories, anúncios, banners, thumbnails e carrosséis. É a camada de conhecimento sobre as ferramentas de design do servidor MCP Orshot (orshot_create_template_design, orshot_update_template_design, orshot_patch_template_elements, orshot_get_brand_kit).

Conecte-se primeiro

openclaw mcp add orshot --url https://mcp.orshot.com/mcp --transport streamable-http --auth oauth
openclaw mcp login orshot

As ferramentas de design retornam miniaturas inline e verificações de design, portanto são exclusivas do MCP. O plano gratuito (100 créditos por mês, sem cartão) cobre a criação de templates e pré-visualizações. Detalhes e o fallback REST para renderização estão no skill orshot.

Gere um template para uma plataforma

1. Escolha o formato. Passe o preset como size ao criar e renderizar, ou forneça largura e altura.

Plataforma	Preset	Pixels
Post Instagram (retrato, padrão 2026)	instagram-post-portrait	1080x1350
Instagram quadrado	instagram-post	1080x1080
Instagram story, capa Reels, TikTok, YouTube Short	instagram-story, tiktok-video, youtube-short	1080x1920
Post LinkedIn	linkedin-post	1200x627
Carrossel LinkedIn (PDF ou páginas de imagem)	linkedin-carousel	páginas quadradas ou 4:5
Post X, cabeçalho X	twitter-post, twitter-header	1200x675, 1500x500
Post, story, capa Facebook	facebook-post, facebook-story, facebook-cover	1200x630, 1080x1920, 851x315
Pinterest pin	pinterest-pin	1000x1500
Miniatura YouTube	youtube-thumbnail	1280x720

Lista completa: o recurso MCP orshot://formats.

2. Leia a especificação e a marca. orshot://template-design-spec (esquema de elementos, as armadilhas de animação), depois orshot_get_brand_kit quando o design deve estar alinhado à marca.
3. Leia o pacote references/social-media.md para áreas seguras, arquétipos e uma receita. Escolha um arquétipo diferente do último template deste tipo.
4. Crie com orshot_create_template_design, complete pages_data, cada elemento de texto com textMode: "fit" e minFontSize, campos dinâmicos marcados como parameterizable: true com parameterIds em snake_case (headline, subtitle, product_image), includeThumbnails: true.
5. Crítica a miniatura e a verificação de design, corrija com orshot_update_template_design ou orshot_patch_template_elements. Nunca publique a primeira versão sem revisão.
6. Renderize com texto real (orshot_render_template) e mostre ao usuário o resultado. Um design, todos os tamanhos: extraSizes: ["instagram-story", "linkedin-post", "1080x1080"].
7. Entregue. Publicação, agendamento e análises estão no skill orshot-social-media-scheduler; carrosséis de seis slides em orshot-carousel. Mantenha o template; toda postagem futura é uma renderização, não um redesign.

Quando usar

Use sempre que estiver projetando ou refinando um template visual: uma postagem/story/carrossel social, um criativo de anúncio, um banner, uma miniatura, um gráfico de lançamento. Para o esquema de elementos do estúdio e detalhes de renderização, consulte também o recurso MCP orshot://template-design-spec.

Limites

• Isso é orientação de design, NÃO substitui a especificação do esquema. Valores de estilo são sempre strings com unidades; position/dimensions são objetos aninhados. Veja Compatibilidade abaixo.
• Ele compõe com o skill orshot (mecânicas de API/geração): use-o para renderizar.

Princípio de operação

O design serve à tarefa. Decida a ÚNICA coisa que o espectador deve levar embora, depois faça tudo apoiá-la. Respeite a marca e a plataforma acima da beleza genérica. Prefira as regras determinísticas abaixo à iteração subjetiva.

Fluxo de trabalho obrigatório (em ordem)

1. Forma: reformule o objetivo, o público e a única mensagem-chave antes de posicionar qualquer coisa.
2. Herde a marca (quando alinhado à marca): SE o design deve corresponder à marca/produto do usuário (a mensagem sugere isso, ou pede pelo "nosso" estilo), chame orshot_get_brand_kit (filtre por tag conforme o propósito) e mapeie as cores/fontes/logotipo da marca sobre as funções nos Sistemas. Se a mensagem pede por um visual genérico/independente, use os padrões do pacote, não force a marca.
3. Escolha o pacote vertical: leia o arquivo correspondente em references/ (ex. references/social-media.md) para formato, áreas seguras, arquétipos e uma receita concreta. Escolha um ARQUÉTIPO DIFERENTE dos templates recentes deste tipo.
4. Construa: estabeleça um elemento focal, depois apoie-o. Mantenha o design simples na primeira criação; refine em uma atualização posterior.
5. Crítica: crie/atualize com includeThumbnails:true, LEIA a miniatura e corrija problemas com orshot_update_template_design / orshot_patch_template_elements. Nunca publique a primeira versão sem revisão. (A ferramenta de criação também retorna uma "🎨 Verificação de design", resolva seus ⚠.)

Sistemas

• Hierarquia: um ponto focal claro via tamanho, peso e posição. Nem tudo centralizado.
• Tipografia: exatamente 2 famílias de fontes (display + corpo). Hierarquia através de escala/peso. lineHeight apertado (1.0–1.15) e letterSpacing ligeiramente negativo em tipos display grandes. A fonte mais pesada da marca → display, a mais leve → corpo.
• Cor, 60-30-10: 60% dominante, 30% secundária, 10% de destaque. Uma paleta coesa supera mais cores. Contraste WCAG AA claro. Mapeie as cores da marca para funções pelo USO, não pelo rótulo "primário".
• Composição e espaço: margens generosas (≥ ~6% da tela por borda), alinhe a uma grade implícita, prefira descentralizado a empilhamento centralizado.
• Imagens: sem margens ou intencionalmente emolduradas; objectFit:"cover" para fotos; adicione um gradiente de véu sob texto sobre fotos movimentadas.

Marca (contextual, não obrigatória)

Use o kit de marca QUANDO o design deve estar alinhado à marca (a mensagem referencia a marca, produto ou identidade do usuário): cores → funções 60-30-10, fontes → display/corpo, logotipo → uma pequena marca de canto/rodapé, imagens → herói/produto. Para um visual genérico/exploratório/independente, a paleta do pacote é suficiente, não force ativos da marca.

Variedade

Nunca repita um layout para o mesmo tipo de conteúdo. Varie arquétipo, posicionamento focal e ênfase de cor entre designs do mesmo tipo.

Compatibilidade (acerte estes ou a renderização quebra silenciosamente)

• TODOS os valores de estilo são strings com unidades: "48px", "700", "12px": nunca números puros.
• position e dimensions são objetos aninhados ({x,y}, {width,height}).
• Defina textMode:"fit" + minFontSize em CADA elemento de texto (mínimos: headline 48, subtítulo 28, corpo 24, lead 18, legenda 14). O padrão "overflow" não encolhe nem reflui, texto longo/parametrizado transborda de sua caixa.
• Quebras de linha: use \n, NUNCA <br>; evite múltiplos blocos <p> (eles se sobrepõem). Para um título de várias linhas com uma palavra colorida, use um elemento de texto por linha.
• Um <span> de destaque de fundo (pílula colorida) força o elemento inteiro para uma linha (white-space: nowrap) → transbordamento em texto longo. Destaque apenas 1–3 palavras; para títulos longos use ênfase de color (sem fundo) ou divida por linha.
• Campos parametrizáveis precisam de parameterizable:true, um parameterId único em snake_case e um parameterType correspondente ao elemento (texto→"text", imagem→"imageUrl", forma→"fill", tela/container→"backgroundColor").
• Formas com preenchimento transparente + borda não renderizam nada; o content SVG deve ser um data-URI.

Movimento e áudio (templates de vídeo)

Fazendo o vídeo parecer projetado, não gerado:

• Revele em seções ao longo de ~4–5s. Elementos que formam uma unidade (ícone+rótulo, uma linha de especificação, o rodapé) compartilham do MESMO tipo de enter e showAt; espaçe ~0.3–0.5s ENTRE seções na ordem de leitura. showAt/hideAt são irmãos de enter/exit: nunca aninhados dentro deles.
• Cada foto sem margens recebe um ambiente kenBurns (zoom 1.08–1.15). Uma foto parada mantida por 3 segundos parece um quadro morto; um push lento parece filmagem. Alterne a direção de panX entre páginas.
• O ambiente permanece sutil e LENTO: ciclos de 6–10s contra um enter de 0.5s. Se o espectador puder nomear o movimento, ele é forte demais, a menos que seja um destaque deliberado (um emblema que balança). shake/slowRotate precisam de easing: "linear" ou a emenda do loop aparece.
• Uma pageTransition para o vídeo inteiro, 0.3–0.5s. Uma transição diferente por corte é o sinal mais claro de uma edição gerada automaticamente.
• Padrão de som: faixa de narração no volume 1 + um fundo ambiente gerado contido (sfx, volume 0.08–0.18, loop) + page.subtitle { source: "auto-audio" } com um preset de legenda (karaoke/bold) e strokeWidth 2–3 sobre filmagens movimentadas. Orce a narração em ~2 palavras/segundo com 1s de folga. Chame orshot_get_audio_authoring_options antes de criar áudio gerado; forneça tts.parameterId para que o texto falado permaneça um parâmetro de renderização.

Antipadrões (os sinais de "AI-slop", evite)

• Tudo centralizado e empilhado; nenhum ponto focal.
• 3+ fontes, ou tamanhos aleatórios sem hierarquia.
• Texto de baixo contraste sobre uma foto movimentada sem véu.
• Forçar ativos da marca quando a mensagem não pediu um design alinhado à marca (ou ignorar o kit quando claramente pediu).
• Um título minúsculo sobre um parágrafo de texto (um template não é um documento).
• Reemitir o layout anterior para o mesmo tipo de conteúdo.

Pacotes verticais (divulgação progressiva)

Leia o que corresponde à tarefa, cada um adiciona formato/áreas seguras, arquétipos e uma receita:

• references/social-media.md: postagens, stories, carrosséis.
• (mais verticais, anúncios, imobiliário, e-commerce, adicionados aqui com o tempo.)

Exemplos

Exemplo 1, "Crie uma postagem no Instagram anunciando nosso novo recurso"

1. orshot_get_brand_kit (tags: "social-media") → cores/fontes/logotipo da marca.
2. Leia references/social-media.md → padrão 4:5 retrato 1080×1350; escolha o arquétipo type-hero (diferente da última postagem).
3. orshot_create_template_design com a fonte display da marca para um título enorme, cor dominante da marca como fundo, cor de destaque em uma palavra, logotipo + rodapé @handle, includeThumbnails:true.
4. Leia a miniatura + "🎨 Verificação de design"; corrija contraste/espaçamento conforme necessário.

Exemplo 2, "Refine este template, está genérico"

1. orshot_get_studio_template para inspecionar o design atual.
2. Diagnostique contra Antipadrões (centralizado? 3+ fontes? nenhum ponto focal? marca ignorada?).
3. orshot_patch_template_elements para definir um título focal, reduzir para 2 fontes, aplicar 60-30-10 da marca, alinhar à esquerda/inferior. Re-renderize com includeThumbnails:true e verifique.

Solução de problemas

Título aparece em uma linha / <br> ignorado. Use \n, não <br>. Para uma palavra colorida em um título de várias linhas, divida em um elemento de texto por linha.

Cores/fontes parecem fora da marca. Você pulou o passo 2, chame orshot_get_brand_kit e mapeie o value retornado (cores) e name (fontes) no design.

"🎨 Verificação de design" avisa sobre repetição. Este layout corresponde a um template recente do mesmo tipo. Mude o arquétipo e mova o ponto focal.