illustrated-explainer

Render a narrated, flat-vector corporate explainer video (about 60–100 s, 16:9). It uses a soft pastel office illustration style generated with gpt-image-2 in one consistent house style, and every beat is cut on a spoken cue from an OpenAI TTS voiceover. Scene types are slow camera pans across wide illustrations with a small-caps caption at the top, bullet lists over a faded scene, a split screen, a zoom-blur whoosh into the logo on a hub ring, a world map with pins and links, floating product cards, and a CTA. Use when the user wants an animated explainer, a "problem, meet X, benefits, CTA" narrated video, a B2B services or SaaS explainer in the flat illustration style, or shares a reference like a corporate animated explainer.

설치로 이동 파일 검토

저장소: Ar9av/framesmith
최근 소스 활동: 2026년 10월 1일 21:32
감지된 SKILL.md 언어: 영어
스타: 1
포크: 1

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/Ar9av/framesmith/tree/main/skills/illustrated-explainer.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/Ar9av/framesmith --skill illustrated-explainer

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

41 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

name: illustrated-explainer
description: Render a narrated, flat-vector corporate explainer video (about 60–100 s, 16:9). It uses a soft pastel office illustration style generated with gpt-image-2 in one consistent house style, and every beat is cut on a spoken cue from an OpenAI TTS voiceover. Scene types are slow camera pans across wide illustrations with a small-caps caption at the top, bullet lists over a faded scene, a split screen, a zoom-blur whoosh into the logo on a hub ring, a world map with pins and links, floating product cards, and a CTA. Use when the user wants an animated explainer, a "problem, meet X, benefits, CTA" narrated video, a B2B services or SaaS explainer in the flat illustration style, or shares a reference like a corporate animated explainer.
license: MIT
metadata: {"framework":"framesmith","version":"0.1.0"}

# Illustrated explainer Built with `video-to-template` from a narrated flat-illustration explainer. The example `examples/prismor-enterprise/` uses full-frame illustrations with camera pans. For characters, props and icons that animate independently, use the `animated-character-explainer` skill, which shares this engine. ## Workflow 1. **Script** (`vo.txt`): follow the classic arc: the reader's pain as questions, then "you are not alone", then "Here comes <product>", what it does, how it works, benefits, and a CTA. Run it through the `no-ai-slop` skill, and keep every claim sourced from the product's docs. 2. **Voice:** `python3 scripts/main.py voice` (OpenAI TTS plus Whisper word timings). 3. **Illustrations:** list scenes in `assets.json`. Each prompt starts with `STYLE` and describes one scene; the brief's `style` string (or the example's) replaces it, which keeps every image in one house style. Then run `python3 scripts/main.py assets` (1536×1024, medium quality; the hub ring on a transparent background). Leave the top edge calm for captions, and ask for no text in images: all words are typeset. 4. **Beats:** in `brief.json`, each beat starts on a cue phrase (`at`). Cards and bullets can have their own cues. The real logo goes in `assets/logo.png`. 5. **Check, stills, render:** the voiceover is muxed automatically. ## Beat types | type | shows | keys | |---|---|---| | `scene` | a Ken Burns pan across one illustration plus a caption | `image`, `caption` (`\n` for two lines), `move: [z0, z1, fx0, fx1, fy0, fy1]` | | `bullets` | faded illustration, bullet items on cues | `image`, `caption`, `items: [{text, at}]` | | `split` | two illustrations with a sliding divider | `left`, `right`, `caption` | | `logo` | hub ring spins in, real logo in the centre, name rises | `ring`, `caption`, `name`, `name_at` (use `"tr": "whoosh"`) | | `map` | world map, pins drop, optional links from the first pin | `pins` (city keys), `links`, `caption` | | `cards` | product decision cards float up over a soft backdrop | `cards: [{verdict, title, detail, at}]` | | `cta` | logo, name, line, URL over a calm illustration | `image`, `name`, `line`, `url`, `url_at` | Transitions: a crossfade by default, or `"tr": "whoosh"` for a zoom-blur flash. ## Rules - Captions are plain small caps between thin rules, never boxed. There are no trailing periods on screen. - Use the product's own events for cards. Never invent testimonials or quote made-up customers. - The logo is always the real file. AI voices should be disclosed.

GitHub에서 보기

검색으로 돌아가기 설치로 돌아가기

cartoon-launch-film

Render a music-only, hand-drawn cartoon launch film (about 45 s, square 1080, 30 fps) for an X, LinkedIn or Threads post. It has boiling ink linework, a mascot with on-model poses, squash and stretch, a paper-and-grass world and a synthesised 120 BPM score with cartoon SFX. Beats are a dark terminal cold open where the agent forgets, a comic burst, a notebook slam title, the mascot eating old chats and docs, a linked-notes graph, a grid of the agents it works in, a hand-drawn Chrome window where a browser extension captures a page and fills a form with sourced answers, a cited answer note, a speed gauge, a star counter and an end card. Use for a GitHub-stars milestone post, open-source launch, devtool or AI-agent feature announcement, Chrome extension demo, or when the user wants a playful cartoon / indie-animation style instead of a polished SaaS look.

2026-10-08

framesmith

Start here for any framesmith request. framesmith is a library of motion-graphics, video and visual-design skills for AI agents; each template is driven by a brief and renders deterministically with Python and ffmpeg. Use this skill to pick the right template for a request (product promo, launch video, kinetic typography, spec-sheet motion graphic, brutalist or glitch visuals, gpt-image-2 asset pipelines) or to build a new template on the framesmith engine. Triggers include "make a promo video", "motion graphics for my product", "animated spec sheet", "turn this style/video into a template", and "which framesmith skill should I use".

2026-10-08

abstract-journey-film

Render a music-only abstract title film (about 80 s, 16:9, 24 fps) in which a small glowing orb travels through a chain of worlds and lands on the logo. The worlds are a dark glitch data field, a UI card in a lit chamber, wireframes that fill into a web page, a flythrough of 3D app panels, a bubble-sky horizon, a spiral vortex of gradient cards, neon diamonds, a construction grid that builds a sphere and bursts it into glossy spheres, a sphere room, isometric glass objects, pastel light pillars, ribbons and glass, a frosted sphere, nested frames, a pastel world, a portal of rings, an illustrated sunset landscape and space with planets. Image assets come from gpt-image-2.5 (transparent spheres, planets, clouds, ribbon, isometric objects and four backdrops); the rest is procedural, and the score is synthesised in code. Use for a conference opener, brand title sequence, product "sizzle" intro, event teaser, or to recreate a dreamy no-text motion-design journey (the Webflow No Code Conf opener style) for a brand.

2026-10-01

이 저장소의 모든 Skills 보기

illustrated-explainer

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills