📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Full Tutorial: Build 10 Beautiful Websites in 12 Minutes with Replit and Gemini 3

Peter Yang12:23

Transcription

大家好。所以,Gemini 3 和 Replet 设计模式是我见过的最好的 AI 设计师。不再是紫色的 AI 垃圾,你现在终于可以一站式地构建精美的网站和应用程序,其中包含 AI 视频。所以,在本教程中,我将向你展示我用来构建令人惊叹的旅行目录网站、复古个人操作系统、多人扑克游戏以及更多内容的精确提示。这是我一段时间以来最享受的“氛围编码”的乐趣。所以,这些东西绝对是必试的。所以,这是我构建的旅行网站。它重点介绍了我去过的五个国家。你可以在这里看到它在背景中有全屏视频,这些视频是我用 AI 生成的。所以,这是日本的。这是葡萄牙的。这是西班牙、意大利和法国的。所以我让 AI 创建一个提示来构建一个令人惊叹的旅行目录网站,以展示我的五个国家,并在每个国家都有全屏视频。我尝试描述我的五个国家以及我想要的视频镜头。我必须承认,我也和 AI 交流来创建这些在线描述。好的,现在 AI 已经创建了一个提示,因为我使用的是 Claude,它认为它无法生成 AI 视频,这完全不真实。Gemini 可以。所以,这是我制作的提示,让我们复制提示的这一部分,然后我们将打开 Replet,并确保你从构建模式切换到设计模式。好了。所以,让我们把这个提示粘贴到这里,然后我们去掉这个视频占位符的东西,因为我们要实际生成视频。所以,让我们说根据下面的描述为每个国家屏幕生成 AI 视频作为背景。好了,我们快速看一下。一切看起来都不错。所以,让我们开始设计吧。现在,Replet 将会继续并实际制作网站。在它工作的时候,让我告诉你我如何制作之前分享的网站。所以,基本上是相同的过程。我与 AI 合作生成了这个提示。事实上,我的提示有点太雄心勃勃了。我想要生成一个交互式地图,我可以在每个国家点击访问页面。它在这方面做得不好。所以,我不得不在后续的对话中将其从范围中删除。但基本上,它是来回链接到我最喜欢的餐厅,编辑一些文案,这就是生成这个网站所需要的一切。另外,使用 Replet,实际发布网站非常容易。你只需要点击这里的发布,然后网站就会上线。所以,再说一遍,你可以几乎在 10 分钟内生成同一个旅行目录网站,列出你最喜欢的五个国家,如果你做得好的话。好了,所以一定要试试。但我们不要止步于此。我将介绍 Replet 和 Gemini 3 可以创建的另外 10 个示例。所有这些示例基本上只需要一个提示就可以开始。顺便说一句,我已将我使用的所有提示包含在视频下方描述链接的文章中,以便尽可能方便你。好了,现在让我们来谈谈我们的第一个例子,即构建一个复古个人网站。我想构建一个复古个人网站。过去,我曾使用 Windows 95 并玩我最喜欢的游戏,对吧?所以我开始与 AI 合作来规划规格。我让 AI 编写规格,并要求它将其分解为三个不同的里程碑,对吧?因为我不想它一次构建太多东西。然后,我要求它将我们讨论过的所有内容编辑成一个我可以粘贴到 AI 中以生成结果的提示。这是结果。好了。所以,你可以在这里看到我从 AI 给我的提示开始,我创建了一个非常棒的个人网站。让我们玩一下。所以,有一个关于屏幕。有我的经验,我从 LinkedIn 复制粘贴过来的。有我的新闻通讯和 YouTube 的链接。甚至还有回忆。我对此感到非常自豪。所以,这些都是我年轻时玩过的所有我最喜欢的游戏。星际争霸、红色警戒 2、恐龙公园大亨(Mac 版)、指挥官金、德军总部 3D,等等。对吧?如果你年轻,可能你以前从未玩过游戏,那么,我为你感到难过。你错过了。这些游戏太棒了。那么,我是如何做到这一切的呢?首先,AI 制作了操作系统。然后我让它进行了一些文案更新。然后我出去在网上搜索了我所有最喜欢的游戏的截图。我让 AI 创建一个回忆文件夹,里面有我可以查看的怀旧照片。所以,再说一遍,我没有看代码或编辑代码。我只是粘贴了图片并给出了 AI 提示,事实上,我很多东西都是在 Replet 移动版上完成的。我当时在排队买波霸奶茶,你知道,在外面。我找到了图片并将其粘贴到移动应用程序中供 AI 构建。这就是我们现在生活的世界。你知道,你实际上可以在旅途中“氛围编码”这些应用程序、这些精美的网站和操作系统。所以,是的,这需要大量的来回沟通,但最终我还是做到了。而且,同样,使用 Replet,你几乎可以一站式地发布它。所以,现在网站已上线,你可以在这个链接上查看。让我们继续。接下来,我将向你展示一个构建多人扑克游戏的提示。好了。所以,提示是创建一个漂亮的扑克游戏,带有发牌动画,包括筹码堆,并使用干净的排版等等,并使其功能齐全。这里是专业游戏。你可以看到按钮实际上是工作的。是的,它实际上是交互式的。你可以在这里看到我可以跟注。而且,嗯,它可能不是完全工作的,但你绝对可以与 AI 来回沟通使其工作。好了。看起来是 Maverick 赢了。再一次,我一站式发布了这个扑克游戏。所以,我的意思是,这太不可思议了。我的意思是,这看起来像一个非常专业的扑克游戏。所以,现在让我们继续。所以,让我们来看下一个例子,这是一个 AI 代理构建器界面。这是提示。创建一个高质量的界面,用于构建类似 Zapier 的 AI 代理。包括一个拖放工作流程构建器等等。你可以看到它构建了一个非常棒的界面,我可以将不同的组件拖放到一起。这个界面实际上不能工作。你现在无法使用这个界面构建 AI 代理。所以,Replet 设计模式中发生的一切都只是前端代码。但你可以轻松地使用 Replet 将这个界面转换为 Replet 构建模式,在那里你可以添加后端,你可以添加数据库,并尝试使这个东西功能齐全。但是有了这个界面,你现在就可以向潜在客户展示它。你可以向你的团队展示它,看看这是否是一个好主意。好了,就是这样。让我们继续我们的第四个例子,我认为你会非常印象深刻。我们的第四个例子是一个豪华汽车登陆页面,带有全屏视频和戏剧性的揭示。对吧?所以,你可以在这里看到它生成了迪拜的一家经销商。我们实际上要求为迪拜的法拉利展厅构建一个登陆页面,这里有法拉利。你可以向下滚动。有不同汽车的功能模型。你可以继续向下滚动。有一个展厅虚拟之旅,甚至还有一个你可以填写的联系表格。所以,再说一遍,现在你可以为你的任何业务生成这些专业的网站,几乎只需要几分钟。好了,让我们继续下一个例子,这是一个高端音频产品的页面。为一家高端音频硬件公司构建一个产品页面。从风格上看,让我们模仿这两个流行的音频公司,对吧?所以,再说一遍,这是一个非常令人惊叹的利基音频设备网站。我对这个领域不太了解,但看起来非常令人印象深刻,对吧?这是一个看起来很专业的网站,你可以在几分钟内生成。如果你雇佣一个设计师,可能需要花费数千美元。所以,让我们继续。现在我们有一个提示,为一家游戏工作室的创意总监创建一个作品集网站。我们想要的审美是赛博朋克指挥中心与时尚产品设计的结合。好了,这是创意总监 Alex Chen。我们在后面生成了一个星空动画,它实际上会对你的鼠标做出反应。是的,这是一个看起来像加密货币的赛博朋克风格的网站,用于他的作品集。我认为这有点太多了。这让我想起了 NFT 时代,但对于某些客户和合作伙伴来说,这可能很有吸引力。好的,让我们继续下一个例子。好了,现在我们有一个动态设计作品集,具有高端汽车广告的美学。包括贯穿始终的动画、灯光效果,作品应该显示悬停时播放的视频卷轴。好了,再说一遍,这是一个超级高端的作品集网站。我喜欢背景中的液体动画,也喜欢鼠标效果。让我们继续向下滚动。这是机构精选作品,是的,又一个 Replet 在几分钟内生成的非常专业的网站。好了,接下来我们尝试一些不同的东西。这是一个带有深夜咖啡馆美学的个人日记应用程序,包括柔和的琥珀色效果等等。这里有一个应用程序,提醒我们保持个人日记的连贯性。它看起来很漂亮。有一些不同的东西。你甚至可以在这里输入文字。让我们看看其他东西是否有效。开始写作。是的,它带我到我的条目。好的,让我们看看日历视图是否有效。好的,它有点卡顿,但你可以要求 Replet 清理它。甚至还有一个统计数据和见解的占位符。所以,再说一遍,如今任何人都可以为非常个人化的利基用例构建这些惊人的个人应用程序,比如一个人的应用程序,只需获取 Replet 和 Gemini 来生成它们。好了,你可以看到我在过去几天里生成了所有这些应用程序,而且非常有趣。我认为如果你想从一件事开始,最好从全屏视频网站的例子开始。所以,这是我生成的另一个全屏网站。这是一个关于湾区房地产市场的讽刺网站。你可以看到你可以以仅 320 万美元的价格购买这个精美的入门级住宅,对吧?嗯,还有美丽的公立学校,你永远不会去。你的办公室只有 12 英里远,但由于交通,你可能要开车 90 分钟,这非常适合你的有声读物积压。所以,再说一遍,要生成这个全屏视频网站,我几乎遵循了之前分享给你们的完全相同的过程,那就是我首先与 AI 合作创建规格和提示,然后将其插入 Replet,它几乎可以一站式生成内容,我只需要做一些小的编辑。关键是实际指定和描述你想要的全屏视频示例。好了,就是这样。现在,不要只是观看这个教程。出去自己尝试使用 Replet 设计模式和 Gemini 3。你知道,真的没有借口不尝试一下,你可以在短短 2 分钟内生成你自己的精美网站和应用程序。再说一遍,我已将提示包含在视频下方描述链接的文章中,但你也可以自己与 AI 合作创建提示。你知道,这并不难。只需与它来回沟通。让它为你想要的内容创建提示,并让它帮助你描述你想要的视频。好了。Replet 设计和 Gemini 3 绝对是游戏规则的改变者。它们是你能雇佣到的最好的 AI 设计师,我从未像这个周末这样享受“氛围编码”的乐趣。所以,如果你喜欢这个视频,请务必点赞并订阅这个频道,获取更多实用的 AI 教程和访谈。下次再见。