rn-dark-saas-video

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Dark SaaS Magic Video

暗色 SaaS 魔术短片

Role

角色

Create new product videos in a dark, cinematic, UI-conjuring style. This is a style-generation skill, not a reference-alignment skill. Use it after
rn-motion-director
selects a style-level product or SaaS video route.
以暗黑、电影感、能够唤起 UI 幻象的风格创作新的产品视频。 这是一个风格生成 skill,而不是参考对齐 skill。应在
rn-motion-director
选择风格级的产品或 SaaS 视频路线后使用。

Canonical Showcase

标准展示案例

  • Human display name: 暗色 SaaS 魔术短片
  • Example finished piece: 雪踏乌云暗色 SaaS 介绍短片
  • File:
    assets/showcases/xuetawuyun-dark-saas-showcase-1080p.mp4
  • Use this as a style reference for scale, pacing, scene vocabulary, and final polish. Do not copy its text unless the user asks for the same brand/account.
  • 展示名称:暗色 SaaS 魔术短片
  • 成品示例:雪踏乌云暗色 SaaS 介绍短片
  • 文件:
    assets/showcases/xuetawuyun-dark-saas-showcase-1080p.mp4
  • 将其作为风格参考,用于确定画面规模、节奏、场景语言和最终质感。 除非用户要求使用相同品牌或账号,否则不要复制其中的文本。

Boundaries

使用边界

  • Use this for style-level creation: "做成这个感觉", "类似 Presenton 这种风格", "暗色科技感 SaaS 产品短片", "AI 工具产品演示".
  • Do not use this for pixel-level, frame-accurate, or timestamp-accurate remakes. Use
    rn-replica-qc
    first.
  • Do not replace
    product-launch-video
    ; use this when the requested visual language is specifically dark magic UI, not a generic product launch.
  • Build with HyperFrames unless the user explicitly requests Remotion.
  • 用于风格级创作,例如:“做成这个感觉”“类似 Presenton 这种风格”、 “暗色科技感 SaaS 产品短片”“AI 工具产品演示”。
  • 不要用于逐像素、逐帧或时间戳精确一致的复刻。应先使用
    rn-replica-qc
    。
  • 不要替代
    product-launch-video
    ;当用户明确要求暗黑 magic UI 视觉语言,而不是通用的产品发布视频时,使用此 skill。
  • 除非用户明确要求 Remotion,否则使用 HyperFrames 制作。

Required Reads

必读内容

Before writing a composition, read:
  1. references/style-language.md
  2. references/scene-blueprints.md
  3. references/timing-presets.md
  4. references/asset-contract.md
Before final handoff, read
references/qc-checklist.md
.
编写合成内容前,阅读:
  1. references/style-language.md
  2. references/scene-blueprints.md
  3. references/timing-presets.md
  4. references/asset-contract.md
最终交付前,阅读
references/qc-checklist.md
。

Inputs

输入

Collect or infer:
  • product name and one-line promise
  • target viewer and platform
  • duration preset:
    sting
    ,
    standard
    , or
    extended
  • pain words or opening claim
  • core workflow: prompt, generate, connect, model, export, share, automate
  • available assets: logo, screenshots, UI cards, integration logos, export names
  • output ratio and archive slug
If assets are missing, use abstract UI cards and text badges. State that the result is a style-level product video, not a product-accurate UI recording.
收集或推断以下信息:
  • 产品名称和一句话价值主张
  • 目标受众和发布平台
  • 时长预设:
    sting
    、
    standard
    或
    extended
  • 痛点关键词或开场主张
  • 核心工作流:prompt、generate、connect、model、export、share、automate
  • 可用素材:logo、截图、UI 卡片、集成 logo、导出名称
  • 输出比例和归档 slug
如果缺少素材,使用抽象的 UI 卡片和文本徽章。说明结果是风格级的 产品视频,而不是准确呈现产品界面的 UI 录屏。

Hard Style Rules

硬性风格规则

  1. Use a black spatial stage with fine grain/star particles and a weak bottom purple horizon glow.
  2. Avoid persistent horizontal neon-line backgrounds; they flatten the style.
  3. Use large white kinetic typography as story beats, not small labels.
  4. Include at least one cyan-to-magenta gradient CTA that triggers a visible transformation.
  5. Make hero objects large at their most visible frame: prompt card, CTA, UI board, badge ring, or export object must not feel like tiny distant props.
  6. Use speed blur, smear, scale rush, or white velocity wipes for major transitions.
  7. Include UI objects that feel summoned from darkness: cards, badges, folders, model chips, app windows, or export pills.
  8. Never add unexplained full-screen solid color flashes.
  9. Never claim pixel-level fidelity for this style workflow.
  1. 使用黑色空间舞台,搭配细颗粒/星尘粒子和底部微弱的紫色地平线辉光。
  2. 避免持续出现水平霓虹线背景;这种背景会削弱立体感。
  3. 使用大型白色动态排版来推动叙事,不要将其用作小型标签。
  4. 至少包含一个从青色到洋红色的渐变 CTA,并触发清晰可见的画面变化。
  5. Hero 对象在其最清晰的画面中必须足够大;prompt 卡片、CTA、UI 面板、 徽章环或导出对象不能像微小的远景道具。
  6. 主要转场应使用速度模糊、拖影、快速缩放或白色速度擦除。
  7. 包含仿佛从黑暗中召唤出来的 UI 对象,例如卡片、徽章、文件夹、 模型芯片、应用窗口或导出标签。
  8. 绝不添加缺乏明确意图的全屏纯色闪烁。
  9. 不要声称此风格工作流能够实现逐像素还原。

Workflow

工作流

1. Shape The Arc

1. 构建叙事弧

Pick a duration preset from
references/timing-presets.md
. Map the product into 5-8 capability beats. Prefer a cause-and-effect chain: text promise -> prompt -> CTA click -> generated result -> integrations/models -> export -> final claim.
从
references/timing-presets.md
中选择时长预设。将产品映射为 5-8 个 能力节点。优先使用因果链:文字主张 -> prompt -> 点击 CTA -> 生成结果 -> 集成/模型 -> 导出 -> 最终主张。

2. Select Blueprints

2. 选择场景蓝图

Use
references/scene-blueprints.md
to choose scene modules. Do not blindly use all modules; match the product's real capabilities.
使用
references/scene-blueprints.md
选择场景模块。不要盲目使用所有模块; 应与产品的真实能力相匹配。

3. Build With HyperFrames

3. 使用 HyperFrames 制作

Load the relevant HyperFrames skills:
  • hyperframes
    for composition authoring
  • hyperframes-cli
    for lint, validate, inspect, render
  • hyperframes-animation
    for speed blur, type motion, rings, cursor clicks
  • hyperframes-media
    only if audio, TTS, SFX, or captions are needed
Use deterministic motion. Build hero frames first, then animate into them.
加载相关的 HyperFrames skills:
  • hyperframes
    :用于合成内容编排
  • hyperframes-cli
    :用于 lint、validate、inspect 和 render
  • hyperframes-animation
    :用于速度模糊、文字动效、圆环和光标点击
  • hyperframes-media
    :仅在需要音频、TTS、SFX 或字幕时使用
使用确定性运动。先构建 Hero 画面,再通过动画进入这些画面。

4. QC

4. 质检

Use
references/qc-checklist.md
. If the user supplied a reference video and cares about alignment, also use
rn-replica-qc
.
使用
references/qc-checklist.md
。如果用户提供了参考视频,并且重视对齐效果, 还需使用
rn-replica-qc
。

Output

输出

Deliver the final MP4 path, QC contact sheet path, confirmed specs, and a short note naming the duration preset and scene modules used.
交付最终 MP4 路径、QC 接触印样表路径、确认后的规格,以及一段简短说明, 注明所使用的时长预设和场景模块。