你把"画一幅赛博朋克风格的清明上河图数字长卷"发给代码助手，几秒后拿到一段完整的 Canvas 代码。双击打开，汴京的夜色确实铺开了：品红的酒旗、青色的虹桥轮廓、二楼挂着一排发光的灯笼。可滚轮一放大，帧率从 60 掉到十几，画面卡成幻灯片。
问题多半出在辉光上。夜景里每一盏霓虹灯都在发光，代码助手常默认用 shadowBlur 给画面里几百个物体逐帧算高斯模糊，主线程立刻被压垮。题材越炫，这条性能线越容易翻车。
先把性能写进提示词
代码助手拿到一句"注意性能"，通常只会在注释里回敬一句"已做优化"。要约束它的实现路线，得写具体动作：
### 性能红线
- 按 devicePixelRatio 设像素预算（超大屏自动降采样）
- 离屏元素剔除不画
- 辉光用低分辨率离屏缓冲放大模糊，
避免全分辨率 shadowBlur 拖帧这三行的意思分别是：画布物理像素超过需求就主动降采样，别在 4K 屏上画 8K 纹理；视口外的行人、灯笼、飞行物直接跳过绘制；发光效果在一张小图上做模糊，再拉伸叠回主画面。写到这里，代码助手才没有"注释式优化"的退路。
手感也在提示词里
夜景长卷好看是一回事，"凑近看"是另一回事。提示词照例描写了灯光、雨丝和倒影，但真正决定手感的是悬停那段：鼠标停在一家店铺上，时间流速从 1 平滑缓动到约 0.3，行人放慢、雨丝拉长，长卷像被按了下慢放。放大之后则暂停自动流动，只保留局部动画，你才有机会数清招牌字和灯笼的排布。
商店本身也要写成数据记录，而不是画完就算：
{ n:'孙羊正店', cat:'酒楼', sign:'正店',
rate:96.2, pop:99, price:'¥¥¥',
tags:['酒','夜市'], c:'#ff2d95' }渲染和卡片共用同一份数据。悬停时弹出主题色信息卡，评分、人气、魅力三条数据条动画爬升，卡片和建筑之间拉一条发光引线，同时 WebAudio 播一声短促磬音。以上交互来自提示词的示例结构，实际效果要等你运行生成代码后逐项确认。
运行生成代码后，逐项验收
这段提示词自带十条验收项，核心几条是：
- 双击即运行，无任何外部请求，画面全部由 Canvas 代码生成
- 世界由种子化随机生成，刷新后布局一致、可复现
- 多层视差 + 无限循环，长卷自动流动
- 悬停店铺时间变慢并弹出主题色信息卡
- 滚轮以光标为锚缩放进入端详模式；拖拽平移、双击复位、触屏双指可用
- 噪点、扫描线、暗角、雨、湿地倒影等后期生效
- WebAudio 合成配乐可开关；
prefers-reduced-motion下动效减弱 - 大屏不降帧（像素预算 + 离屏剔除）
不要把代码助手的文字说明当作测试通过——提示词中的分层数值（far 3300、mid 5400 等）和流速（60 世界单位/秒）是实现建议，可根据实际效果调整。
使用提醒
- 店铺记录中的评分、人气、魅力等数值和"黑市"设定均为装饰数据，不对应任何真实商家；店铺简介如涉及历史考据，需核对可靠来源，不把模型生成的描述当史料结论。
- 画风为程序化风格创作，不应声称复原原作构图或宋代汴京的历史场景。
获取完整提示词
上面只是摘出用来说明写法的片段。完整版"清明上河图 · 赛博朋克 Canvas 版实现提示词"保留了五层视差渲染架构、分层视差长度、POI 数据结构与全部十条验收项，复制后直接发给代码生成助手即可使用。可在微信搜索"励扬AI创作词库"小程序获取，也可先到这篇小程序介绍页了解它覆盖的场景。
