# 有了 AI 都去做更炫酷的网页吧
**作者**: leon7hao
**日期**: 2026-01-09T09:05:16.000Z
**来源**: [https://x.com/leon7hao/status/2071901233359839511](https://x.com/leon7hao/status/2071901233359839511)
---

> 提前声明:我不是专业设计师,主要给大家提供一个思路。以下是实践过程,希望对同是非专业的朋友有所帮助。全文手打无 AI,多图预警。
时间太快了,现在 Lody AI 的主页还是半年前随便一天 vibe 出来的。
> **leon7hao@leon7hao**: [原文链接](https://x.com/leon7hao/status/2009552040381567005)
>
> 一天简单弄了个 landing page 用来介绍 lody 的特性
>
> 
由于 Lody 已经完成了同步底座,移动端的开发。慢慢靠向多 Agent 交互,团队协作的 workspace,旧的 landing page 已经不能很好地展示出 Lody 更想传达的能力和愿景。所以下一阶段就该从 landing page 开始,梳理重点,建立新的品牌认知。
刚做完第一页,迫不及待地想要分享,每天 build in public。
> **leon7hao@leon7hao**: [原文链接](https://x.com/leon7hao/status/2071788474303430755)
>
> 试着做点新尝试,效果怎么样?
>
> 
这次重新设计也是完全靠的 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 突破自己上限时的惊喜。

## 相关链接
- [leon7hao](https://x.com/leon7hao)
- [@leon7hao](https://x.com/leon7hao)
- [15K](https://x.com/leon7hao/status/2071901233359839511/analytics)
- [Jan 9](https://x.com/leon7hao/status/2009552040381567005)
- [9.8K](https://x.com/leon7hao/status/2009552040381567005/analytics)
- [Jun 30](https://x.com/leon7hao/status/2071788474303430755)
- [1.4K](https://x.com/leon7hao/status/2071788474303430755/analytics)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [6:18 PM · Jun 30, 2026](https://x.com/leon7hao/status/2071901233359839511)
- [15.7K Views](https://x.com/leon7hao/status/2071901233359839511/analytics)
- [View quotes](https://x.com/leon7hao/status/2071901233359839511/quotes)
---
*导出时间: 2026/7/1 14:21:22*