EN
视频免费 已验证

Device-Canvas Product（叙事短片）

本地渲染的产品发布短片：从真实用户问题出发，以具有纵深感的设备揭示、清晰的界面操作和证据支撑的结尾讲述产品价值。

你会得到

  • 一支 20–45 秒的宽画幅 MP4，包含开场、问题、产品展示、证据和片尾。
  • 一套统一的 HTML/CSS 场景构图，采用透视设备面板与双色分屏揭示。
  • 围绕产品承诺、目标用户、关键操作和已提供证据构建的精简叙事。

适合

  • 在社交平台发布软件产品或新功能。
  • 无需实拍，展示一个有价值的界面操作。

不适合

  • 以演员或实景拍摄为核心的电影感品牌短片。
  • 需要大量未经编排的真实界面录制的产品教程。

你需要提供

  • 产品承诺、目标用户和希望使用的行动号召。
  • 关键界面操作，以及已核实的证据；也可要求省略证据。

运行要求

  • Node.js 20+
  • FFmpeg
  • Chromium (npx playwright install chromium)

运行成本

No external services or generation models. Renders locally.

试试这个提示词

/sl-device-canvas-product-story-film 为虚构的任务规划应用 Daymark 制作一支 25 秒、16:9 的发布短片。以“TOO MUCH IN MOTION”开场，以“Plan your next clear day.”收尾。中间展示如何把需求、笔记和截止日期整理成一份每日计划，选出三项客户优先事项并专注于下一步；加入“4 hrs / week”的证据和更从容的工作日。采用分屏画布揭示风格。

后续提示词

  • 让开场的问题更贴近独立顾问的日常工作。
  • 调整证据场景，只使用我提供的数据和表述。

验证情况

已验证

render-checkpass4.0 / 551s

常见问题

短片可以包含数据指标吗？

可以。请提供准确数值、来源和获准使用的表述。不得编造业绩证据；缺少依据时应省略相关主张。

这个技能会生成产品截图吗？

不会。它在本地合成 HTML/CSS 场景。请提供界面细节或获准使用的素材；也可以要求制作明确标注为示意的虚构界面。

SKILL.md

SKILL.md

Device-Canvas Product Story Film

Build a short, evidence-first product story around a device canvas that splits, tilts, and opens into the product interface.

Style: Split Canvas Reveal. A cool, precise studio canvas turns one product interaction into a bold, dimensional reveal. Follow references/style-guide.md exactly.

Use this skill when

  • Launching a software product or feature on social channels.
  • Showing one valuable interface interaction without live-action production.

Do not use

  • Films that require generated footage, live-action production, or licensed music.
  • Product demos that depend on complex real-time software behavior unavailable in a composed interface.
  • To reproduce another company's brand, logo, product UI or copyrighted characters.

Inputs

  • Product name, one-sentence promise, and preferred call to action
  • Target audience and the specific problem the launch film should dramatize
  • Product interface details or a concise description of the key interaction
  • Verified proof point, source, and any wording or claims that must be avoided

If something essential is missing, ask one short question before starting. Never invent facts, numbers, quotes or customer names; mark gaps as [needs source].

Workflow

  1. Read references/motion-contract.md and references/style-guide.md. Their rules are fixed for this skill.
  2. Fill references/scene-map.md from the brief (4-8 scenes, 20-45 s). Never invent product numbers, names or quotes; ask for anything required that is missing.
  3. Copy references/composition.html to film/composition.html. Keep the stage, the ambient layer, the progress line and the fit script.
  4. Delete the example scenes you do not use, set each scene's text, data-start, data-duration and the absolute animation-delay values, and set <html data-duration> to the sum of scene durations.
  5. Apply the style tokens in the :root block exactly as given in the style guide. Do not add colors or webfonts.
  6. Open film/composition.html in a browser to preview; it plays in real time. Reload to replay.
  7. Render: node scripts/render.mjs film/composition.html --out film.mp4 --fps 30 (install once: npm i -D playwright-core && npx playwright install chromium; FFmpeg must be on PATH).
  8. Run the validator below and fix every problem it reports.
  9. Extract stills around each cut (ffmpeg -ss <t> -i film.mp4 -frames:v 1 cut.png) and check that nothing is cropped, overlapping or frozen.
  10. Run the validator and fix every problem it reports:

``bash node scripts/validate-video.mjs film.mp4 --min-seconds 20 --max-seconds 45 ``

What makes this excellent

  • Build the hook from the audience's real friction, then make the first device reveal visually answer that friction.
  • Give the before state and after state distinct crimson and teal fields that meet in one crisp split reveal.
  • Stage the device as a CSS-perspective slab and keep its interface readable at the chosen wide canvas size.
  • Use the oversized cursor for one deliberate interaction; show the resulting product state before cutting away.
  • Tie every metric or testimonial to supplied evidence, and label illustrative or unverified information instead of presenting it as fact.
  • Reserve the final scene for the product name, one benefit line, and the supplied call to action.

Output contract

  • film.mp4: H.264, 30 fps, 1280x720, 20-45 seconds.
  • film/composition.html: the editable single-file composition that produced it (re-render any time with scripts/render.mjs).
  • A hand-off note: the filled scene map, total duration, anything left as a placeholder, and the validator output.
  • Deliver a wide-canvas MP4 rendered locally from a multi-scene HTML/CSS composition.
  • Keep the story between 20 and 45 seconds, with a readable end card as the final scene.

Reference demo and agent run

The preview is a reference render of the bundled composition with sample copy. In a real run the agent rewrites the scenes from the user's brief and assets, re-times the composition and renders a fresh MP4 that meets the output contract above.

Failure rules

  • Never hand over a render that fails the validator.
  • If the user's screenshots are low resolution, rebuild the surface in HTML instead of upscaling them.
  • Music and footage must be supplied and licensed by the user; never download assets.

相似技能

Device-Canvas Product（叙事短片） · SkillLoom