做「山海观物」时，我怎样理解 AI 辅助视觉设计
AI 能快速生成图像，但人和 AI 对视觉的表达方式不同。难点往往不在速度，而在意图如何变成准确的视觉关系。
一句话结论
AI 能快速生成和修改图像，但人和 AI 对视觉的表达方式不同。人说的是感觉、关系和品味，程序最终处理的是位置、尺寸、透明度、圆角和运动曲线。要减少偏差，需要在自然语言和代码之间增加参考图、设计术语、明确约束和可调参数。
图片是一场对话，程序是中间的媒介
「山海观物」的出发点，不只是把照片包装成一张好看的卡牌。
一张图连接着制作者和看图的人。正面的现实照片记录今天看到的事物，背面的《山海经》形象把它带回古人的想象。程序负责把两者连接起来，成为古今对话的媒介。
这里还有另一层碰撞：古人根据经验和想象描述未知生物，AI 根据训练数据中的概率生成图像。两者都没有在复制一个确定答案，而是在有限信息中构造可能性。
自然语言很难精确描述图像
我在制作过程中经常说：
- 白边再圆一点
- 卡牌看起来再厚一些
- 镭射弱一点
- 翻转时从小变大，像飞到眼前
这些话对人来说容易理解，因为人会自动补充画面。程序却需要更具体的信息，例如：
- 内角半径是 18px 还是 24px
- 白边和金框之间留多少像素
- 阴影向右下偏移多少
- 镭射层的透明度和混合模式是什么
- 动画从哪个坐标开始，最终落到哪里
我的描述更多是感知，机器执行的是精确数值。AI 对猫、树、金色边框这类具体对象理解较好，对边框之间的距离、视觉重心、厚度感这类抽象设计关系理解较弱。
人类设计语言和 AI 训练语言之间有语义差异
同一个词，在人和 AI 那里可能指向不同画面。
我说「厚度」，AI 可能只增加一层普通阴影；实体卡牌的厚度通常还包括纸芯边缘、内斜面、接触阴影和远处环境阴影。我说「全息」，AI 可能使用大面积彩虹色，结果改变了原图颜色；我真正想要的是只有光线移动时才出现的轻微反光。
因此，设计沟通不能只依赖日常词汇。需要把感觉翻译成 AI 更熟悉的视觉语言，例如：
- trading card / TCG
- holofoil / reverse holo
- grain / paper fiber
- bevel / inset highlight
- layered drop shadow
- spring motion / FLIP animation
这些词在训练数据里出现得更频繁，能帮助 AI 找到更接近目标的实现方式。
学习设计术语，其实是在学习如何调用 AI 的经验
AI 见过大量卡牌、海报、网页和插画。用户使用什么词，会影响它从哪一类经验中寻找答案。
如果只说「做得高级一点」，信息很少；如果说「参考 TCG 实体卡的 layered shadow、foil glare 和 paper grain」，AI 能定位到更具体的视觉类型。
这也带来学习成本：为了更有效地引导 AI，我需要逐渐知道常见设计风格、材质、构图和动效的名称。目的不是成为专业设计师，而是拥有一套能检索和调用视觉经验的词汇。
AI 默认偏向干净、规整的布局
AI 经常自动给出干净、居中、留白充分的设计。这类设计在网页、作品集和商业模板中大量存在，模型容易把它当成安全答案。
但实体卡牌需要纸张纹理、边缘磨砂、细小反光和层次阴影。若不明确提出这些要求，结果容易像一张平面的网页图片。
所以，提示词除了写想要什么，还需要写清楚不要什么：
- 保留原图颜色，不让全息层整体染色
- 避免大面积彩虹覆盖
- 避免扁平网页卡片感
- 避免只有一层模糊阴影
- 不改变主体构图和文字位置
负向约束能帮助 AI 排除常见但不合适的默认答案。
描述元素之间的关系，比罗列元素更有效
只说「白边、金框、圆角」是在列元素。更精确的表达是：
白边位于照片外沿，白边内角和卡牌外角保持同心；金框再向内缩 16px，白边和金框之间露出一圈原图。
这句话说明了三个元素之间的位置和变化关系。类似地：
- 不只说「加阴影」，而是说「接触阴影靠近卡底，环境阴影更远、更柔」
- 不只说「卡牌放大」，而是说「从被点击的缩略图坐标出发，边旋转边放大，最终落到视口中央」
- 不只说「有镭射」，而是说「静止时基本保留原色，指针移动时高光带才经过卡面」
关系描述更接近程序需要的规则，也更容易验收。
参考网站时，应该先研究实现，再讨论能否复现
这次参考 poke-holo.simey.me 时，第一轮回答停在「无法直接看到实时画面」，没有继续检查公开源码。后来进一步查看 GitHub、CSS 和 Svelte 组件，才发现它的核心机制包括：
- 指针位置写入 CSS 变量
- 多层渐变、颗粒贴图和混合模式
- 3D 旋转和弹簧回弹
- 点击后从原位置移动到屏幕中央并放大
这次经历说明：看不到实时画面，只代表无法直接评价视觉效果；公开源码、静态资源和网络请求仍然可以帮助理解实现。
以后遇到参考网站，应默认按下面的顺序处理：
- 打开页面，检查可访问内容；
- 查找开源仓库和技术文档；
- 阅读 CSS、JavaScript、组件和素材组织方式；
- 提炼可迁移的机制；
- 检查许可证，再在当前项目中重新实现；
- 只有缺少公开实现时，才根据截图和描述近似还原。
更适合图片设计的人机协作方式
自然语言负责表达方向，参考图负责说明观感，参数负责精确执行，预览负责验收。
一轮高效协作可以这样进行：
- 先给参考：指出想接近哪张图、哪个网站或哪种 TCG 风格；
- 再说关系：说明元素之间怎样移动、缩进、遮挡或变化；
- 补充禁区：写清楚哪些颜色、构图和默认效果不能改变；
- 落成参数：把圆角、边距、透明度、阴影和时长变成可调值；
- 看图验收：用前后对照图圈出具体问题，再进行下一轮。
理想的中间层，是一块带参数旋钮的预览画布。用户继续用自然语言表达意图，同时可以直接调整白边、圆角、纹理、厚度、镭射强度和运动时长。这样，人负责判断好不好，程序负责保证每次修改都准确、可复现。
人不需要理解数值，中间层负责翻译感受
把设计效果落成参数还有一个问题：大多数人并不知道 22px 的圆角有多圆，也很难想象 0.35 的透明度和 32px 的阴影模糊会产生什么效果。
AI 对这些参数也没有唯一正确的答案。它根据训练数据拥有一套经验起点，但不知道我心里的「厚一点」到底是什么。真正要补齐的是从人的感知判断到程序参数之间的翻译过程。
不直接展示数值，先展示感知尺度
与其让用户面对一组参数：
圆角：22px
阴影偏移：18px
阴影模糊：32px
透明度：0.42不如先让用户调整容易判断的感受：
圆角：方正 ───●── 圆润
厚度：平面 ───●── 实体
镭射：克制 ─●──── 炫目
翻转：轻快 ───●── 仪式感系统再把「实体感 70%」翻译成一组相关参数，例如纸芯边缘、接触阴影、环境阴影、内侧高光和透视倾斜。用户调整的是感受，AI 和程序负责处理数值。
用关系变化代替绝对数值
人虽然不熟悉像素，却能判断相对变化：
- 白边比现在窄一点
- 金框离白边再远一点
- 阴影更靠近卡牌，范围再小一些
- 光只在移动时出现
- 翻转前段快、落下时慢
- 最终卡牌比缩略图大三倍
这些表达描述的是现有版本如何变化。系统可以把它转换成增量修改，因此用户不必提前知道目标数值。
用对照选择校准参数
人对比较的判断能力，通常强于对绝对数值的判断能力。系统可以一次生成三个版本：
- A：变化更克制；
- B：当前建议；
- C：变化更明显。
用户只需要选择最接近目标的一版，也可以说「介于 A 和 B 之间」。系统根据选择继续缩小参数范围，比反复追问「你希望透明度是多少」更符合人的判断习惯。
让系统逐渐记住个人偏好
多轮选择之后，系统可以学习一个人的视觉基线：
- 我说「微微」时，通常只接受约 10%～15% 的变化；
- 我希望全息效果保留原图颜色；
- 我说「厚度」时，期待纸芯边缘和分层阴影，而不只是加一层阴影；
- 我喜欢有实体质感、但不过度炫目的 TCG 风格。
以后 AI 不再从通用平均值开始，而是从我的偏好继续调整。
因此，这个中间层的完整过程是：
感知词 → AI 参数建议 → 多版本视觉比较 → 用户选择 → 偏好记忆
它更像一个视觉感知翻译器。人不需要学习所有参数，仍然保留最终判断权；AI 根据参考和历史偏好提出数值，程序保证结果准确、可复现。
这次项目带来的核心认识
AI 辅助视觉设计的难点，往往不在生成速度，而在意图如何变成准确的视觉关系。
设计术语能帮助 AI 找到合适的经验，关系描述能帮助它理解布局，负向约束能减少默认答案，参数和预览能把感知变成可验证的结果。自然语言仍然是入口，但它需要参考图、源码调查和可视化参数共同完成表达。
← 返回文章列表