一天简单弄了个 landing page 用来介绍 lody 的特性

有了 AI 都去做更炫酷的网页吧

提前声明：我不是专业设计师，主要给大家提供一个思路。以下是实践过程，希望对同是非专业的朋友有所帮助。全文手打无 AI，多图预警。

时间太快了，现在 Lody AI 的主页还是半年前随便一天 vibe 出来的。

leon7hao@leon7hao·Jan 9一天简单弄了个 landing page 用来介绍 lody 的特性Quoteleon7hao@leon7hao·Jan 7lody 得有个 landing page 了。 有啥好用的 prompt 可以让 agent 直接糊一个好看点的？94389.8K

由于 Lody 已经完成了同步底座，移动端的开发。慢慢靠向多 Agent 交互，团队协作的 workspace，旧的 landing page 已经不能很好地展示出 Lody 更想传达的能力和愿景。所以下一阶段就该从 landing page 开始，梳理重点，建立新的品牌认知。

刚做完第一页，迫不及待地想要分享，每天 build in public。

leon7hao@leon7hao·Jun 30试着做点新尝试，效果怎么样？5231.4K

这次重新设计也是完全靠的 codex 和 claude，自己完全没有写代码，一直在指指点点。我真的觉得 AI 的能力能够胜任各类 coding 工作以及通过 coding 可以延伸做到的工作。剩下的就看infra 怎么提供 AI 环境，人怎么激活 AI 的潜力。

确立主题

我现在的 X timeline 一小半都是设计相关的了，还是得多看好的东西，多进行审美积累。最终结合 Lody 的 logo 是一只水母，还有 Lody 的 vibe coding 作为主要功能。我就希望能够营造一种科技感，赛博海底，幽静但不恐怖的感觉。

之前忘了什么时候看到的一个 3D 点阵的波浪的图，感觉很适合作为海底地形，然后点阵又很符合数字世界。就拿这图先去和 chatgpt (使用 codex 也是一样的) 讨论了一下技术方案，3D 模型、threejs 绘制生成、shader 生成。之前也看到很多 shader 类似的效果，相信有 AI 加持这种程序化生成的难度也不大。决定使用 shader 来实现。 把基本的需求告诉 chatgpt 让它生成了一套描述以及对应想象的效果图。就挺符合想象的了。如果你不满意的话把之前的对话复制一遍用新对话再发来抽卡，我发现继续让它改的话，只会和第一版很像，但越来越差。

实现和微调

我直接把 chatgpt 给出的制作说明还有生成的图发给 Opus 4.8，一定要 Opus 模型，不要使用 GPT。并且加了一点用在哪里的背景说明。

制作一个 抽象科技感的点阵海底动态背景：用点云高度场表现海底沟壑，用半透明水母和少量珊瑚增加生命感，用蓝色体积雾、Bloom 和漂浮颗粒营造水下氛围；整体动效应缓慢、克制、适合作为产品官网背景。 基于以上构想使用 shader 或第三方库实现，彻底替换已有的 landing page 设计。无需后向兼容，无需考虑已有任何设计和内容。完成后 push github

第一版就已经有点那个味道了，Opus 牛逼，不知道 Fable 5 会不会更好呢。但是很平淡，尤其是水母的效果就是一个半圆加一些虚线而已，地形也普普通通的。我们就需要给模型做一些指引。

例如水母可以更加精细使用更多的采样点，现在地形还是有些平坦，我希望像图里那样两边高，中间低，像海底一样。通过光影让地形结构更加明显。

人类把控下限

AI 很听话，确实是完完全全地按照我的指示做了改进，水母变得精细了，但是这个峡谷很拉胯。因为这些都是通过 shader 程序生成出来的，本质上就是通过不同的初始化值、各类三角函数和随机噪声来模拟，那么就可以完全将这些参数暴露出来，人类自己来调节。

点云光影版本你可以做得更好。现在左右高度峰值的位置太僵直了，几乎是直角，这里需要是弧度的。 然后目前所有地形都是一样的坡度。你可以将不同的远近随机地调整不同的最大高度与坡度，增加多样性。去掉丁达尔光线。并且把所有能够调整的参数使用 一个按钮，点击后显示所有可配置的滑块，调整后实时生效。让我能够调节。

现在就有了那种想要的感觉了。自己一顿调，如果有这些参数也无法控制的地方就让 AI 微调改动算法，例如这里谷底太僵硬了，我希望是像 cos 函数那样圆润的。反正最终调节完直接把参数复制给 AI 就可以作为最终预览了。

再就是很多细节工作了，例如这里水母的触手有时候超出伞盖了，整个界面的色彩不好，本意是想要水母和地形闪闪发光的。想要亮，那就需要增加暗。继续微调。

现在触手和伞盖的边缘几乎一样，导致不像水母，触手边缘应该在伞盖内部一点点，而不是一样宽。页面顶部是不是有光线模拟？导致整个界面有点灰灰的感觉，显得不够高级，是否可以让整体暗下来。

保证效果之后，最后验证一下性能，在主机和移动端都跑一下性能，让 AI 按照点数，帧率等等出几个不同的渲染等级，根据设备选用不同的配置项。

啰嗦几句

我一贯的宗旨是不要让 AI 为你做思考，为你做主观性的决定。你可以让 AI 搜索技术方案，分析每种方案的优劣，但不要让 AI 写完 plan 就不假思索地 /goal。你可以让 AI 帮你出设计图优化候选文案，但不要自己完全没有思考过想要的是什么。AI 就是全知全能的天才，它可以按照好的 prompt 做出来好的，也可以按照坏的 prompt 做出来坏的，它的上限很高，同时下限也很低。所以人在这里的作用就是保障下限够高，然后期待获得 AI 突破自己上限时的惊喜。