引言
昨日看了 《终末地》 前瞻，顺便看了下官网，一看这个 
点云模型的展示我觉得挺有意思的
我正愁做一个什么项目放这个域名donts.ink，于是有了点想法。
实践
观察了一下核心在于three.js
把终末地官网的元素复制给Gemini，让他试着复刻一下。
界面看着倒是像模像样，但是模型太组略了，根本就是几个圆锥和圆柱体。
随后和Gemini对话了亿轮，优化了很多细节。
- 精细化了模型
- 复刻了光束打印效果
- 复刻了背景旋转光环
- 增加了播放语音彩蛋
- 增加了喷漆尾流粒子
令我没想到的是Gemini作为一个多模态大语言模型对这种空间立体的物体模型也有比较好的认知，光靠我几轮对话的描述也差不多还原出了客机的模型
最后成品
部署
Gemini的ui设计能力确实非常惊艳，包括之前制作的学校社团《一代人四·寒夜》宣传页，可见对用户想法的理解和实现设计确实出人意料
生成的单个html文件，直接上传到 Cloudflare，部署一个 Worker(或Page)，就能非常方便地展示自己的内容。
提醒
这里更推荐使用Worker，可以使用路由功能连接到自己的域名，然后再创建一个该域名指向Cloudflare优选的CNAME记录，可以提升大陆地区的访问速度
模板
最后分享一段在L站上看到的Gemini网页设计提示词模板，稍作修改可以适用很多场景，也比较符合我喜欢的风格
角色设定: 你现在是一位兼具首席数据科学家与顶级UI/UX设计师能力的AI助手。现在用户需要 <填写此处> 。 技术与形式要求: 输出格式:生成一个单一的HTML文件代码(包含完整的HTML结构、嵌入式CSS 样式和Vanilla JavaScript). 视觉风格:复刻Apple产品发布页面的美学。 排版:极简主义,使用大字号无衬线字体(San Francisco风格),高对比度, 极致的留白。 交互:实现“Scrollytelling”(滚动叙事)效果。元素应随着页面滚动通过 IntersectionObserver触发淡入(Fade-in)和上浮(Slide-up)动画。可以添加卡片用户点击交互查看某些文字的功能。注重用户的可交互性。 配色:深色模式(Dark Mode),背景使用深灰/黑色,文字使用白色/浅灰,辅以高饱和度的渐变色作为强调。 结构:报告分为多个全屏或长滚动的章节(Sections),每个章节之间要有明显的视觉区分但保持流畅的过渡。具体内容参考我一同上传给你的报告里。
评论加载中...