Habilidades website-to-hyperframes

🎬

website-to-hyperframes

Name: website-to-hyperframes
Author: heygen-com

Baixo Risco ⚙️ Comandos externos🌐 Acesso à rede📁 Acesso ao sistema de arquivos

Crie vídeos profissionais a partir de qualquer site

Converter designs de sites em vídeos envolventes requer etapas técnicas complexas desde a captura até a renderização. Esta skill automatiza todo o pipeline de 7 etapas, produzindo vídeos profissionais com narração, animações e estilo consistente com a marca a partir de uma simples URL.

Suporta: Claude Codex Code(CC)

🥉 73 Bronze

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

A utilizar "website-to-hyperframes". Capture https://stripe.com and make me a 20-second product demo

Resultado esperado:

Um projeto HyperFrames completo com: pasta capture/ (capturas de tela, assets, tokens), DESIGN.md, SCRIPT.md, STORYBOARD.md, compositions/ com HTML animado, narration.wav, transcript.json, e URL de preview do Studio localhost.

A utilizar "website-to-hyperframes". Turn this website into a social ad: https://example.com

Resultado esperado:

Um vídeo de 15 segundos para Instagram Stories (1080x1920) com animações consistentes com a marca, narração opcional de hook e transições suaves entre beats.

Auditoria de Segurança

Baixo Risco

v1 • 4/27/2026

Security evaluation confirms this skill is safe for publication. Static analysis flagged 409 potential issues, but all high-severity findings are false positives. The skill uses legitimate HyperFrames CLI tooling (npx hyperframes capture/lint/validate) for video production workflows. External commands are standard CLI tooling, network access is limited to website capture, and env_access is optional API key configuration. No malicious code execution, credential exfiltration, or data harvesting patterns detected.

Arquivos analisados

1,500

Linhas analisadas

achados

Total de auditorias

Problemas de Baixo Risco (2)

SKILL.md:37-91

External Command Patterns in Documentation

287 references to shell commands (npx hyperframes) flagged by static scanner. These are legitimate CLI tooling invocations documented for the video production workflow, not malicious code execution.

references/step-1-capture.md:19

Optional API Key Environment Access

References to GEMINI_API_KEY in step-1-capture.md:19. This is an optional, user-provided enhancement for AI-powered image descriptions. Not hardcoded secrets.

Fatores de risco

⚙️ Comandos externos (3)

references/step-1-capture.md:5-13 references/step-7-validate.md:7-114 SKILL.md:37-91

🌐 Acesso à rede (1)

references/step-1-capture.md:11

📁 Acesso ao sistema de arquivos (1)

references/step-6-build.md:24-26

Padrões Detectados

False Positive: Weak Cryptographic Algorithm FlagsFalse Positive: Screen Capture Upload FlagsFalse Positive: Ruby/Shell Backtick Execution

Auditado por: claude

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

Segurança

Conformidade com especificações

O Que Você Pode Construir

Vídeos de lançamento de produtos

Capture um site de produto e crie um vídeo de lançamento polido com animações, revelações de logo e destaques de funcionalidades do produto.

Anúncios para mídia social

Transforme qualquer site em anúncios para Instagram ou TikTok com tipografia cinética, cores da marca e narração opcional.

Vídeos de portfólio de sites

Crie apresentações em vídeo de sites de portfólio para uso em apresentações, pitches ou prova social.

Tente Estes Prompts

Captura simples de site

Capture https://example.com and make me a 25-second product launch video

Anúncio social com formato específico

Turn this website into a 15-second social ad for Instagram: https://mysite.com

Demo de produto com narração

Create a 30-second product demo video from https://product.com using the default voiceover voice

Produção completa com timing personalizado

Capture https://landingpage.io and produce a 45-second brand reel with: 3 intro beats, 2 feature highlights, 1 CTA. Use portrait format 1080x1920.

Melhores Práticas

Comece com sites que tenham hierarquia visual clara e seções distintas para melhores resultados de captura
Revise os assets capturados e tokens de design antes de escrever o script para garantir consistência com a marca
Use a etapa de validação (Passo 7) para detectar problemas de layout antes de renderizar para MP4

Evitar

Não pule a etapa de captura e forneça URLs brutas para sub-agentes - sempre capture primeiro
Não inline assets (SVG/dados de imagem) em composições - sempre referencie arquivos capturados por caminho
Não use Google Fonts quando fontes capturadas estão disponíveis - use @font-face com arquivos woff2 locais

Perguntas Frequentes

Quais sites funcionam melhor com esta skill?

Sites de marketing estático, landing pages e páginas de produtos funcionam melhor. Sites com muitas interações JavaScript ou barreiras de login podem ter qualidade de captura limitada.

Preciso de alguma chave de API?

Não são necessárias chaves de API para captura básica e produção de vídeo. Opcionalmente, você pode definir GEMINI_API_KEY para descrições de imagens com IA (~$0,001/imagem).

Quais formatos de vídeo são suportados?

Paisagem (1920x1080), Retrato (1080x1920 para Instagram Stories/TikTok) e Quadrado (1080x1080 para feed do Instagram).

Posso adicionar minha própria narração?

Sim. A skill gera TTS, mas você pode substituir narration.wav pela sua própria gravação de narração. Atualize o transcript.json com seus timestamps em nível de palavra.

Quanto tempo leva para renderizar?

A captura leva 10-30 segundos. Construir composições leva 2-5 minutos dependendo da complexidade. A renderização final do MP4 via Docker leva 1-3 minutos.

Qual é a diferença entre a URL de preview e o arquivo MP4?

A URL do Studio localhost (http://localhost:port) é o preview em tempo real - compartilhe isso primeiro para revisão. O arquivo MP4 é o entregável final - renderize apenas mediante solicitação explícita.