本文未实现设计师作者的艺术效果，仅作为抛砖引玉
很多设计师第一次看到这类作品，都会下意识地觉得：
“这个应该很技术吧？”
“是不是得先学很久代码，才能做这种东西？”
“我只会讲感觉，不会讲技术，AI 能听懂吗？”
其实这几年我越来越觉得，答案恰好相反。
今天这类带有艺术感、空间感、互动感的网页动画，最重要的第一步，已经不是“先学会写多少代码”，而是先学会一件事：
把你脑子里的画面、动作、材质和氛围，描述清楚。
因为 AI 最擅长做的事之一，就是把设计语言翻译成技术实现。
这篇文章，我想专门写给两类人：
- 本身是设计师，但几乎没接触过代码
- 对互动网页、动态装置、视觉实验很感兴趣，但不知道从哪里开始
我会结合这次我们做的一个案例来讲。这个案例本质上是一面“文字珠帘”：黑色背景，一串串垂下来的细线，每条线上挂着重复的汉字；它会随风摆动，鼠标经过时像手拨开帘子，被掀起之后，相邻几串还会短暂缠一下、再慢慢落回去。
你可以把它理解成一个网页里的小型动态装置。
而我更想讲的是：
一个不懂技术的设计师，怎么借助 AI，一步一步做出这一类作品。
一、先别把它看成“网页特效”，把它看成“会动的装置”
很多人一上来会把这类项目理解成“网页动效”，但如果只这样理解，方向很容易做偏。
因为真正决定作品质感的，往往不是“动画幅度大不大”，而是它有没有一个成立的动态逻辑。
比如我们这次做的“文字珠帘”，如果用设计语言来讲，它不是“几个字在网页上飘”，而是：
- 画面里有很多串垂下来的丝线
- 每条线上挂着同一个汉字
- 整体始终受重力影响，所以是向下垂的
- 风吹过时会轻轻摆动
- 鼠标经过时，像手把一片帘子拨开、掀起
- 掀起来后，附近几串会短暂缠一下，再慢慢散开
你看，这里面最重要的并不是代码，而是你对这个“世界”怎么运作的想象。
这也是为什么我现在更愿意把这类项目叫做：
在浏览器里做一个会动的视觉系统。
一旦你这样理解，很多事情就好办了。
二、设计师做这类项目，真正要掌握的是“描述能力”
很多设计师会误以为，自己卡住是因为“不懂技术”。
但实际工作里，更常见的问题是：
你知道自己想要什么感觉，但还不会把这种感觉说成一组清晰的规则。
比如下面这些话，其实都非常有价值：
- 我想让它更像垂挂的东西，而不是漂浮的东西
- 我想让它更像手拨帘子，而不是鼠标吹散粒子
- 我想让它有打结感，但不是一直乱缠
- 我想让它更安静、更高级，不要像廉价特效
- 我想让它保持重力感，不要自己卷起来
这些话本身就已经非常接近“动态设计指令”了。
AI 要做的事情，其实就是把这些感觉翻译成实现规则，比如：
- 顶部更稳定，底部摆动更明显
- 平时只有轻微风摆，不能持续卷曲
- 鼠标经过时增加横向位移、上提和向前翻起
- 只有被明显掀起时，相邻线才允许短暂缠结
- 缠结后再慢慢松开
所以从某种意义上说，设计师进入 AI 时代之后，最重要的新能力不是变成程序员，而是变成一个更会“下创作指令”的人。
三、不会技术没关系，先学会这三种提示词写法
很多人觉得 AI 做不出好东西，往往不是因为 AI 不行，而是因为提问太空。
比如：
帮我做一个很酷的网页动画
这句话的问题是，“很酷”太模糊了，AI 不知道你要的是潮流感、科技感、东方感、装置感，还是商业海报感。
对于设计师来说，更有效的提示词通常有三种。
1. 画面描述型：先说你想看见什么
这种写法最适合完全不懂技术的时候。
比如你可以这样说：
我想做一个单屏网页互动作品。 整体是黑色背景，画面中有很多垂下来的细线，像一面文字珠帘。 每条线上挂着重复的汉字“丹”，从上往下排列。 整体气质是克制、安静、带一点实验装置感，不要做成普通网页 banner。 我不懂技术，请你先不要写代码，先告诉我这类项目更适合用什么技术实现，并用通俗语言解释原因。
这里有一个很关键的点：
你不需要先知道技术词，完全可以先用视觉语言去提问。
也就是说，你负责把审美讲清楚，AI 负责帮你选工具。
2. 行为规则型：先说它应该怎么动
当第一版已经出来，但“感觉不对”时，这种提示词特别有效。
比如不要只说：
让它更自然一点
因为“自然”太抽象。
你可以改成：
请把这个动画的运动逻辑改得更像真实世界的珠帘。 它应该始终受重力影响，整体向下垂。 平时只允许轻微随风摆动，不应该自己卷成一团。 越靠近顶部越稳定，越靠近底部摆动越明显。 鼠标经过的时候，不是轻轻吹散，而是像手把一片帘子拨开、掀起。 扰动结束后，再慢慢落回去。
这时候 AI 理解到的不是“调大动画”，而是“重写运动逻辑”。
3. 参考图解读型：让 AI 先帮你拆结构
很多设计师最常见的场景是：有一张很喜欢的参考图，但自己不知道里面到底用了什么技术。
这时候不要直接问：
这个是不是 Three.js 做的？
更好的问法是：
这是我喜欢的一张参考图。 我不确定它具体是用什么技术做的。 请你先从视觉结构上分析：
- 这个画面由哪些层组成
- 哪些部分是静态的，哪些部分是动态的
- 如果在网页里实现，更适合 2D 还是 3D 方案
- 对于一个不懂代码的设计师，我应该怎样把这个效果拆成几个步骤交给 AI 去实现
这一步非常有价值，因为它会让 AI 从“回答一个名词”变成“帮你建立实现结构”。
四、用这次项目举例：如果从零开始，你可以这样和 AI 沟通
下面我就直接拿这次“文字珠帘”项目来举例。
场景一：完全不懂技术，只知道自己想做什么
这是最适合设计师的第一步。
你可以直接这样问：
我想做一个网页互动作品，风格偏艺术装置。 画面里是一整面垂下来的文字帘子，每条线上挂着重复的汉字。 整体不是信息排版，而是氛围型、沉浸式、可以被鼠标扰动的动态画面。 我不懂技术，请你先不要直接写代码。 请先帮我判断，这类项目更适合用普通网页动画、Canvas、PixiJS、Three.js 还是游戏引擎来做，并且用通俗语言解释原因。
这类提示词的价值在于：
- 先把技术选型这件事交给 AI
- 让 AI 用人话解释，而不是直接甩术语
- 避免自己一开始就选错方向
我们这次项目其实就经历了一个很真实的过程：最初用的是更偏 2D 的思路，但后来发现这个作品越来越像“一个实时空间装置”，所以转向了更适合空间表达的Three.js。
场景二：想让 AI 先做一个最小版本
如果第一步技术方向定下来了，接下来不要急着让 AI 一步做到“最终版本”。
更好的做法是先做一个最小 demo：
请先帮我做一个最小可运行版本。 目标不是一次做完，而是先验证感觉。 需求如下：
- 黑色背景
- 多串从上往下垂的细线
- 每条线上挂白色汉字“丹”
- 这些字沿线垂直排列
- 整体轻微摆动
- 鼠标经过时附近文字和线会被拨开 请优先保证画面气质和运动方向正确，不要先堆太复杂的特效。
这个提示词背后的思路非常重要：
先让它动起来，再让它动得更好。
很多初学者一开始就想让 AI 一次做出“完整、精致、艺术、交互、物理、光效全部拉满”的版本，结果通常会很乱。
场景三：第一版跑起来了，但“看着不像珠帘”
这个时候最怕的反馈是：
感觉不太对
这句话当然没错，但太不具体了。
设计师如果能把它说得更准确，AI 的输出会好很多。比如：
现在这个版本更像漂浮的文字，而不是珠帘。 我希望你往真实垂挂物的方向调整：
- 整体始终受重力影响
- 顶部更稳定
- 底部摆动更明显
- 不要自己卷成波浪团
- 线与线之间要有明显的垂挂关系
- 先保证读起来像帘子，再考虑艺术化变形
你会发现，好的反馈不是“我不喜欢”，而是“我不喜欢的具体原因是什么”。
场景四：想把鼠标效果从“划过”改成“拨帘子”
我们这次项目里，后面很关键的一步，就是把“鼠标划过有扰动”改成“更像手在拨竹帘”。
如果你只说：
鼠标效果更明显一点
AI 大概率只是把数值调大。
但如果你这样说：
鼠标交互不要只是轻轻吹开。 我想要更像人手拨开竹帘的感觉。 鼠标经过时，附近一片帘子应该整体被掀起来，而不是每个字各自动。 它应该同时有侧向位移、轻微上提和向前翻起的感觉。 扰动结束后，这一片帘子再慢慢落回去。
这时 AI 理解到的是“交互模型变了”，而不是“效果更大了”。
场景五：想加“打结”，但不会讲技术
这个特别典型。很多设计师知道自己想要“缠一下”的感觉，但完全不知道技术上该怎么描述。
其实你可以直接用很朴素的语言说：
我希望帘子被掀起来之后，相邻几串线之间会出现短暂的缠绕感。 这种缠绕不需要是真实物理模拟，但视觉上要像互相挂住、打了一个小结。 它不应该全局一直发生，只有在局部被明显掀起时才发生。 缠一下之后，再慢慢松开。 请优先做视觉上可信的实现，不追求严格物理正确。
你看，这段话里完全没有什么“碰撞检测”“弹簧约束”“物理引擎”这些词。
但它已经足够让 AI 推断出很多关键信息：
- 这是局部触发，不是全局常驻
- 这是视觉模拟，不是严格物理
- 缠结是短暂的，不是永久状态
- 它发生在“被掀起之后”这个前提下
这就是为什么我一直觉得，设计师和 AI 协作时，最重要的不是学一堆技术名词，而是学会把感觉说得更清楚。
五、那这次项目到底用了什么技术？怎么用人话理解？
这次项目最后用到的几项核心技术，其实都可以用非常通俗的方式理解。
1. React：像一个“舞台管理系统”
React 本身不是这个作品里负责“好看”的部分。
你可以把它理解成：
- 把页面容器准备好
- 管理整个网页结构
- 负责这个动态场景什么时候创建、什么时候销毁
- 让项目更容易整理和维护
如果要打比方，React 更像一个后台舞台经理。它不负责上台表演，但它负责让舞台顺利开场。
2. Three.js：像在浏览器里搭了一个会动的空间
这次项目真正关键的，是Three.js。
如果用最简单的话讲，它的作用就是：
- 创建一个“场景”
- 放进很多垂下来的线
- 在这些线上挂上文字
- 给这个场景设定一个“镜头”
- 每一帧重新计算这些线和文字的位置
- 根据鼠标输入，让它们像真实物体一样被扰动
为什么最后更适合用它？
因为这个项目已经不只是普通的 2D 页面动效了。它开始需要：
- 空间层次
- 线束交错
- 更像装置一样的整体感
- 鼠标和“局部区域”之间更有身体感的互动
这类需求，用Three.js 来做，比纯 2D 动画更灵活。
如果你完全不懂技术，也可以这样理解：
普通网页动画更像在平面海报上做动效，Three.js 更像是在网页里搭一个会动的舞台。
3. Canvas 文字纹理：先把“字”画成小图片，再挂到场景里
这个项目中途还遇到了一个很实际的问题：中文文字在某些 3D 文字方案里，容易出现渲染异常，比如变成白块、方块或者发糊。
后来我们用了一个更稳的思路：
- 先在一张隐藏的 2D 画布上，把“丹”这个字画出来
- 把这张画布变成一张透明纹理
- 再把这张纹理重复挂到每一个文字位置上
你可以把它理解成：
不是让 3D 系统去“理解这个汉字”，而是先把汉字画成一张小图，再把这张图挂到空间里。
这个思路对设计师很值得记住，因为它说明了一件事：
做数字作品时，最终重要的不是你用了多“高级”的技术，而是你有没有找到一个稳定可靠的实现方式。
六、设计师如果想长期做这一类项目，最值得掌握的是这套工作流
如果你以后想自己做这类互动网页，我最推荐的不是一上来就学完整前端，而是先练会下面这套流程。
第一步：先写作品描述，不写技术方案
先像写创作说明一样，把你想做的东西写出来。
例如：
我想做一个黑色背景的动态文字装置。 画面里是一整面垂下来的细线，每条线上挂着重复的汉字。 整体安静、克制，像一个可被触碰的空间。 鼠标经过时，像手拨开帘子。 局部被掀起后，会出现短暂缠结。
这一步你越像一个设计师，AI 越容易帮你做对。
第二步：让 AI 帮你拆成“结构、运动、交互”
你可以直接问：
请先不要写代码。 帮我把这个作品拆成：
- 视觉层
- 结构层
- 运动层
- 交互层 每一层应该控制哪些关键点？
这样你会先得到一个创作蓝图，而不是一堆你还看不懂的代码。
第三步：让 AI 先做最小 demo
不要一开始就追求最完整版本。
你可以这样说：
请先做一个最小可运行 demo。 先只验证：画面结构成立、运动方向成立、交互方向成立。 先不要追求完整特效。
这一步的目标就是一句话：
先跑起来。
第四步：像艺术总监一样去修，不要像外包甲方一样只说“感觉不对”
设计师和 AI 协作，最忌讳的反馈就是太空。
比起“再高级一点”，更有效的说法是：
- 现在太像漂浮，不像垂挂
- 顶部还不够稳
- 鼠标经过不像手拨帘子，更像风吹粒子
- 局部打结应该只在掀起后出现，不应该一直存在
- 字太亮了，轮廓反而看不清
- 线太稀了，读起来不像一整面帘子
你会发现，这些反馈本质上都是设计判断，而不是程序判断。
第五步：最后再让 AI 帮你整理成可复用模板
当一个作品大致成立后，你就可以继续问：
请帮我把这个项目整理成一个可复用模板。 以后我只需要改文字内容、配色、密度、风格参数，就能衍生出新的版本。
这一步特别适合设计师。因为一旦你有了一个可复用母版，后面做新的作品时，门槛就会越来越低。
七、送给设计师的几个“万能提问模板”
最后我把最常用、最值得反复使用的几类提问模板整理给你。
模板 1：请 AI 帮你选技术
我是设计师，不会写代码。 我想做一个网页互动作品。 我先描述画面和行为，请你帮我判断最适合的技术方案，并用通俗语言解释。 我的需求是：……
模板 2：请 AI 帮你拆作品结构
请不要直接写代码。 先把这个作品拆成视觉层、结构层、运动层、交互层，分别说明应该怎么理解。
模板 3：请 AI 帮你做最小 demo
请先帮我做一个最小可运行版本，优先验证核心气质，不要一开始堆太多复杂效果。
模板 4：请 AI 根据感觉修动态
现在这个版本能动了，但动得不对。 我希望你根据下面这些感觉来调整运动规则：……
模板 5：请 AI 把设计语言翻译成技术需求
我只会描述视觉感觉，不知道技术上该怎么说。 请把我下面这些描述，翻译成适合实现网页动画的技术需求清单：……
这个模板真的非常推荐。因为它特别适合设计师当前的真实处境：
我知道我想要什么，但我不知道“技术上应该怎么表达”。
那就让 AI 来做这层翻译。
八、最后想说的一点：你不是在“补技术课”，你是在学习一种新的创作方式
对设计师来说，进入这类网页动画创作，最难的从来不是背语法，而是接受一种新的工作方式：
你不再只是画一个静态结果，
而是在设计一个会自己运动、会自己响应、会自己变化的系统。
这听起来像技术，
但本质上仍然是设计。
只是从“静态视觉设计”，变成了“时间中的视觉设计”。
如果你本来就有好的审美、好的画面感觉、好的节奏判断，那你其实离这类作品并不远。
你要学会的，不是先成为程序员，
而是先学会把自己的感觉，说成可以被执行的规则。
而 AI，恰好就是那个能帮你完成这一步的人。
所以如果你也对这种互动网页、动态装置、实验性视觉作品感兴趣，不妨从一个很小的想法开始：
想一个画面，
写一段描述，
把它交给 AI，
然后像一个设计师一样，一轮一轮把它修到对。
你会发现，很多原来以为“只有程序员能做”的东西，其实正在变成设计师也可以进入的新领域。