动态图形
claude code（opus 5.5）为 taxtello 制作了产品宣传片，taxtello 是我的记账应用

canvas
svg
css
提示词

claude code（opus 5.5）为 taxtello 制作了产品宣传片，taxtello 是我的记账应用

每一帧都是代码：react + remotion，0 个 after effects
配乐也是代码，用 python 从正弦波和噪声合成

1 个提示词和 2 轮反馈

完整提示词在下方，拿去用 ↓

你是 Taxtello 的资深动态设计师、产品设计师和 Remotion 工程师。

你的任务是为 Taxtello 制作一部真正高端、达到 Apple 水准的产品宣传片。

这绝不是一部泛泛的 SaaS 讲解片。
这绝不是一次功能演示走查。
这绝不是一套创业公司模板动画。

我想要一部最长 15 秒的品牌/产品展示片，让 Taxtello 看起来像一款成熟、昂贵、设计精美的金融产品。

参考：

Apple 产品发布影片
× 高端金融科技
× 杂志风格的动态设计
× 克制的 Stripe 式产品呈现
× Taxtello 自身的视觉识别

期望引发的反应是：

“等等，这是一个德国记账应用？”

这部片子应该让人感觉昂贵。

────────────────────────────────────
仓库 / 唯一事实来源
────────────────────────────────────

在设计任何东西之前，先检查真实的仓库。

主产品：
  /taxtello/main

现有的 Remotion 项目：
  /taxtello/beta-motion

重要的真实品牌源文件：

  /taxtello/main/public/css/app/_00-tokens.css
  /taxtello/main/docs/design/TOKENS.md
  /taxtello/main/public/taxtello-wordmark.png
  /taxtello/main/public/icons.svg

现有的当前产品截图位于：

  /taxtello/main/artifacts/smoke-ui-smoke/

优先使用最新的有效截图/当前源码，而非过时的产物。

在以下位置已经存在一段 24 秒的 Remotion 主视觉动画
/taxtello/beta-motion。

不要替换它。
不要让它退化。
不要把它当前的 AI 连接叙事强行塞进这部新片。

为这个任务创建一个新的独立合成，例如

  TaxtelloShowreel15

你可以复用好的基础设施、字体、渲染工具、动效基元、
缓动曲线、资源加载和 QA 基础设施——只要有用，就从 beta-motion 里取。

但在创意上，这应该是一部新片。

在实现之前，检查真实的 Taxtello UI 并理解这个产品。

不要虚构不存在的功能。

────────────────────────────────────
真实的 TAXTELLO 视觉语言
────────────────────────────────────

使用真实的设计系统。

核心色板：

背景：
  #0c0f1a

抬升表面：
  #111525
  #131722
  #1a2032

主品牌金色：
  #e8b84b

金色高光：
  #f5d07a

金色暗部：
  #9b6d18

主文本：
  #e8eaf2

强烈的暖白：
  #f6f4eb

次级文本：
  #8b93b5

正向：
  #34d399

负向/错误色仅在语义必要时使用：
  #f87171

字体：
  Plus Jakarta Sans

数字 / 金融数值在合适处使用：
  JetBrains Mono

使用真实的 Taxtello 文字标识和/或 Taxtello 标志。
不要重绘或近似临摹 logo。

Taxtello 的金色应该像珍贵的点缀，而不是满屏泛滥的黄色 UI。

参考：
暗色金属
温暖金色
玻璃
墨色
精准
沉静的自信

不要：
赛博朋克
加密
霓虹
游戏
泛用 AI 紫
彩虹渐变

────────────────────────────────────
核心创意规则
────────────────────────────────────

严格执行这些规则：

1. 一个镜头 = 一个概念。

2. 每个场景都需要呼吸的空间。

3. 产品 UI 才是主角。

4. 不要把解释性文案贴得到处都是。

5. 除非有刻意的理由，否则不要使用硬切。

6. 优先使用物体驱动的转场：
   一张卡片变成下一张卡片，
   一条图表线变成连接线，
   一张收据变成一笔记账，
   一个数字变成另一个界面元素，
   镜头在产品中穿行。

7. 使用高级的缓动。
   不要线性运动。

8. 运动应自然地重叠。
   不要让所有元素都在完全相同的帧开始和停止。

9. 克制地使用景深：
   透视，
   柔和的视差，
   缩放，
   前景/背景分离，
   在可实现时，受控的景深。

10. 不要仅仅因为效果酷就使用它。

11. 不要滥用粒子。

12. 不要到处都是假的毛玻璃效果。

13. 不要过度模糊。

14. 不要毫无意义的 3D 旋转卡片。

15. 不要不停地缩放。

16. 不要用 20 种不同的动画风格。

17. 不要弹跳的 UI。

18. 不要大段的营销文案。

19. 不要逐镜头模仿某支特定的 Apple 广告。
    而要捕捉其理念与制作水准。

视觉上的自信应当来自克制。

────────────────────────────────────
格式
────────────────────────────────────

主母版：

1920 × 1080
60 fps
16:9
H.264
最大时长：15.0 秒

目标时长：
约 14.0–15.0 秒。

即使没有声音，它也必须能作为社交媒体上的产品揭幕视频成立。

如果在母版完成之后可行，再刻意重新构图制作一个
竖版/社交版本。

不要只是裁剪桌面版合成。

但桌面母版才是优先项。

────────────────────────────────────
故事 / 情感弧线
────────────────────────────────────

不要把它做成五个功能的罗列。

它应该感觉像一个连贯的思绪：

混乱 → 掌控 → 清晰 → TAXTELLO

最初的 1.5 秒就必须已经显得高级。

第一个有意义的产品时刻应在约 2 秒时出现。

不要 5 秒钟的 logo 开场。

可能的叙事方向：

“关于你业务的一切，终于汇聚一处。”

但要把它展示出来，而不是解释它。

我希望整部片子大约有四个视觉概念。

使用你在仓库中找到的最强的真实 Taxtello 界面。

有力候选包括：

• Finanzcockpit / Dashboard
• Rechnungen
• Belege
• Bank / 匹配
• Steuergesundheit / 税务概览

你并不需要把它们全部展示出来。

选择视觉上最强的组合。

────────────────────────────────────
建议的 15 秒分镜
────────────────────────────────────

把这当作一个有力的起点，而不是死板的模板。

0.00 – 1.20

黑色 / 藏青色。

一点微小的暖金色反光出现。

这道反光优雅地揭示出 Taxtello 标志，或
文字标识的一角。

不要泛泛的 logo 淡入。

要有机械般的精密感。

镜头穿过或掠过标志，UI 开始从中浮现。

文案极少或没有。

─────────────────

1.20 – 4.40

财务掌控。

把真实的 Taxtello Cockpit 呈现为一个有维度的产品界面。

而不只是一张放在屏幕上的截图。

重构/裁切/分层处理它，好让各个界面区域可以分别做动画。

主视觉财务数字清晰地显现。
图表绘制进来。
辅助指标稍晚些稳定下来。

使用微妙的错落节奏。

可以出现一行文案，例如：

  “Alles im Blick.”

或者如果你找到更贴切的，另一句同样简短的德语短语。

最多约 3–4 个词。

界面必须看起来仍是可辨认的真实产品。

─────────────────

4.40 – 7.50

文档 / 记账的转变。

用上一场景中的一个视觉物体作为转场。

例如：

一个金色图表点扩展成收据/卡片的边角。
镜头跟随它。
一张收据/文档进入。
Taxtello 识别或整理它。
文档优雅地吸附进它对应的记账 / 财务记录。

使用磁吸般对位与精密感。

不要老套的扫描仪激光。

不要漂浮的纸张龙卷风。

可能的微文案：

  “Belege. Erledigt.”

仅当它能改善这个场景时才用。

─────────────────

7.50 – 10.70

金钱 / 发票。

自然地变形或过渡到真实的 Rechnungen 界面。

使用一个有力量的瞬间：

一个发票状态发生改变，
一笔付款完成结算，
一个金额移动到位，
或者概览自行组装起来。

数字应当有触感且精准。

在与真实产品相符的地方使用 JetBrains Mono。

金色高亮当前激活状态。

绿色仅用于真正正向的语义状态。

可能的文案：

  “Geld. Im Griff.”

再次强调：可选，且极其简短。

─────────────────

10.70 – 12.80

税务 / 清晰。

过渡到真实的 Taxtello 税务健康 / 财务指导界面。

不要宣称 Taxtello 能神奇地保证报税正确。

传达可见性与掌控感。

例如：

多个嘈杂的信号收拢成一个平静、结构化的税务概览。

可能的文案：

  “Steuern im Blick.”

这个场景应比上一个场景更平静。

节奏短暂地放慢。

─────────────────

12.80 – 15.00

品牌收尾。

把镜头向外拉。

UI 收缩或折叠成一个漂亮的 Taxtello 产品物体 / 界面。

黑暗在它周围回归。

金色的 Taxtello 文字标识清晰显现。

下方是一句简短的品牌文案。

探索有力的收尾文案，例如：

  “Dein Business. Klar.”

  “Buchhaltung. Unter Kontrolle.”

  “Einfach mehr Überblick.”

  “Alles fürs Business. An einem Ort.”

根据你在仓库中找到的真实产品定位来选择。

不要仅仅因为我建议了就使用某句文案。

最后一帧必须有足够的静止感让人记住。

自信地结束。

不要巨大的弹跳 CTA。

────────────────────────────────────
转场
────────────────────────────────────

这是最重要的部分之一。

我想要这样的转场，让观众心想：

“下一场景当然是从那里来的。”

好的：

图表线 → 文档边缘
金色胶囊 → 发票按钮
财务数字 → 发票中的金额
卡片边缘 → 下一个界面
镜头推进穿过界面元素
共享几何
使用真实产品形状的遮罩揭示

不好的：

交叉淡入淡出
随机的擦除
旋转转场
故障效果
每两秒一次甩镜
泛泛的 SaaS 左滑
滥用缩放模糊

只有在刻意的节奏冲击对片子有益时，才允许直接硬切。

────────────────────────────────────
运动
────────────────────────────────────

运动需要有分量。

使用与以下相当的曲线：

cubic-bezier(0.16, 1, 0.3, 1)

在合适之处。

不同元素应当有微妙不同的到达时间。

优先：

预备动作
低于约 2% 的过冲
稳定
运动延续
场景之间的共享速度

避免卡通式的弹性。

镜头运动应像高端微距产品拍摄。

想象我们是在拍摄一个实体的高端物件，尽管它是软件。

────────────────────────────────────
灯光 / 材质
────────────────────────────────────

使用极其微妙的环境光。

可能的处理：

• 柔和的黄金轮廓光
• 深藏青色的衰减
• 微弱的环境泛光
• 掠过表面的柔和镜面高光
• 克制的暗角
• 若有实质帮助，加入微妙的颗粒

保持界面清晰锐利。

不要仅仅为了显得电影感而模糊产品。

不要使用破坏可读性的假光泽反射。

────────────────────────────────────
排版
────────────────────────────────────

使用极少的文案。

任何句子都不应与产品争夺注意力。

标题通常应放在一行内。

使用 Plus Jakarta Sans。

强有力的排版有时可以放大到极大，本身成为
一种转场手段。

避免每个词都独立动画的泛用动态图形做法。

排版应像被设计过的物体一样运动。

────────────────────────────────────
声音 / 节奏
────────────────────────────────────

像按照大约 115–120 BPM 剪辑那样来设计运动：
高级、有动能、精致，但不狂乱。

重要时刻应在音乐上落点精准。

建议的声音语言：

• 重大揭示时低沉柔和的冲击音
• 克制的、有触感的 UI 点击声
• 微妙的金属/玻璃质感音点头
• 镜头转场时柔和低频的移动感
• logo 收尾时优雅的解决和弦

避免：

• 巨大的电影预告片式轰鸣
• EDM 上行音
• 到处都是响亮的呼啸声
• 素材库里的“科技界面”音效
• 说唱节拍
• 侵略性的低频

如果项目中没有法律上安全的音乐/音频资源，不要从互联网上抓取
受版权保护的音频。

交付不带受版权保护音乐的视觉母版，并制作一份简洁的提示
表，说明音乐/音效应在何处落点。

如果存在合适的、安全的本地音频，就使用它。

────────────────────────────────────
只用真实产品
────────────────────────────────────

这一点至关重要。

检查当前的 main。

不要虚构界面。

不要虚构暗示真实客户数据的指标。

如果需要，使用明确合成/演示安全的数值。

不要意外暴露任何个人、测试用户或生产信息。

复用真实 Taxtello UI 的视觉结构。

如果某个界面需要做运动分层，请依据真实设计系统在 React 中如实重建，
而不是简单地缩放一张巨大截图。

结果仍应让人一眼就认出是 Taxtello。

────────────────────────────────────
实现预期
────────────────────────────────────

直接在以下位置工作：

  /taxtello/beta-motion

在现有合成旁边创建新的合成。

保持现有合成可用。

把新工作组织得干净整洁。

优先为以下内容提供可复用的基元：

• 镜头表面
• 产品边框
• 遮罩转场
• 文本揭示
• UI 区域揭示
• 环境光
• 共享元素转场

避免一个 1500 行的组件。

使用由帧/时间驱动的确定性 Remotion 动画。

不要 setTimeout。
不要非确定性动画。

全程保持 60 fps。

有意识地使用插值/弹簧/缓动。

────────────────────────────────────
不要在第一次实现后就停下
────────────────────────────────────

这是一个视觉任务。

你必须审阅实际渲染出的输出。

必需的工作流程：

1. 检查仓库和真实品牌/产品。

2. 写一份简洁的分镜，包含：
   - 精确时间戳
   - 关键视觉
   - 转场逻辑
   - 文案
   - 预期的情感节奏

3. 实现它。

4. 运行类型检查 / 相关检查。

5. 大致在以下时间点渲染代表性的帧：
   0.0 s
   1.0 s
   2.5 s
   4.5 s
   6.5 s
   8.5 s
   10.5 s
   12.5 s
   14.0 s
   14.8 s

6. 目视检查这些图像。

不要仅仅确认渲染成功了。

问自己：

这看起来像一部 Apple 级别的产品影片吗？

有没有哪里看起来像模板？

屏幕上东西太多了吗？

产品清晰可辨吗？

转场在逻辑上连贯吗？

Taxtello 的金色有高级感吗？

每一帧看起来都经过构图吗？

7. 修复视觉上的弱点。

8. 渲染完整影片。

9. 检查最终 MP4 中多个精确解码的帧，而不仅是浏览器
截图。

10. 如有必要，再次迭代。

不要因为代码能编译就宣称成功。

交付物是影片本身。

────────────────────────────────────
质量标准
────────────────────────────────────

如果你的结果感觉像以下任何一项，就否定它：

• 一个 SaaS 模板
• 一段 PowerPoint 动画
• 一段网站屏幕录制
• 一个泛泛的 Remotion 演示
• 一支加密货币广告
• 一个 AI 生成的宣传模板
• 五张截屏滑来滑去
• 过多的营销文案

每一帧重要的画面都应好到可以作为静态广告使用。

我宁愿要：

3 个非凡的视觉瞬间

也不要

10 个平庸的功能动画。

────────────────────────────────────
最终交付物
────────────────────────────────────

提供：

1. 最终分镜
2. 新的 Remotion 合成源码
3. 1920×1080 / 60fps 最终 MP4
4. 海报/最终帧
5. 含影片代表性帧的缩略图总览表
6. 精确时长
7. 所用真实 Taxtello 资源/界面清单
8. 对运动语言的简要说明
9. 任何遗留的视觉妥协
10. 重现渲染的命令

将输出保存到命名清晰的目录，例如：

  /taxtello/beta-motion/out/showreel-15/

不要部署任何东西。
不要修改生产数据。
不要合并任何东西。

在创意上全力以赴，但要极其克制。

让 Taxtello 看起来昂贵。
作者只公开了部分提示词。
视频

我用 Opus 5.5 为我的活动管理网站做了这支宣传片。一切…
这段视频是一个 AI 做的 🤯 靠代码，不是靠模板。
Opus5.5 motion graphics 用 Remotion 很容易复用，所以很方便！ #AIMotionDesign
Claude Opus 5.5 完全用代码做出了这整支视频。
我忍不住又做了一次，这次是为 RedShip……
Claude Opus 5.5 刚刚为 Bridge… 制作了这支周边发布视频