Communitygithub.com

1999AZZAR/designer-mcp

Motor programático de video y motion graphics que utiliza Hyperframes (v0.8.77) y Brag. Renderiza video a partir de composiciones HTML/CSS/JS con líneas de tiempo seekable, captura de fotogramas con Chromium headless y compilación con FFmpeg. Ideal para lanzamientos de productos (/brag), promociones SaaS, videos explicativos técnicos, demos para relaciones públicas, animaciones UI cinéticas, videos musicales sincronizados con el ritmo, presentaciones tipo pitch deck, ports de Remotion, subtítulos y compilación de composiciones a MP4.

¿Qué es designer-mcp?

Esta skill convierte al agente de IA en un potente motor de video programático, permitiendo crear videos de alta calidad directamente desde código HTML, CSS y JavaScript. Utiliza el framework Hyperframes (v0.8.77) para gestionar composiciones con líneas de tiempo seekable y sincronización precisa. El proceso implica definir la línea de tiempo de la composición usando atributos `data-*` en el DOM, y el agente se encarga de la captura de fotogramas con Chromium headless y la compilación final a MP4 con FFmpeg. Soporta múltiples flujos de trabajo especializados, como videos para lanzamientos de productos, explicadores técnicos, animaciones cinéticas, presentaciones de diapositivas, ports de proyectos de Remotion y subtítulos. Su utilidad radica en la automatización completa del pipeline de producción de video, desde la ingesta de la idea o el código hasta la entrega del archivo final, eliminando la necesidad de herramientas de edición tradicionales y permitiendo una iteración rápida y control de versiones.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/1999AZZAR/designer-mcp/tree/HEAD/skills/video
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Motor de Video (Hyperframes v0.8.77 y Brag)

HyperFrames renderiza video a partir de HTML: una composición es un documento HTML cuyo DOM declara la temporización con atributos data-* (data-start, data-duration), cuyo runtime de animación es seekable, y cuya reproducción de medios es gestionada por el framework.

1. Detección del Estado del Proyecto

Antes de actuar, evalúa el estado del proyecto en orden:

EstadoAcción
Port de Remotion a HyperFramesLee workflows/remotion-to-hyperframes/SKILL.md y ejecútalo directamente. Omite la capa de intención.
Inspeccionar, Diagnosticar, Previsualizar o RenderizarEjecuta el comando CLI correspondiente (npx hyperframes check, preview, render). No vuelvas a ejecutar la ingesta.
Editar Proyecto ExistenteEjecuta npx hyperframes timeline [--json] para inspeccionar pistas, clips y temporización; realiza la edición específica.
Existe BRIEF.mdLee el workflow y flow del brief; ejecuta ese flujo de trabajo inmediatamente.
Existe hyperframes.json o STORYBOARD.mdReanuda desde los archivos del proyecto existente y las preferencias registradas.
Solicitud de Creación NuevaEjecuta la ingesta de intención y enrútala usando la Matriz de Enrutamiento a continuación.

Gestión de Versiones de CLI

Al reanudar un proyecto existente con dependencias fijadas en package.json:

npx hyperframes@latest upgrade --project . --check

Si hay una actualización disponible y verificada, aplícala con npx hyperframes@latest upgrade --project . y ejecuta npx hyperframes check.

2. Matriz de Enrutamiento de Intenciones

Enruta las solicitudes de creación nuevas al primer flujo de trabajo coincidente:

PrioridadTipo de SolicitudFlujo de Trabajo Objetivo
1Port explícito de código Remotionworkflows/remotion-to-hyperframes
2Presentación, pitch deck o presentación de diapositivas interactivaworkflows/slideshow
3Subtítulos o superposiciones de texto simples sincronizados con el tiempo en metrajeworkflows/embedded-captions
4Superposiciones gráficas en videos de personas hablando, entrevistas o podcastsworkflows/talking-head-recut
5Movimiento sincronizado con el ritmo impulsado por una pista musical (sin voz)workflows/music-to-video
6Visual cinético corto y centrado en el movimiento (<10s)workflows/motion-graphics
7Explicador de pull request de GitHub o cambio de códigoworkflows/pr-to-video
8Lanzamiento de producto, showcase de sitio web, promoción SaaS, /bragworkflows/product-launch-video (o Modo 1)
9Tema conceptual o explicador de documentaciónworkflows/faceless-explainer
10Cualquier otro video personalizado o composición multipistaworkflows/general-video

3. Modos Operativos

Modo 1: Lanzamiento de Producto y Showcase (/brag y product-launch-video)

Se usa para lanzamientos de sitios web, showcases de productos, promociones SaaS y /brag.

  1. Ingesta e Inspección:
    • Analiza opciones: --tone (default, polished, yc-parody, chaotic, cinematic, deadpan, app-store en references/brag/tones.md), --format (16:9, 9:16, 1:1), --duration (15–25s).
    • Si se proporciona una URL, captura los activos del sitio en vivo: 
      npx hyperframes capture "<URL>" -o ./capture --json
  2. Sistema de Diseño y Preajustes:
    • Elige un preajuste de diseño de references/creative/frame-presets/ (capsule, cobalt-grid, daisy-days, etc.) y remezcla los tokens de marca: 
      node workflows/product-launch-video/scripts/build-frame.mjs --preset <nombre-preajuste> --hyperframes .
  3. Storyboard y Mezcla de Audio:
    • Escribe STORYBOARD.md y SCRIPT.md.
    • Audio: Selecciona una pista musical de assets/music/ o usa /media-use para resolver pistas y locución TTS (references/audio/).
    • Ejecuta el análisis de señales rítmicas: python3 scripts/analyze_music_cues.py --audio <ruta> --output audio_cues.json.
  4. Validación y Salida:
    • Verifica el diseño y la temporización: npx hyperframes check.
    • Compila el video final: npx hyperframes render --output brag.mp4.
    • Guarda el fotograma de póster 0 en brag.jpg y la copia de lanzamiento en share-copy.txt.

Modo 2: Explicadores Narrativos y Técnicos (faceless-explainer, pr-to-video)

Se usa para convertir diffs de código, documentos de ingeniería o temas complejos en narrativas de video claras.

  1. Estructura Narrativa: Sigue references/creative/references/story-spine.md (gancho, planteamiento del problema, arquitectura/solución, impacto).
  2. Formas de Plano: Selecciona planos de references/animation/blueprints-index.md (editor-de-código, comparación-dividida, llamada-de-estadística, diagrama-de-flujo).
  3. Paquetes de Trabajadores de Fotogramas: Genera paquetes de sub-agentes acotados con workflows/faceless-explainer/scripts/frame-packets.mjs. Cada fotograma se construye de forma aislada (compositions/frames/NN-*.html).
  4. Montaje y Audio: Enlaza los fotogramas en el index.html raíz, mezcla la pista de locución con envolventes de ducking y renderiza.

Modo 3: Motion Graphics Cinéticos y Runtimes (motion-graphics, music-to-video)

Se usa para motion graphics independientes, componentes de UI animados, rejillas rítmicas y loops.

  1. Adaptadores de Runtime (references/animation/adapters/):
    • GSAP: Interpolaciones de múltiples propiedades de precisión y líneas de tiempo seek-safe.
    • Three.js: Viewports espaciales 3D, sistemas de partículas y modelos (references/animation/adapters/three.md).
    • Lottie: Reproductor de animaciones vectoriales (references/animation/adapters/lottie.md).
    • Anime.js / WAAPI: Morphs y keyframes compactos del DOM.
    • CSS Keyframes: Transformaciones aceleradas por hardware.
  2. Transiciones de Cámara y Morphs (references/keyframes/):
    • Paneos Ken Burns, zooms de entrada, morphs de rutas SVG y efectos de profundidad.
  3. Bloques de Registro y Shaders (references/registry/):
    • Busca e instala bloques de efectos preconstruidos (líneas de barrido CRT, glitch, grano de película, barrido de brillo, confeti).

Modo 4: Composiciones Personalizadas y Edición Multipista (general-video, slideshow)

Se usa para pitch decks interactivos, edición de línea de tiempo multipista y videos HTML personalizados.

  1. Convenciones de Estudio (references/studio/studio-conventions.md):
    • Cada escena es una subcomposición (data-composition-src).
    • Una pista de subtítulos (data-track-kind="captions").
    • Un tipo de elemento por pista (video, gráficos, subtítulos, audio).
    • Cumplimiento de la zona segura (cuadros de título/acción seguros de Premiere).
  2. Recetas de Creadores Multi-Dominio:
    • Recortes y Cortes: Actualiza data-start, data-duration y data-media-start (references/core/tracks-and-clips.md).
    • Zooms Suaves: Anima el wrapper de recorte interno con CSS/GSAP manteniendo constante la temporización del clip (references/keyframes/).
    • Ganancia de Audio y Ducking: Aplica envolventes de volumen y compresión de bus (references/audio/).

4. Verificación y Cadena de Herramientas CLI

Ejecuta siempre las compuertas de validación antes de la entrega:

# Inicializa un nuevo proyecto Hyperframes con el andamio del flujo de trabajo
npx hyperframes init "videos/<proyecto>" --skill=<nombre-flujo-trabajo>

# Captura activos web en vivo, capturas de pantalla y tokens de marca
npx hyperframes capture "<URL>" -o ./capture --json

# Inspecciona la línea de tiempo de la composición, pistas y clips
npx hyperframes timeline [--json]

# Valida atributos de temporización, zonas seguras y activos faltantes
npx hyperframes check

# Inicia el reproductor local interactivo
npx hyperframes preview

# Renderiza la salida MP4 final
npx hyperframes render --output output.mp4

5. Mapa de Directorios

RutaPropósito
workflows/Los 11 flujos de trabajo ascendentes (product-launch-video, faceless-explainer, pr-to-video, motion-graphics, etc.)
engine/Paquetes canónicos del framework Hyperframes v0.8.77
references/core/Atributos de temporización, reglas de determinismo, modelos de pista, subcomposiciones
references/animation/Adaptadores de GSAP, Three.js, Lottie, Anime.js, CSS, planos, desenfoque de movimiento
references/keyframes/Transiciones de cámara 2D/3D, zooms, morphs SVG, efectos de profundidad
references/audio/EQ, ducking, compresión, envolventes de automatización de bus de submezcla
references/creative/Especificaciones de diseño, tipografía, paletas, preajustes de fotogramas, estructura narrativa
references/registry/Bloques visuales, componentes de shader, instalación y cableado
references/studio/Diseño de línea de tiempo de estudio, pistas de subtítulos, zonas seguras
references/brag/Guías paso a paso de /brag seleccionadas, tonos y señales musicales
assets/music/Pistas musicales seleccionadas de géneros cinematográficos, hype, indie, calm
scripts/analyze_music_cues.py, núcleo de paquetes de fotogramas y extractores de audio

Individual skills in this repo

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

1999AZZAR/designer-mcp

SOTA animation and physics heuristic guide using motion.dev

1999AZZAR/designer-mcp

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

1999AZZAR/designer-mcp

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

1999AZZAR/designer-mcp

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

1999AZZAR/designer-mcp

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

1999AZZAR/designer-mcp

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

1999AZZAR/designer-mcp

Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), automation envelopes drawn on a track's volume or any effect parameter, or one submix bus carrying a chain, a fader and an automation clock for several tracks at once (`<hf-audio-group>`). Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.

1999AZZAR/designer-mcp

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, timeline, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

1999AZZAR/designer-mcp

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

1999AZZAR/designer-mcp

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

1999AZZAR/designer-mcp

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

1999AZZAR/designer-mcp

Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

1999AZZAR/designer-mcp

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

1999AZZAR/designer-mcp

Use when building or editing a HyperFrames project that people open in Studio: how the timeline should be laid out so it reads well (one caption track, one element kind per track, every scene a sub-composition) and where captions and key content may sit (safe zones). Don't use for how to perform an individual edit (split, trim, retime, volume, copy, swap): that is `creator-editing-recipes.md` in `/hyperframes-core`.

1999AZZAR/designer-mcp

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

1999AZZAR/designer-mcp

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

1999AZZAR/designer-mcp

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

1999AZZAR/designer-mcp

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

1999AZZAR/designer-mcp

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

1999AZZAR/designer-mcp

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Skills relacionados

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community