由 Anthropic 出品

Claude Opus 5.5 提示词

在 Opus 5.5 手里,动效提示词是一份设计简报——它把动画写成代码,每个参数都还能继续谈。

video
向我索取:用于字标的一个单词品牌名(动词最理想)、9 到 12 张高分辨率照片、一首接近 120 BPM 且带有清晰 drop 和安静 breakdown 的免版税音乐(Mixkit,可免费用于商业项目),以及一张带有移动植物阴影的空白墙面免费素材照片(Pexels)。 制作一部纯 2D 的 Apple 主题演讲风格产品发布影片,以一次不间断长镜头呈现。每个场景都必须直接从前一个场景演化而来:没有淡入淡出、模糊转场或剪辑。元素会变形为其后继形态。字体通过遮罩边缘升起,图标从零缩放弹出,进度条横跨画布延伸,页面推入画面,一个黑色形体扩展覆盖屏幕,然后收缩进入下一个场景。 使用温暖的米白色背景、黑色界面元素,以及在摄影画面上叠加 iOS 26 风格的液态玻璃。字标使用 Archivo(wdth 125,weight 800),UI 使用 Geist。 光标必须通过真实点击、拖拽和长按来发起每一次交互。以屏幕工作室的感觉移动镜头,使每个节拍都填满方形构图,并让光标随镜头一起缩放。 禁止:交叉淡化、模糊进入、亮度“揭示”、3D 翻转、粒子、辉光、超过 1 秒的静态停留,以及任何看起来哪怕稍微像模板的东西。 120 BPM,54 拍,每一拍都有可见变化。 开场:字标像手风琴一样朝自己的句点收缩。圆点长成一个黑色胶囊,一个标签在其中出现。点击时,六片虹膜叶片围绕标签闭合,然后弹开进入一张照片。圆形变成方形并缩小。在它后面,一个网格像一张纸一样展开——中心、加号、四角——然后重组为 bento 布局。一次点击潜入其中一个 tile,并恰好落在 drop 上。 玻璃:一个玻璃单词一次构建一个字符,然后液化成水滴。水滴向侧面拉伸成玻璃工具栏。调整图标转变为滑块。拖动滑块,使用两张完美对齐的照片,将照片从日光转变为黄金时刻。被握住的旋钮变成玻璃镜头,向上升起并变成玻璃球体。下一张照片作为圆形出现在球体内部。球体扩展成锁屏,其中包含玻璃时钟数字、日期和 home bar。home bar 向外拉伸成玻璃音乐播放器。 舞台:锁屏被拉开,露出围绕它的手机,边框直接从屏幕边界生长出来。灵动岛像液体一样拉伸,从手机上捏离,飞过画布并扩展成 Mac 窗口。窗口像百叶窗一样向上卷起。长按壁纸并将其拖到 Safari 标签页上。浏览器页面向前推入。释放图像时,它成为落地页的 hero image。滚动:hero image 转变为产品卡片中的装裱画,卡纸和画框从照片边缘有机生长出来。选择一种画框颜色,让它涂满整个画框。选择尺寸。导航按钮向下飞出并转变为“Order print”。 订单:一个黑色形体持续改变状态: Ordered ✓ → Printing % → On its way(厢式货车沿路线行驶)→ Delivered ✓。 墙面:已送达的圆形扩展,直到黑色占据整个画面。精确保持一拍,然后收缩成挂在真实墙面素材中的装裱画。同样的六叶虹膜打开到艺术品上,然后再次闭合。画框扩展直到填满屏幕,再收缩回胶囊,变成圆点,最后让字母在回归节拍上向外弹开。 最终画面必须与开场画面完全一致。 1. 将所有内容保存在一个 1440×1440 的单一 HTML 文件中。每个视觉属性都必须由 async seek(t) 函数内部的时间推导出来。帧与帧之间不得有 CSS transitions、timers 或 persistent state。 对所有弹簧运动使用闭式阶跃响应。每当某个属性多次改变目标时,为每次目标变化添加单独的弹簧,使整个动画始终保持为时间的纯函数。 通过为每个玻璃组件提供其下方场景的独立副本来构建液态玻璃。使用基于圆角矩形距离场的 SVG feImage 位移图处理该副本。让它通过三个比例略有不同的 feDisplacementMaps,以创建细微的色边分离,然后添加边缘高光层。对于玻璃排版,为每个字形生成 canvas 距离场,并将其用于位移、遮罩和高光。 对于粘性效果,模糊源并通过 alpha threshold 处理,然后将原始源重新合成到结果之上,使内部保持完全清晰。 用六片围绕六边形开口定位的叶片构建虹膜。每片叶片应使用其两个顶点、对应的边延长线以及连接它们的 SHORT arc。 对于字标挤压,使用相同压缩因子将每个字符朝句点移动。相应调整绘制宽度:先收窄 wdth 轴,再缩放剩余几何形状,使所有字母保持相接。 使用 ffmpeg(-g 1)将每一段素材重新编码为 all-intra。通过 blob URL 加载生成的媒体,并在绘制每一帧之前 await “seeked”。 对于音频,为每个交互事件使用下载的 SFX(Mixkit),绝不使用生成的声音。使用测得的峰值定位每个 SFX。让音乐精确从强拍开始,让镜头落地与 drop 对齐,将墙面序列放在 breakdown 内,并在
向我询问:产品名称和一句话承诺、要展示的3到5个UI时刻、一个强调色、10到20个我拥有的真实竖屏片段,以及一首带有清晰drop的免版税歌曲(例如Mixkit,可免费商用)。 高端极简。每个镜头一个想法,大量留白,一个强调色,一款干净的无衬线字体(Geist或Inter),字距紧凑。 遮罩文字显现、匹配剪辑、统一的镜头语言。 只用真实素材,绝不用占位卡片。屏幕文字不加句号。 禁止:冲击波圆环、粒子爆发、RGB分离、镜头抖动、镜头光晕、霓虹辉光、网格地面、闪烁背景、弹跳缓动。 120 BPM下10个小节,每节2秒。 第1小节:钩子逐词随节拍出现。 第2小节:钩子中的一个词变形为产品UI。光标打字并点击。 Drop:一个圆从按钮中扩展出来,进入暗色场景。 然后每小节一个动作: 一面真实片段墙,带扫描线和3个胜出者 关键输出以大字号揭示 一个真实视频的3D旋转木马,带地面反射和运动模糊的甩镜切到一个主视觉片段 主视觉置于手机中,旁边是一个翻转成结果的面板 大号统计数据配合推切 一个3词滚动条 一个logo揭示 淡出至黑 一个1920x1080的HTML文件。每个样式都根据https://t.co/knoJJfMFI5(t)内部的时间计算:没有CSS动画,没有定时器,帧与帧之间没有状态。 真实视频:用ffmpeg将片段提取为30fps的JPEG序列,并逐帧切换img源。seek等待图像解码完成。 用numpy分析歌曲:速度、节拍网格、每小节能量以及drop。将网格校准到实际的底鼓击打。每次剪辑都落在强拍上,每次UI击打都落在节拍上。 用Playwright渲染:每帧3个子帧,分别在t减、t、t加1/240秒处,然后用ffmpeg tmix混合,以60fps实现真正的运动模糊。 放置每个音效时,使其测量出的峰值(而非文件起始)落在事件上。让音效在音乐下保持安静。响度归一化到-14 LUFS。 在完整渲染前检查20帧或更多。修复任何杂乱、重叠或难以阅读的地方。 绝不要在preserve-3d元素上设置opacity或filter,因为它们会将其扁平化并使两面都可见。 改为淡化其包装元素。 在运行时测量元素位置以实现准确的匹配剪辑。 只使用允许商用的音乐和音效。 向我询问输入,然后在编写任何代码之前,向我展示一个故事板,其中每个时间点都映射到节拍网格。
问我:我想要形状变形为的 8 到 12 个 UI 状态(例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、toast),黑白或单一强调色,以及一首约 120 BPM 的免版税歌曲(例如 Mixkit,可免费商用)。 Dribbble 级别的 UI 动效。一个形状,零剪辑:每个状态都是同一个元素在变形其尺寸、圆角和颜色,同时其内容以短暂模糊进行切换。 光标通过真实点击和拖拽驱动每一次变化。浅暖灰色画布,黑白组件,一款干净的 UI 字体(Geist)。 处处使用弹簧,只带极小的过冲。相机会缩放,使每个状态填满整个画面。最后一帧与第一帧一致,因此完美循环。 禁止:弹跳缓动、粒子爆发、辉光、UI 外框上的渐变、不匹配的图标描边、死时间、任何看起来像模板的东西。 120 BPM,7 小节,每一拍都有事情发生。 按钮 → 加载器 → 勾选 → 灵动岛 → 带播放/暂停变形的音乐播放器 → 拖动进度条 → 它变成一个音量滑块,拖过最大值时会拉伸 → 一个开关踩在拍点上切换 → 旋钮变成液态标签指示器 → 标签页展开成一张自我绘制的图表,悬停时显示工具提示 → 它折叠成 ⌘K → 输入以过滤 → 回车 → toast → 回到按钮。 一个 HTML 文件,正方形 1440x1440。每个样式都在 seek(t) 内根据时间计算:没有 CSS 过渡、没有计时器、帧与帧之间不携带状态。 弹簧使用闭式阶跃响应。一个多次改变目标的值是每次变化对应一个弹簧之和,因此它保持为时间的纯函数。 标签指示器的两个边缘遵循各自的弹簧,因此前缘会拉伸到后缘之前。对开关旋钮使用同样的技巧。 拖拽使用直接操纵:光标被按住时,值根据其位置计算。释放时,它从所在位置弹回。 用 numpy 分析歌曲以找到节拍网格,并从强拍开始。根据测得的峰值对齐每个 UI 音效。 用 Playwright 渲染:每帧 4 个子帧,用 ffmpeg tmix 混合以实现 60fps 的运动模糊。 在完整渲染之前,每拍渲染一帧。修复任何偏离网格、拥挤或难以阅读的地方。 永远不要在相机缩放或文本渲染的任何东西上放 will-change,否则纹理会模糊。 在变形容器内切换的文本需要自己的进入和退出时机,否则会重叠。 让最后一帧与第一帧完全相同,包括光标位置和速度,否则循环会卡顿。 向我询问输入,然后在写任何代码之前,在节拍网格上向我展示状态列表。
向我询问:我希望形状变成的 8 到 12 个 UI 状态(例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、吐司提示)、纯黑白或一种强调色,以及一首约 120 BPM 的免版税歌曲(例如 Mixkit,可免费用于商业用途)。 Dribbble 级别的 UI 动效。一个形状,绝不剪切:每个状态都是同一个元素在变形其尺寸、圆角和颜色,同时其内容以短暂的模糊进行切换。光标通过真实的点击和拖拽驱动每一次变化。浅暖灰色画布,黑白组件,一款干净的 UI 字体(Geist)。处处使用弹簧,最多只有极小的过冲。摄像机会缩放,让每个状态填满画面。最后一帧与第一帧一致,因此可以循环。 禁止:弹跳缓动、粒子爆发、发光、UI 外框上的渐变、不匹配的图标描边、空白时间、任何感觉像模板的东西。 120 BPM,7 小节,每一拍都有事情发生。 按钮 → 加载器 → 对勾 → 灵动岛 → 带播放/暂停变形的音乐播放器 → 拖动进度条 → 它变成一个音量滑块,拖过最大值时会拉伸 → 一个开关在节拍上翻转 → 旋钮变成一个液态标签指示器 → 标签页展开成一张自行绘制的图表,悬停时显示工具提示 → 它折叠成 ⌘K → 输入以筛选 → 回车 → 吐司提示 → 回到按钮。 1. 一个 HTML 文件,正方形 1440x1440。每个样式都在 seek(t) 内根据时间计算:没有 CSS 过渡,没有计时器,帧与帧之间不携带状态。 2. 弹簧是闭式阶跃响应。一个多次改变目标的值,是每次变化对应一个弹簧的总和,因此它始终保持为时间的纯函数。 3. 标签指示器的两个边缘由不同的弹簧驱动,因此前缘会拉伸到后缘之前。对开关旋钮使用同样的技巧。 4. 拖拽是直接操控:光标被按住时,值根据其位置计算。释放时,它从当时所在的位置弹回。 5. 用 numpy 分析歌曲以获得节拍网格,并从强拍开始。根据测得的峰值放置每个 UI 音效。 6. 用 Playwright 渲染:每帧 4 个子帧,用 ffmpeg tmix 混合以实现 60fps 的运动模糊。 7. 在完整渲染之前,每一拍渲染一帧。修正任何偏离网格、拥挤或难以阅读的地方。 绝不要在摄像机会缩放的对象上使用 will-change,否则文字会渲染模糊。在变形容器内切换的文字需要有自己的进入和退出时机,否则会重叠。让最后一帧与第一帧完全相同,包括光标位置和速度,否则循环会卡顿。 向我询问输入,然后在写任何代码之前,先在节拍网格上向我展示状态列表。
向我询问: 用于字标的单字品牌名(动词效果最佳) 9 到 12 张高分辨率照片 一首约 120 BPM 的免版税歌曲,带有 drop 和安静的 breakdown(Mixkit,可免费商用) 一段免费素材库中纯色墙面配移动植物阴影的视频片段(Pexels) 一支 Apple 主题演讲风格的发布短片,仅 2D,一镜到底。 每个场景都从前一个场景中生长出来:没有任何淡出、模糊或剪切。 物体通过变形转换:文字从遮罩线中升起,图标以弹簧效果从零弹出,条形横向绘制,页面推入,一个黑色形状淹没整个画面,然后收缩进入下一个场景。 暖调米白画布,黑色 UI,照片上覆有 iOS 26 液态玻璃。 字标使用 Archivo(wdth 125,字重 800),UI 使用 Geist。 一个光标通过真实的点击、拖拽和长按来控制每一次变化。 镜头以屏幕工作室风格缩放,使每个瞬间填满方形画面,光标随之缩放。 禁止:交叉淡化、模糊入场、亮度“显影”、3D 翻转、粒子、辉光、超过 1 秒的停留、任何看起来像模板的东西。 120 BPM,54 拍,每一拍都有事情发生。 开场:字标像手风琴一样挤入自己的句点,圆点扩展成黑色胶囊,一个标签在其中升起。 点击:六片虹膜叶片在标签上闭合,然后啪地打开到一张照片上。 圆形变成方形,缩小,网格从它背后像纸质地图一样展开(中心、加号、四角),重排为便当格,一次点击放大到其中一个格子,正好落在 drop 上。 玻璃:一个玻璃单词逐字母出现,融化成水滴,拉伸成玻璃工具栏。 调整图标将其变为滑块。 拖拽将照片从白天重新打光到黄金时刻(两张对齐的镜头),旋钮在被按住时变成玻璃镜头。 它升入一个玻璃球体,下一张照片在其中以圆形打开,球体扩展成锁屏:玻璃时钟数字、日期,以及一个拉伸成玻璃音乐播放器的 home 条。 舞台:锁屏向后拉入一部手机(边框从屏幕边缘生长出来)。 灵动岛像液体一样拉伸、掐断、飞过并扩展成一个 Mac 窗口,像百叶窗一样卷起。 长按壁纸,将其拖到 Safari 标签页上,页面推入,放下后它成为落地页的主视觉。 滚动:主视觉变形为产品卡片上的带框印刷品,卡纸和边框从照片边缘生长出来。 选择边框颜色(颜色横向涂满)和尺寸,然后导航按钮飞入“订购印刷品”。 订单:一个黑色形状连续变形: 已订购 ✓ → 打印中 % → 运送中(一辆货车在路线上)→ 已送达 ✓ 墙面:已送达的圆形从边缘到边缘淹没画面,保持黑色一拍,然后收缩成挂在真实墙面素材上的带框印刷品。 同一个虹膜打开到印刷品上,再次闭合,边框淹没屏幕并收缩成胶囊 → 圆点 → 字母弹回,落在节拍回归上。 最后一帧 = 第一帧。 一个 HTML 文件,方形 1440x1440。每个样式都在异步 seek(t) 内部根据时间计算:没有 CSS 过渡,没有计时器,帧与帧之间没有状态。 弹簧使用闭式阶跃响应。具有多个目标的值是每次变化对应一个弹簧之和,因此它保持为时间的纯函数。 液态玻璃:每个玻璃元素持有其背后场景的自身克隆,通过三个略微不同比例的 feDisplacementMap 用 SVG feImage 位移贴图(圆角矩形距离场)进行过滤,以产生色差边缘,外加边缘光。玻璃字母:每个字形的 canvas 距离场生成贴图、遮罩和高光。 粘稠效果:模糊 + alpha 阈值,然后将源合成在上方,使玻璃内部保持锐利。 虹膜:六片叶片围绕六边形光圈。每片叶片使用其两个顶点、两条边延长线以及它们之间的短弧。 字标挤压:每个字母以相同系数向圆点移动,其绘制宽度随之变化(收窄 wdth 轴,缩放其余部分),使字母保持相接。 素材:全部重新编码为全帧内(ffmpeg -g 1),作为 blob URL 加载,在绘制每一帧之前等待 'seeked'。 声音:每个事件使用下载的音效(Mixkit),绝不合成,每个按其测得的峰值定位。歌曲从强拍开始:缩放命中 drop,墙面位于 breakdown,字标随节拍回归。响度归一化到 -14 LUFS。 使用 Playwright 渲染:每帧 4 个子帧用 ffmpeg tmix 混合,60fps。每拍检查一帧,然后扫描单帧跳变(帧差峰值达到相邻帧的 3 倍)。 backdrop-filter: url() 在 Chromium 中会误读位移贴图,因此改为克隆场景。 淹没必须超出四角过扫,并耗时约 0.3 秒,否则半个屏幕会在一帧内改变。 带有 visibility: visible 的子元素会透过隐藏的父元素显示,因此使用 inherit。 在变形形状内部交换的文字需要自己的遮罩。 python http.server 无法对视频进行范围寻址,因此使用 blob URL。 向我询问输入,然后在编写完整影片之前向我展示节拍图和 4 张静帧(开场、玻璃、舞台、墙面)。
你是首席动态设计师和实时图形工程师。你完全用 three.js 制作产品发布影片,每一帧都是代码,达到品牌自身影片的标准。你用测量和独立评审来证明质量,而不是形容词。 - 产品,以及影片可以陈述的 3-5 个事实(逐字使用,不得虚构) - 要超越的参考影片 - 时长、画幅和分辨率 - 绝不出现:[标志、人物、你不拥有版权的素材] 逐帧研究参考影片,并将其转化为数字:剪辑节奏、摄影机速度、主角运动曲线、字体大小与时机、舞台颜色。这些数字就是标准。测量它,绝不复制它。 - 先做分镜:一张表,包含时间、镜头、它证明了什么以及切出点。每个镜头 2-3 秒,第 0 帧就已经是主打镜头 - 一个寻址时钟:每个像素都是时间的纯函数 - 每个元素(设备、其屏幕 UI、每个镜头、字体)都先在自己的实验室中单独构建,然后再加入影片 - 屏幕 UI 是代码,字体绘制在 canvas 上,每个阈值都是交叉淡化(硬切会闪一帧) - 构建者和评审始终是独立的代理。评审每轮都重新开始,根据参考影片评判渲染帧,为其打分,并指出唯一最大的差距。构建者只修复这一点 - 盲测:把你的帧与参考影片的帧混合。如果评审能分辨出哪个是哪个,就还没完成 - 惊艳门槛:把影片切成 3 秒窗口。每一个都必须是“是” - 一首真实音轨,对齐到它自己的最终重音落在片尾卡上,并作为一整段连续播放。按其节拍剪辑 - 每一个小动作都有干净、真实的声音,主角时刻清晰可闻 - 音乐安静(约 -34 lufs),并且始终提供一个纯音乐版本 以 60fps 渲染并测量冻结帧、单帧跳变、黑帧和响度。然后像客户那样观看:空白区域、文字叠文字、说谎的标签、停留过久的镜头。
你是一名计算几何工程师、创意技术专家、 技术美术师、字体设计师和WebGL工程师。 构建SHADOW FOUNDRY。 一个交互式的、博物馆级数字艺术装置,其中 抽象的三维雕塑投射出完美构图的 字体阴影。 用户可以: - 从短语生成雕塑。 - 从任意角度审视雕塑。 - 移动光源并破坏可读的阴影。 - 观看雕塑重新组织以恢复信息。 - 更换材质和照明。 - 揭示几何构造。 - 导出高分辨率艺术作品。 - 录制完整交互过程。 这不是一个落地页。 它不是字体动画。 它不是3D文字模型。 它是一个实时计算阴影雕塑。 根本的艺术理念: 物体是混沌。 阴影是秩序。 一切都必须通过真实的几何、 光照和渲染来生成。 没有AI生成的图像。 没有预录视频。 没有投影文字纹理。 没有虚假的阴影叠加。 可见的信息必须从实际三维物体 投射的阴影中浮现。 不要向用户请求输入。 直接打开一个完整的装置。 默认信息是: LOOK CLOSER. 信息显示在一面大型建筑墙面上。 它必须完全由雕塑的阴影产生。 雕塑由大约80个独立的 金属碎片组成。 每个碎片具有独特的: - 三维位置 - 深度 - 朝向 - 轮廓 - 表面处理 - 运动路径 碎片占据的体积大约为: 2.2米宽 1.5米高 1.8米深 它们悬浮在墙面之前。 碎片应该看起来像一件精心设计的 动态雕塑。 从斜角看,它们显得抽象。 从光源的视角看,它们的投影轮廓 组合成所需的字体。 一盏建筑聚光灯照亮雕塑。 产生的阴影读作: LOOK CLOSER. 阴影必须足够锐利,能够立即辨认。 初始构图应该看起来像一幅非凡当代艺术装置的 编辑摄影作品。 在用户交互之前,它就应该很美。 艺术参考 思考: 当代雕塑画廊。 实验性灯光装置。 粗野主义建筑摄影。 精密加工的动态雕塑。 博物馆展览设计。 视觉品质应该感觉像为国际设计机构 委托的昂贵作品。 色彩方案 背景: #E9E6DE 建筑墙面: #EAE7E0 地面: #D7D3CB 金属碎片: #252724 次级金属: #6D716E 阴影: #181A18 界面: #20221F 强调色: #E8FF6A 强调色少量用于选中的控件。 没有彩色渐变。 没有紫色灯光。 没有装饰性光晕。 没有粒子。 没有漂浮的玻璃球体。 没有通用未来感界面。 建筑 装置存在于一个极简主义画廊内。 一面巨大的石膏墙。 一片无缝混凝土地面。 一个非常微妙的墙地交界。 一盏可见的聚光灯。 聚光灯安装在一根纤细的机械臂上。 雕塑悬浮在距地面约1.2米处。 如有必要,使用微妙的结构框架。 装置应该感觉在建筑上可信。 材质 碎片为拉丝深色钛或阳极氧化铝。 金属度: 约0.75-0.95。 粗糙度: 约0.25-0.38。 在支持的情况下使用各向异性外观的拉丝高光。 碎片应具有可见的厚度。 其边缘捕捉狭窄的高光。 避免完全平坦的黑色块面。 添加微小的表面粗糙度变化。 不要添加过多的划痕或污渍。 墙面 墙面具有几乎不可察觉的石膏纹理。 其表面不应是完美的计算机生成白色。 使用程序化低频表面变化。 纹理不得与阴影竞争。 阴影是主角。 使用一个透视相机。 参考视口: 1440x900。 相机焦距等效值: 约65毫米。 初始相机位置: 略微位于雕塑右侧。 偏离墙面法线约24度。 相机高度: 约1.6米。 构图应同时展现: 1. 实体雕塑。 2. 其在墙面上的阴影。 雕塑占据构图的左半部分。 可读阴影占据右半部分。 不要使雕塑和阴影过度重叠, 以致错觉难以理解。 用户必须能够环绕相机。 环绕限制: 水平: 从默认视角-55至+55度。 垂直: -20至+30度。 保持相机目标靠近装置中心。 使用平滑的、临界阻尼的相机运动。 没有夸张的惯性。 没有持续的自动旋转。 没有电影式相机抖动。 提供三个相机预设: 雕塑: 强调实体碎片的斜视角。 阴影: 强调可读信息的近乎正面视角。 工作室: 原始平衡构图。 相机过渡应耗时约1.1秒。 使用平滑的五次缓动。 绝不在相机位置之间切换。 默认短语使用极粗的无衬线字体。 优先使用合适的开源许可字体。 使用具有以下特征的字体: - 强烈的 uppercase 几何结构 - 清晰的字怀 - 粗重的笔画 - 最少的装饰细节 - 出色的可读性 字体应具有建筑感。 默认布局: LOOK CLOSER. 两行。 第二行略宽。 两行在视觉上居中。 阴影总宽度: 约2.1米。 阴影总高度: 约1.1米。 字距: 紧凑但不重叠。 行距: 约为大写高度的0.95倍。 句号超大。 它应该感觉像
### 你的任务 设计并开发一个名为 **SIGNAL / NOISE** 的实验性数字出版物。 它是一本关于技术、人工智能、数字文化与互联网未来的独立杂志。 我们希望打造一个在视觉上能够与最优秀的数字编辑设计项目相媲美的网站。一个有态度的体验,而不是又一个通用的 SaaS 落地页。 你拥有创作自由来决定艺术指导、字体排印、构图、色彩方案、动画和视觉系统。 我不需要你向我解释你会如何设计这个网站。**我要你把它构建出来。** ### 产品 网站将包含四个主要组成部分: **1. 编辑封面** 一个立即确立出版物身份的首屏。 必须包含名称 SIGNAL / NOISE、期号(ISSUE 001)、一篇主打编辑内容,以及一个令人难忘的视觉构图。 **2. 文章索引** 精选六篇虚构但可信的关于技术与数字文化的文章。 不要使用六张完全相同的卡片。设计一个编辑构图,能够区分主打故事、次要文章和简短内容。 **3. 阅读体验** 至少开发一篇完整文章,可从封面进入。 文章标题:"The Internet Is Becoming a Place Without People"。 包含导语、若干段落、突出引语以及整合在内容中的视觉素材。 必须是一次愉悦而精致的阅读体验。 **4. 导航与交互** 实现功能性导航、过渡效果、悬停状态、视觉指示器以及细微的交互细节。 动画必须为体验增添价值,而非无意义的装饰。 ### 技术要求 - React、TypeScript 和 Tailwind CSS。 - 可以使用动画和图标库。 - 面向桌面端和移动端的响应式设计。 - 基本无障碍性、键盘导航以及对 `prefers-reduced-motion` 的支持。 - 不要只做表面能用的静态界面。 - 不要使用其他网站的截图来替代设计。 - 可以使用照片或外部视觉素材,但要将它们整合到连贯的艺术指导中。 - 项目必须能够在本地运行。 ### 设计标准 我们追求: - 独特且可辨识的视觉身份。 - 卓越的字体层级。 - 有意图地利用空间的构图。 - 实验性与可用性之间的良好平衡。 - 精心打磨的微交互。 - 封面、索引和文章之间的一致性。 - 一个经过设计的移动版本,而非简单压缩。 避免: - 模板的通用外观。 - 六张完美对齐的卡片。 - 没有功能的装饰性渐变。 - 妨碍阅读的炫目效果。 - 不必要的 UI 组件。 - AI 产品落地页的典型外观。 ### 创作自由 你不需要遵循任何具体的视觉参考。 由你来决定 SIGNAL / NOISE 作为编辑身份意味着什么,以及它应如何在视觉上表达。 你可以是实验性的、极简主义的、粗野主义的、精致的,或者采用完全不同的方向。 重要的是你的决策作为一个整体是有意义的。 ### 交付物 构建完整项目。 完成后,确保它能够正常运行,并提供一份关于主要艺术指导决策的简要说明(最多 200 字)。 **不要向我提问,也不要请求对视觉方向的批准。做出决策并执行。**
向我询问:用于字标的单字品牌名(动词效果最佳)、9 到 12 张高分辨率照片、一首约 120 BPM 的免版税曲目,带有 drop 和安静的 breakdown(Mixkit,可免费商用),以及一段免费素材片段,内容是带有移动植物阴影的素墙(Pexels)。 苹果发布会风格的发布短片,仅 2D,以一镜到底的方式拍摄。每个场景都从上一个场景中生长出来:没有淡入淡出、模糊或剪辑。物体进行变形。文字从遮罩线上升起,图标从零弹起,条形横贯屏幕绘制,页面向前推进,一个黑色形状填满画面,然后缩小进入下一个场景。使用暖调米白画布、黑色 UI 和覆盖在照片上的 iOS 26 液态玻璃。字标使用 Archivo(wdth 125,weight 800),UI 使用 Geist。光标通过真实的点击、拖拽和长按触发每一次变化。以屏幕工作室风格缩放镜头,让每个瞬间填满方形画面,并让光标随之缩放。 禁止:交叉淡化、模糊进入、亮度“显影”、3D 翻转、粒子、辉光、超过 1 秒的停留、任何感觉像模板的东西。 120 BPM,54 拍,每一拍都有事情发生。 开场:字标像手风琴一样压缩进它自己的句点。圆点扩展成黑色胶囊,一个标签在其中升起。点击:六片虹膜叶片在标签上闭合,然后猛然打开到一张照片上。圆形变成方形并缩小。一个网格像纸质地图一样在它后面展开(中心、加号、角落),重新排列成便当格,一次点击放大到其中一个格子,正好落在 drop 上。 玻璃:一个玻璃质感的单词逐字母出现,然后融化成水滴,水滴拉伸成玻璃工具栏。调整图标将其变成滑块。拖拽将照片光照从白天转变为黄金时刻(两张对齐的镜头),同时被握住的旋钮变成玻璃镜头。它上升为玻璃球体,下一张照片作为圆形在其中打开,球体生长为锁屏,带有玻璃时钟数字、日期和一条延伸为玻璃音乐播放器的 home bar。 舞台:锁屏向后拉远露出手机,边框从屏幕边缘生长出来。灵动岛像液体一样拉伸、掐断、飞过并扩展为像百叶窗一样卷起的 Mac 窗口。长按壁纸并将其拖到 Safari 标签页上。页面推入;当你放下图像时,它成为落地页的 hero。滚动:hero 转变为产品卡片上的带框印刷品,卡纸和边框从照片边缘生长出来。选择边框颜色(它会涂满整个区域)和尺寸,然后导航按钮飞下并变成“Order print”。 订单:一个黑色形状不断变化:Ordered ✓ → Printing % → On its way(路线上的货车)→ Delivered ✓。 墙面:已送达的圆形扩展直到黑色填满画面,停留一拍,然后缩小成挂在真实墙面素材上的带框印刷品。同一虹膜打开到印刷品上并再次闭合。边框填满屏幕,收缩成胶囊 → 圆点 → 字母在回归的节拍上弹回。最后一帧 = 第一帧。 1. 一个 HTML 文件,方形 1440x1440。在异步 seek(t) 内部根据时间计算每个样式:没有 CSS 过渡、计时器或帧之间携带的状态。 2. 对弹簧使用闭式阶跃响应。当一个值有多个目标时,每次变化添加一个弹簧,使其保持为时间的纯函数。 3. 液态玻璃:每个玻璃元素保留其背后场景的自己的克隆。通过三个 feDisplacementMap 以略微不同的缩放对该克隆应用 SVG feImage 位移贴图(圆角矩形距离场)进行滤镜处理,以获得色差边缘,然后添加边缘光。对于玻璃字母,使用每个字形的 canvas 距离场来构建贴图、遮罩和高光。 4. Goo:应用模糊和 alpha 阈值,然后将源合成在上方,使玻璃内部保持清晰。 5. 虹膜:围绕六边形孔径放置 6 片叶片。每片叶片使用其两个顶点、两条边延长线以及它们之间的短弧。 6. 字标挤压:将每个字母以相同因子移向圆点,并调整其绘制宽度以匹配(收窄 wdth 轴,缩放其余部分),保持字母相互接触。 7. 素材:将其全部重新编码为全帧内(ffmpeg -g 1),作为 blob URL 加载,并在绘制每一帧之前等待“seeked”。 8. 声音:每个事件使用下载的 SFX(Mixkit),绝不合成,并根据其测得的峰值放置每一个。在小节强拍上开始歌曲:让缩放落在 drop 上,将墙面放在 breakdown 中,并让字标随节拍回归。响度标准化到 -14 LUFS。 9. 使用 Playwright 渲染:以 60fps 使用 ffmpeg tmix 每帧混合 4 个子帧。每拍检查一帧,然后寻找单帧跳变(帧差峰值比其相邻帧高 3 倍)。 backdrop-filter: url() 在 Chromium 中会误读位移贴图,因此改为克隆场景。泛光需要延伸到角落之外并花费约 0.3 秒;否则半个屏幕会在单帧内变化。设置为 visibility: visible 的子元素可能透过隐藏的父元素显示,因此使用 inherit。在变形形状内交换文本需要自己的遮罩。python http.server 无法对视频进行范围寻址,因此使用 blob URL。 向我询问输入,然后在编写完整影片之前向我展示节拍图和 4 张静帧(开场、玻璃、舞台、墙面)。
向我询问:我想要形状变换成的 8 到 12 个 UI 状态(例如按钮、加载器、播放器、滑块、开关、标签页、图表、命令面板、吐司提示),纯黑白或一种强调色,以及一首约 120 BPM 的免版税歌曲(例如 Mixkit,可免费商用)。 Dribbble 级别的 UI 动效。一个形状,不剪切:每个状态都是同一个元素在变形其尺寸、圆角和颜色,同时其内容以快速模糊进行切换。 光标通过真实点击和拖拽控制每一次变化。浅暖灰色画布,黑白组件,一种干净的 UI 字体(Geist)。 处处使用弹簧,只有极小的过冲。相机缩放,使每个状态填满整个画面。最后一帧与第一帧一致,因此完美循环。 禁止:弹跳缓动、粒子爆发、发光、UI 外框上的渐变、不匹配的图标描边、死时间、任何看起来像模板的东西。 120 BPM,7 小节,每一拍都有事情发生。 按钮 → 加载器 → 勾选 → 灵动岛 → 音乐播放器,带有播放/暂停变形 → 拖动进度条 → 它变成音量滑块,拖过最大值时会拉伸 → 一个开关在节拍上翻转 → 旋钮变成液态标签指示器 → 标签页扩展成一张自行绘制的图表,悬停时显示工具提示 → 它折叠成 ⌘K → 输入以过滤 → 回车 → 吐司提示 → 回到按钮。 一个 HTML 文件,正方形 1440x1440。每个样式都在 seek(t) 内根据时间计算:没有 CSS 过渡,没有计时器,帧与帧之间不携带状态。 弹簧使用闭式阶跃响应。一个多次改变目标的值是每次变化对应一个弹簧的总和,因此它仍然是时间的纯函数。 标签指示器的两个边缘遵循不同的弹簧,因此前缘会拉伸到后缘之前。对开关旋钮使用同样的技巧。 拖拽使用直接操纵:光标被按住时,值根据其位置计算。释放时,它从所在位置弹回。 用 numpy 分析歌曲以找到节拍网格,并从强拍开始。根据测得的峰值定位每个 UI 音效。 用 Playwright 渲染:每帧 4 个子帧,用 ffmpeg tmix 混合以实现 60fps 的运动模糊。 在完整渲染之前,每一拍渲染一帧。修复任何偏离网格、拥挤或难以阅读的地方。 永远不要在相机缩放的对象上放置 will-change,否则文字会变模糊。 在变形容器内切换的文字需要自己的进入和退出时机,否则会重叠。 使最后一帧与第一帧完全相同,包括光标位置和速度,否则循环会卡顿。 向我询问输入,然后在编写任何代码之前,在节拍网格上向我展示状态列表。

关于 Claude Opus 5.5

Claude Opus 5.5 做动效的路子和视频模型完全相反:不靠扩散像素去逼近一个画面,而是把动画写成代码——HTML、Canvas、SVG、Remotion——由代码确定性地渲染出运动。文字永远锐利,节拍精确到帧,品牌色是一个十六进制值而不是一种期望。把渲染结果录屏,就是成片。

这颠覆了「好提示词」的定义。扩散视频提示词描绘一个镜头;Opus 5.5 的动效提示词读起来像你递给动效设计师的简报:可用的素材清单、时长与节拍、每张卡片上出现的文案、参考风格、缓动手感。空泛的形容词在像素空间还能蒙混,在代码空间会直接死掉——「做得炫一点」只有当简报写清楚什么炫、什么时候炫、炫多久时才可执行。

回报是迭代精度。因为产物是代码,每一句后续指令都是一次外科手术式修改——「logo 多停两拍」「第三张卡片改成从右侧弹入」——只有那个参数在变。上方画廊收录了经过验证的 Opus 5.5 动效提示词和真实录屏输出;留意最强的几条写的是结构与节拍,而不是画面意象。

如何写好 Claude Opus 5.5 提示词

  1. 1先开素材清单:logo 文件、十六进制品牌色、字体、产品截图、它们所在的文件夹。代码只能画出简报交到它手上的东西——没列的素材等于不存在。
  2. 2用节拍给时间线做预算,别用感觉:「15 秒——2 秒 logo 揭示,4 秒三张特性卡轮播,3 秒价格卡,尾帧定格」。节拍表是你能给出的最强约束。
  3. 3屏幕文案逐字写进简报。和像素模型不同,代码渲染文字一字不差——你写的标题、标语、CTA 就是最终上线的那几个词。
  4. 4风格锚到参照物而不是形容词:「苹果发布会 showreel 的气质、深色纯底、一个强调色」永远赢过「简洁现代」。
  5. 5明确写出输出形态——「一个自动播放动画的自包含 HTML 单页」。它决定你拿到的是脚手架 demo 还是直接能录屏的交付物。
  6. 6精修用后续对话而不是重写整份简报:「开场放慢半秒」「logo 的缓动换成弹簧感」。代码在对话间保留,修改会累积而不是归零。

常见问题

Opus 5.5 的动效提示词和视频模型提示词有什么区别?

视频模型提示词描述一个画面然后祈祷像素配合;Opus 5.5 的提示词是给代码写的设计简报,动画由代码确定性渲染。你放弃的是照片级质感,换来的是精确的文字、精确的节拍,以及在后续对话里单独修改任何一个参数的能力。

不会写代码能用 Claude Opus 5.5 做动效吗?

可以。你只写简报——素材、节拍、文案、风格——Opus 5.5 自己写并迭代 HTML/Canvas/SVG 代码。读得懂代码对深度定制有帮助,但上方画廊里那些验证过的提示词都是纯自然语言简报。

怎么把生成的动画变成视频文件?

动画在浏览器里渲染,任何录屏工具都能把它录成视频。想录得干净,就在简报里要求固定时长和自动播放的单页输出——然后从开头到定格尾帧完整录一遍即可。

做产品 showreel 之前要准备什么?

先备齐品牌素材:logo、十六进制色值、产品图、逐字营销文案。然后定节拍结构——什么东西按什么顺序出现多久。有真素材和节拍表的简报,永远胜过一大段美学形容。