Claude Opus 5.5 Code & Artifact Prompts

帮我使用 JavaScript 创建一个主题为「什么是 Transformer」的自包含交互讲解页面（可在浏览器中当作「视频式」分步播放，也可自由探索）。

要求：
1. 单个 HTML 文件，vanilla JS + Canvas 2D（必要时可用 SVG 叠层做文字），无外部图片/字体/视频模型。
2. 结构：输入句子 → Token 化 → Embedding + 位置编码 → 多头 Self-Attention（显示 Q/K/V 与 softmax 权重热力图）→ 残差与 LayerNorm → FFN → 输出 logits。每一步可点击或拖动时间轴 seek(t) 进入。
3. 交互：点击某个 token 高亮其对所有 token 的 attention 权重；切换 head 索引；显示数值矩阵的小窗（可缩放）。
4. 视觉：深色背景、高对比配色、等宽数字；动画用确定性函数计算，禁止 CSS transition 驱动核心数据。
5. 受众：有基础线性代数的大学生；附 3 条「看完应能解释」的学习目标。
6. 交付：完整源码 + 简短 README（如何本地打开、如何录屏导出 MP4 的建议帧率）。先渲染/预览前 20 秒等价的分步演示，检查公式与标签无溢出，再补全后续步骤。

请先向我询问：
• 我的产品 + URL
• 8–12 个能讲述其产品故事的 UI 状态
• 每个状态中显示的真实数据（禁止编造指标）
• 品牌颜色 + 字体 + 强调色
• 所需格式（1:1, 16:9, 9:16）

然后交付：
一个 HTML 文件。一个 canvas。一个 draw(t) 函数。
无 CSS 过渡。无 setInterval 计时器。帧与帧之间不保留未在 draw(t) 中计算的隐藏状态。
单一形状，永不切割成多个独立图层：每个状态都是同一元素在改变大小、圆角和颜色，同时内部内容发生切换。
由光标驱动序列，包含真实的点击、输入和一次拖拽；光标位置与速度在最后一帧必须与第一帧完全一致（若做循环）。

技术约束：
- 所有几何与颜色由 seek(t) 闭式计算；弹簧用阶跃响应叠加，不用 bounce easing。
- 使用 Geist 或我提供的品牌字体栈；暖灰背景。
- 先输出分镜表（每状态 1 句核心信息 + 停留时长），再写代码。
- 先导出 5 秒低清预览，检查文字可读性与状态衔接，再完成全片。

请用 Opus 5.5 构建一个「交互式相机镜头实验室」单页应用，向摄影初学者解释对焦与景深。

功能：
1. 侧视简化的镜头组（多片透镜）+ 场景中有近、中、远三个物体（带尺寸标注）。
2. 对焦环（或滑块）连续可调：拖动时镜片间距/焦点位置变化，画面实时更新景深——只有落在焦平面上的区域清晰，其余呈现可理解的虚化（可用 CoC 近似，而非物理级 ray tracing）。
3. 显示辅助线：焦平面位置、hyperfocal 提示（可选开关）、当前 f-number 与焦距（可用预设档位）。
4. 无外部图片；图形用 Canvas 2D 绘制；所有状态由参数 t 或对焦距离 d 确定性计算。
5. 底部 3 条文字提示对应「对焦在近处/远处」时环应如何旋转；支持键盘左右微调。

交付 HTML + 内联 JS。先自测对焦环全行程无跳变，再在 390px 宽手机视口检查控件不重叠。

制作一支 engaging、light、entertaining 的 line-art 动画，快速回顾中华五千年历史，并配上合适的背景音乐（可使用 Web Audio 生成简单氛围或预留我提供的音轨接口）。

要求：
1. JavaScript + Canvas 2D，单 HTML；无外部插画素材。
2. 先给出时代大纲（朝代/时期 + 1 句关键词），再映射到时间轴镜头：每次时代切换有独特转场（卷轴、印章、河流等 metaphor 任选但需统一线宽）。
3. 字幕：中文为主，关键年代与人物名必须可读；禁止堆砌无法辨认的小字。
4. 事实：列出可能有争议或需我确认的 5 条史实假设；不要把未核对细节写成定论。
5. 输出可重复渲染的 draw(t) 或帧序列命令，并说明如何用 FFmpeg 从帧序列合成 MP4。

Create a self-contained retro pixel-art adventure platformer in one offline HTML file with vanilla JavaScript and Canvas 2D.

Specs:
- Logical resolution 160×90 (or 128×96); integer-scale to fit window; imageSmoothingEnabled = false; all drawing on integer coords.
- Fixed ~32-color palette; no gradients, rotation blur, or antialiasing cheats.
- Player: 12×8-ish sprite with idle/run/jump/fall cycles (quantized 8–12 fps feel on 60 Hz sim).
- One small dungeon level: tiles, crates, spikes, key-door, 2 enemy types with simple AI states.
- Physics: AABB grid collision, variable jump height, coyote time, jump buffer.
- Juice: screen shake, dust particles (pooled), hit stop 2 frames.
- UI: minimal hearts, coin count; restart on R.
- Deliver playable build + comment where to extend levels. Test Chrome desktop 1280×720. No external assets.

请根据我提供的 SaaS 产品说明 [粘贴名称、一句话定位、3 个真实功能、Logo 色] 制作一个现代 Landing Page（单 HTML 或 HTML+CSS+JS，可内联 Tailwind CDN）。

结构：
- Hero：动态背景（Canvas 2D 噪声网格或 CSS gradient animation），主标题 + 副标题 + 双 CTA（Primary/Secondary）。
- 3 张交互卡片：hover 时轻微 3D tilt（transform）与图标 loop 动画；内容必须对应真实功能，禁止虚构客户数/评分。
- Social proof 区：仅使用我提供的引用或留 placeholder 并标注「需替换」。
- Pricing teaser：链接到 #pricing 锚点。

约束：移动端优先；Lighthouse 友好；支持 prefers-reduced-motion 关闭动画；暗色模式 optional。
交付源码 + 列出仍需产品/法务核实文案。

我要重构以下模块 [粘贴路径/代码/性能问题描述]。请作为 Staff Engineer：

1. 用 5 条以内复述现状与目标（延迟、内存、可维护性）。
2. 列出必须保持的不变量与边界条件（含 3 个反例输入）。
3. 给出 2 种方案对比（复杂度、风险、测试成本），推荐其一。
4. 输出分 PR 的实施顺序，每个 PR 附测试清单与回滚方式。
5. 最后给出核心算法的伪代码与关键数据结构变更图（文字描述即可）。

禁止直接输出大段未解释的最终代码；先把计划写清楚，等我确认再写 Patch。

构建一个单文件 HTML「动态 SVG 仪表盘」，展示我提供的 CSV 样例数据 [或生成可替换的 mock 数据，字段需文档化]。

必须包含：
1. 至少 3 种图表：折线（带 scrubber 竖线）、堆叠面积、横向条形图；全部 SVG 绘制，不用 Chart.js/ECharts。
2. 主题：CSS 变量（oklch 或 hsl）驱动颜色；暗色/亮色切换。
3. 动画：数据切换时 path 使用 interpolate（≤400ms）；prefers-reduced-motion 时禁用。
4. 交互：hover 显示精确数值；点击图例过滤系列。
5. 布局：1280 宽桌面 + 375 宽单列折叠。

交付完整 HTML，并在注释中说明如何把 CSV 解析接入。

设计一个「多智能体协作」编排方案，用于完成 [项目目标，例如：从 Figma 到可部署 Next 站]。

输出：
1. 角色表：Researcher / Implementer / Reviewer / QA（可增减），每角色工具权限与禁止事项。
2. Handoff 协议：JSON schema（status, artifacts[], open_questions[], next_owner）。
3. 并行策略：哪些任务可并行、哪些必须串行；最大并行度 3。
4. 共享记忆：文件路径约定（docs/agent-state.json）与冲突合并规则。
5. 终止条件：Definition of Done + 必须通过的检查（typecheck, lint, e2e smoke）。

给 Orchestrator 的首条用户消息模板（可直接复制）和 2 个 failure 恢复剧本（agent 超时、结论互相矛盾）。

沿用「高中地理大气环流 line-art 讲解片」的制作方式，但主题换成以下物理竞赛题：

[粘贴完整题目与标准答案若已知]

要求：
1. 先列已知/未知/假设（显式写出近似条件）。
2. 受力图或几何图逐元素出现；每一步推导写清公式编号，动画与标注同步。
3. Canvas 2D 线稿风格，轻音乐；可选 TTS 接口占位（.env + TTS.md 模式，不读取密钥文件）。
4. 结尾 10 秒：数值代入与量纲检查；列出「人工必须复核」的步骤。
5. 输出源码 + 分镜时间轴 + 最终答案；手机竖屏检查公式可读性。

Create one standalone Three.js/WebGL HTML file: a polished miniature prehistoric island.

Include: varied terrain, forest, waterfall, pond, volcano, research station, nests, transparent underwater cross-section with seabed life.
Dinosaurs and pterosaurs with hierarchical rigs, stance/swing gait, terrain sampling, IK, weight shifts, obstacle-safe paths—no sliding or floating.
Water: deep visible volume, waves, Fresnel, caustics, foam; fix transparency sorting.
Controls: orbit/zoom/follow, feeding, drinking/resting, hatching demo, day/sunset/night, weather, pause/reset.
UI: compact responsive panel; audio only after user gesture.
Performance: instanced vegetation, restrained postprocessing.
Deliver index.html (+ inline or single bundle). Verify in desktop Chrome: console clean, all controls exercised.

Generate a cinematic Antikythera underwater exploration scene entirely in one HTML file with Three.js.

Requirements:
- Procedural geometry for ruins, mechanisms, sand, bubbles; no external models.
- Volumetric-feel lighting: god rays, caustics animation, particulate matter.
- Slow camera dolly with parallax; optional mouse orbit limited ±15°.
- Procedural audio hum (Web Audio) gated by user click.
- Deterministic seed for replay; expose seed in query string.
Process: render 5 contact-sheet stills at different times; fix z-fighting and exposure; then deliver final HTML.

我会上传一张投石机/弹射器草图 [或描述结构]。请在单 HTML Canvas 2D 中重建可交互模拟：

- 可调参数：臂长、配重质量、发射角、摩擦系数（滑块 UI）。
- 物理：简化刚体 + 能量守恒检查；发射后绘制轨迹 dotted line 与落点标记。
- 「发射」按钮 + 重置；显示最大高度与射程估算。
- 视觉风格接近草图线稿但可交互；禁止外部图片。
- 列出简化假设与误差来源。先在 10 次随机参数下检查无 NaN。

我提供一篇论文 PDF/链接 [粘贴]。请制作 3–5 分钟入门向 explainer 视频工程：

1. 先列 5 条核心 claim + 引用段落；标注需我确认的细节。
2. 选 Manim 做画面；旁白用 edge-tts 或 Kokoro（给出 install 命令）；字幕来自同一份时间轴 SRT。
3. 分镜：motivation → method diagram → key equation step-by-step → limitation → takeaway。
4. 导出：manim 渲染命令、narration.wav、final.mp4 ffmpeg 命令。
5. 禁止把未经验证的公式当定论；公式动画每步停 1.5s 供阅读。