102.7K+Download
Skip to the usage guide
faceless-explainerby HeyGen

Faceless Explainer Skill.

A Claude Code and Codex skill for motion and video: turns text, notes, or an article into a faceless explainer video with invented scene visuals.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
heygen-com/hyperframes · skills/faceless-explainer/SKILL.mdSKILL.md
--- name: faceless-explainer description: 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. --- ## Step 0: Setup ## Step 1: Brief (no capture) ## Step 2: Design System ## Step 3: Storyboard and Script ## Step 3.1: Audio ## Step 4: Frame Visual Design
Front matter and section headings read from the upstream file on 2026-09-14 · 29,476 characters in full

01 What it does

What the faceless-explainer Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Turns arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video with invented scene visuals (typography, abstract graphics, diagrams, data-viz). Works through seven orchestrated steps: setup with brief confirmation, synthetic capture package (no website), design system selection from shipped frame presets with optional brand token remixing, storyboard and script using narrative design to reshape input, audio generation with TTS and BGM, visual design adding time-coded shot sequences with invented elements, parallel frame building via sub-agents, and final render.

Collaborative mode includes brief, storyboard, sketch and final-review gates. The workflow normally invents scene visuals rather than capturing a website; it can still incorporate an image supplied by the user.

What it produces

  • STORYBOARD.md with frame-by-frame teaching plan, time-coded shot sequences, and invented focal/roles
  • compositions/frames/NN-*.html — one HTML composition per frame built by sub-agents
  • renders/video.mp4 — the final rendered video in landscape 1920x1080, portrait 1080x1920, or square 1080x1080
See the example prompt ↗

How It Works

  1. 01
    Confirm Brief and Initialize Project

    BRIEF.md exists and determines the mode — read it and ask nothing. If missing and project is fresh, run the intent layer to lock the brief.

  2. 02
    Create Synthetic Capture Package

    Save the user's full input verbatim as capture/extracted/visible-text.txt (the source of information).

  3. 03
    Choose Frame Preset and Build frame.md

    Pick one shipped preset from hyperframes-creative/frame-presets/ that fits the topic and tone.

  4. 04
    Write Storyboard with Narrative Design

    Turn text into frame-by-frame teaching plan using story-design.md structure.

  5. 05
    Generate Audio and Add Visual Design

    When narration is requested, generate audio and timing metadata while developing the visual sequence. A fully silent project explicitly skips narration, BGM and SFX.

  6. 06
    Build Frames and Assemble Index

    Sync durations, build per-frame packets, dispatch one sub-agent per frame in parallel. Each worker writes compositions/frames/NN-*.html. Build captions in background.

02 Find your fit

When to Use the faceless-explainer Skill

Use the faceless-explainer skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Topic explainers, concept breakdowns, how-tos, and listicles
  • Explaining a topic from text with no product and no website to capture
  • When every visual needs to be invented: typography, abstract graphics, diagrams, or data-viz

Know the Boundaries

  • Video built from a website for product promo or tour
  • When there is a capture step or real asset inventory needed
  • Bare "make a video" request or any uncertainty — must go through intent layer first

What to Provide

  • Arbitrary text sourceAn article, notes, a topic, or a brief — the full input saved verbatim as capture/extracted/visible-text.txt.
  • Optional user scriptIf the user pasted a script or wants their wording kept, save it verbatim as user_script.txt. VO_MODE (verbatim or restructured) comes from BRIEF.md.
  • Optional brand colors or fontsLeave tokens.json colors and fonts empty unless the user explicitly gave brand colors or fonts.
  • Optional voice preferenceIf the request named a voice, gender, or tone, pick a matching voice id and pass --voice <id>.
  • Optional real imageIf the user supplied a real image, place it under public/<basename> and note it for Step 3.

03 Inside the skill

Rules the faceless-explainer Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Opening Rule for Brief Handling

    If BRIEF.md exists, read it and ask nothing — the brief is settled.

  2. No Capture Step for Faceless Videos

    Do not run npx hyperframes capture — there is no URL. Do not create asset-descriptions.md or populate capture/assets/. Faceless visuals are invented in Steps 4-5, not captured.

  3. Run Steps in Order with Gates

    Work through Step 0 setup, Step 1 brief, Step 2 design system, Step 3 storyboard, Step 3.1 audio, Step 4 visual design, Step 5 frames, Step 6 finalize.

  4. Leave Asset_candidates Empty by Default

    Frames do not carry an asset inventory in faceless videos. Leave asset_candidates empty unless the user supplied a real public/<basename> image.

  5. Search Catalog Before Inventing Looks

    For every named look, effect, or transition the brief mentions, run npx hyperframes catalog --query with plain English before writing it into STORYBOARD.md.

  6. Full-bleed Backgrounds on Clip Layer

    A frame's ground (color field, gradient, grid) is its own full-duration background clip with class="clip".

  7. Duration Sync Is Mechanical

    Real voice duration wins; silent frames keep estimates. Run audio.mjs sync-durations after Step 3.1 finishes. Never hand-edit synced durations.

04 Put it to work

Install faceless-explainer in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add faceless-explainer to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer

Generic skills CLI form for skills/faceless-explainer/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Turn this article about compound interest into a 60-second explainer video for young adults. Use clean modern graphics with invented diagrams showing how money grows over time. Keep the tone approachable and use a female voice for narration. Format: [landscape/portrait/square]. Destination: [Instagram/YouTube/LinkedIn].

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Run HyperFrames lint and check, then inspect the contact sheet before approving render.
  • Check frame text for actual clipping and overflow. The source describes a narrow 1–4 px caption-highlight false positive; do not treat every caption warning as harmless without checking the rendered result.
  • Verify transitions and audio timing, and obtain the final preview-or-render decision before exporting the MP4.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Branch main
Skill file
skills/faceless-explainer/SKILL.md Content checksum recorded at verification; commit 558c11b
License
Apache-2.0 From LICENSE.
Repository stars
49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for faceless-explainer.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Step 0: SetupConfirm brief, initialize project, write BRIEF.md, record preferences, show sign-in status
  2. Step 1: Brief (no capture)Save input as visible-text.txt, create synthetic tokens.json, no website capture or assets
  3. Step 2: Design SystemChoose shipped frame preset, run build-frame.mjs to remix brand tokens onto preset
  4. Step 3: Storyboard and ScriptWrite frame-by-frame teaching plan with narrative design, present as proposal, loop until approved
  5. Step 3.1: AudioGenerate narration with TTS, word timings, BGM from HeyGen library, audio metadata
  6. Step 4: Frame Visual DesignAdd time-coded shot sequences, invented focal/roles, layout and motion inline per Scene
  7. Step 5: Build FramesSync durations, build packets, dispatch sub-agents per frame, assemble index, build captions
  8. Step 6: FinalizeInject transitions, run lint/check/snapshot, pause for review, render final MP4
  9. Quick ReferenceFormats, faceless deltas vs captured-asset workflow, background scripts, reference table
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 29,476 characters. Read the full file on GitHub.

06 Before you install

Questions About the faceless-explainer Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does this work in collaborative and autonomous modes?

Yes. In collaborative mode, user approval gates run at Steps 0, 3, and 6 with sketch review at Step 4. In autonomous mode, the same summary posts as a heads-up and sketches collapse into the build, with one preview question kept at Step 6.

What if I don't have a HeyGen account for voice or music?

Setup checks sign-in status and reports whether audio will use HeyGen or available local engines, including the documented Kokoro TTS path. Collaborative mode waits for sign-in or an explicit choice to proceed offline; autonomous mode continues only with capabilities that are actually available. If a required capability has no offline provider, the source says to surface the blocker rather than silently omit it.

What video formats does the output support?

Landscape 1920x1080, portrait 1080x1920, or square 1080x1080. The format is derived from the destination in BRIEF.md and set once in the storyboard frontmatter.

Faceless Explainer

Run faceless-explainer on a Real Motion and Video Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill faceless-explainer