video-template-frame-swiss-grid
Faz seu agente gerar um vídeo com um layout de grade organizado. É ideal para apresentar informações de forma estruturada e limpa.
O que ela faz
Este modelo cria um vídeo curto com um layout de grade organizado, ideal para apresentações ou relatórios visuais. Ele usa código para montar o vídeo com animações pré-definidas.
Quando usar
- ✓Criar um slide de abertura para uma apresentação corporativa.
- ✓Fazer um cartão de relatório visual e minimalista.
- ✓Produzir um título focado em tipografia para um vídeo.
Exemplo do que pedir para a IA
“Crie um vídeo de apresentação com layout de grade suíça para o relatório trimestral.”
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
O modelo pega seu texto e o insere em um design de grade pré-feito. Ele então anima esses elementos para criar um vídeo curto e profissional.
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 video-template-frame-swiss-gridOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-swiss-grid/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.
Grade Suíça
Layout de grade estruturado
O que este template é
Uma composição de movimento HTML + CSS + GSAP pronta para HyperFrames, empacotada sob source/. Ela renderiza deterministicamente para MP4 / WEBM em 16:9, padrão de 10s, 30fps.
Melhor para: Slide corporativo · Cartão de relatório minimalista · Título focado em tipografia
Fluxo de trabalho
- Leia
source/index.htmlpara entender as camadas nomeadas e a linha do tempo da animação. - Substitua o texto de exemplo (títulos, números, rótulos) pelo conteúdo real do usuário; mantenha o tempo do movimento e a assinatura visual intactos.
- Mantenha a composição autocontida sob
source/; não introduza ativos de rede externos que possam quebrar uma renderização sem cabeça. - Renderize para MP4 através do renderizador html-video / HyperFrames.
Atribuição
Fonte: html-video templates/frame-swiss-grid (licença Apache-2.0). Derivado de heygen-com / Hyperframes — https://github.com/heygen-com/hyperframes/tree/main/registry/examples/swiss-grid.
Perguntas frequentes
O que é uma 'grade suíça'?
É um estilo de design que usa um layout de grade organizado e limpo para apresentar informações de forma clara.
Posso mudar as cores e fontes?
Este modelo é feito para manter o visual original. As instruções focam em substituir o texto, não em alterar o design.
Que tipo de vídeo ele cria?
Ele cria vídeos curtos em formato MP4 ou WEBM, com animações de movimento, usando um layout de grade.
Detalhes
Descrição original do autor
Use this plugin when the user wants a "Swiss Grid" HyperFrames motion video — Structured grid layout
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #633
- 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
blender-motion-state-inspection
Permite inspecionar detalhes de animações em 3D. É útil para verificar poses, movimentos e o alinhamento de personagens em animações.
affaan-m/ECC
manim-video
Faz seu agente criar vídeos explicativos animados. Ele usa o Manim para gerar gráficos e diagramas claros para conceitos técnicos.
affaan-m/ECC
remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
affaan-m/ECC