CommunityProgramación y desarrollogithub.com

Agentic Product Demo — film SaaS Remotion

Videos demo de producto pulidos con agentes IA y Remotion. La UI es código, no una grabación de pantalla — composiciones React, cámara cinemática, MP4 listo para publicar.

¿Qué es Agentic Product Demo — film SaaS Remotion?

Launch Video paso 1 (héroe): demo de producto agentic en Remotion — escenas UI-as-code → corte SaaS de 20–45s listo para launch.

Compatible conClaude Code~Codex CLI~CursorAntigravity
npx skills add Alexwtlf/agentic-product-demo

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

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

Documentación

Product demo videos

One pipeline, three layers: the story (what the clip shows), the motion (how the interface behaves inside the frame), and the title (the two seconds that open it). Reference implementation: src/compositions/Demo.tsx + src/motion.ts + src/title-card.tsx + scripts/render.sh.

New clips copy that pipeline. Do not invent a second one.


1. Settle the brief. Read what you can, ask what you can't.

Do not start a composition until the four things below are settled. But settled is not the same as asked — and asking for what you could have found yourself is the fastest way to make a person regret starting.

Read before you ask

If you can reach the product — its repo, its running app, its live site — read it and propose the whole plan. Take the running order from the marketing site and the screens from the app; neither answers the other's question, and question 2 below has the measurement showing why. Then put the plan up and ask for one confirmation.

Say that describing the flow beats letting you guess

Tell them this in your first message, in one line. Reading the product gives you a plausible flow. It cannot give you the right one, because the code does not record which path converts, which step people get stuck on, which feature shipped last week and needs the attention, or which screen the founder is quietly embarrassed by. Only they know that, and most people do not volunteer it because they assume the agent has it covered.

If you already know the flow you want — the steps, in order — say it and the clip will be much closer to what you have in mind. If not, I'll read your product and propose one.

It is an offer, not a gate. If they do not answer it, read and propose as normal; do not ask again. The point is that they were told the option existed before you spent their time on a plan built from inference.

The same applies to anything else they already know: a line of copy that has to appear, a screen that must not, a feature that is being deprecated. Invite it once, up front, then get on with it.

Ask outright only for what is not in the artifact:

  • what the clip is for — a launch, a section nobody scrolls to, an onboarding step. Intent is not in the code.
  • which file the ending shows, but only when the ending is media the product generated and the disk offers several with nothing to choose between them. An ending that is just the finished screen needs no asset and no question — see question 3.

Everything else — what is on screen, which flow, which features, how long — you can draft, and drafting it is your job. Propose, mark what you inferred, and be specific about what you would change on a "no". A person correcting a concrete plan gives you better answers in one line than an interview extracts in four.

Never generate an asset to stand in for a payoff, and never substitute a lookalike. Proposing a real file that already exists is not inventing; making a new one is. If the disk is empty, that is the moment to ask.

If they answer in fragments ("dashboard, they filter it, end on the published report"), that is enough — translate it into keyframes yourself. Never hand them a form to fill in, and never ask them to mark up the composition.

What has to be settled, however you get there

Question zero: the whole product, or one feature?

Ask it in plain words, not as a taxonomy:

A demo of the whole product, or a scene about one feature?

A product demo strings three to five features into movements on a through-line. The viewer leaves knowing what the product is.

A feature clip walks one flow start to finish. The viewer leaves knowing how to do one thing.

They are not the same clip at different lengths. A product demo cut as a feature clip shows one capability and hides the rest; a feature clip stretched into a tour skims four things and teaches none.

Then infer where it lives — and say so, don't ask

The answer above predicts the destination almost every time. Take the default, state it in one line with the plan, and let them correct it with a word:

they saidassumewhich means
whole producta standalone launch videoplays once after a click. No loop seam to protect, sound is available, up to 90s, may end on a card or a logo
one featurea clip in a page sectionautoplays, so muted and looping. Seamless (hard rule 5), short enough to survive the fifth repeat, title from the section's heading, rhythm matched to its siblings

Both crossings are real and both happen — a 42s tour living in a page row, a feature walkthrough posted as a standalone short. That is why you say which one you assumed. What you must not do is assume silently: a launch film built as a page loop comes out short, silent and ending exactly where it started, and nobody names the cause — they just say it feels slight.

"Say it, don't ask it" is about the shape of the exchange, not about hiding the choice. Offering it as a pre-selected option with the consequence spelled out is saying it — see "Put it up as one block" below. What is banned is the open question with no default, which makes them do your work.

1. What is being made on screen? One sentence. Not the product feature — the thing the viewer watches get built. "A revenue report", "a UGC ad for a supplement brand", "a deploy going out". If this is vague the clip becomes a montage of output, which proves the product can generate something but never shows what the visitor would actually do.

2. What does it walk, in order?

Feature demo: the real steps of the one flow. Paste URL → binder. Pick face → lock sheet. Query → filter → publish.

Product tour: which features become movements, in what order, and what carries the viewer between them — a piece of state that survives the cut, a line of copy, one character who reappears. A tour with no through-line is a slideshow of screenshots.

Either way the copy comes from the live product, not invented. Getting this wrong is the only defect that cannot be fixed in the edit.

Read both the site and the app. They answer different questions.

The marketing site tells you which features matter and in what order — the running order of its sections is the company's own ranking of what it sells, and its headline is the promise the clip has to keep.

The app tells you what those features actually look like: the real screens, the real steps, the real copy on the buttons.

Neither alone is enough, and the failure modes are opposite. Build a tour from the site and you get a montage of claims with no screens under them. Build it from the nav and you tour whatever happens to be in the sidebar — Settings, Library, Analytics — while the three things the front page leads with go unmentioned. This has been measured: a tour drafted from a sidebar alone opened on the product's third priority, skipped two of its four headline features, and included a screen the front page does not mention.

So: take the running order from the site, take the screens from the app, and say which came from where when you propose it.

3. How does it end? Usually you already know, and should not ask.

The default: it ends on the finished thing. The flow completes and the last state stays on screen long enough to be read — the report published, the sheet locked, the short exported. That is drawn by the composition like every other frame; there is no separate asset and nothing to request. Hold it 2–3 seconds. A clip that cuts the instant the last button is pressed feels like it was interrupted, and the viewer never sees the thing they were promised.

Then: a page clip folds back to the dark ground it opened on (hard rule 5); a standalone one may end on a card, a logo, a CTA.

The exception, and the only time to ask: when the payoff is media the product generates — a rendered video, a generated image, a character. Then it has to be a real file that already exists. Never generate a stand-in and never substitute a lookalike, because a fabricated payoff misrepresents the one thing a viewer is actually judging: output quality.

That case is also where these clips lie. A clip arguing "same face in every scene" that ends on a different person destroys its own claim in the last four seconds, and no edit repairs it. If the payoff is generated media, check that the thing in the ending is the thing from the flow before you shoot.

Put it up as one block, not as an interview

Everything above is what has to be settled. This is how to put it, and the form matters as much as the content: three prose questions in a row read as an interrogation, and people answer interrogations badly.

If the harness has a structured question tool — Claude Code's AskUserQuestion — use it. One block, three questions, each option carrying a one-line consequence, and your own inference marked (Recommended) and listed first. Everywhere else in this section says state your assumption and let them correct it with a word; a pre-selected recommendation is that, done properly. It is not an interview — it is your plan, pre-filled, one click from being corrected.

Without such a tool, ask the same three in one message, marking which answer you would take if they say nothing.

The three, and nothing else:

headerquestionoptions
ScopeA demo of the whole product, or a scene about one feature?Whole product — 3–5 features as movements on a through-line; they leave knowing what it is. · One feature — one flow start to finish; they leave knowing how to do one thing.
WhereWhere does it live? Sets the loop seam, the sound and the length ceiling.In a page section — autoplays, so muted and seamless; 8:5 tile, 14–25s for a feature, 35–60s for a tour. · Standalone — plays once, sound is real, up to 90s, may end on a card.
FlowDo you already know the steps you want walked?No, read my product and propose — running order from the site, screens from the app. · Yes, I'll describe them — fragments are fine: "dashboard, they filter it, end on the published report".

Mark the recommendation on Where from the answer you expect on Scope — a tour is nearly always standalone, a feature clip nearly always a page loop. Both crossings are real, which is exactly why it is offered rather than assumed silently.

Flow is the §1 invitation in a form people actually answer. Recommend "read my product" — that is the honest default — but the option to describe it has to be visible, because the code cannot tell you which path converts or which screen the founder is embarrassed by.

Never put length or pace in that block. Both get answered "short" and "fast" on reflex, and a demo that rushes the steps it exists to show is the result. Derive the number, show the arithmetic, name the alternatives — the section below is how.

A fourth question only when the ending is media the product generates and the disk offers several files with nothing to choose between them. Options are the real filenames. Never a generated stand-in.

Do not add a question for the title, the pace, the palette or the delight budget. Those are yours to decide and to say in passing.

The three with defaults — state your choice, don't ask

Decide these yourself a

Skills relacionados