2026年7月2日 周四晚上19:30,报名腾讯会议了解“如何构建自进化的动态知识库(Brain)”(限30人)
免费POC, 零成本试错
FDE知识库

FDE知识库

学习大模型的前沿技术与行业落地应用


收藏

我用 POE 复刻了一款小游戏,难度:零|AI 鲜测

发布日期:2024-07-15 18:55:02 浏览次数: 3381
作者:硅星GenAI

微信搜一搜,关注“硅星GenAI”

之前 Claude 3.5 Sonnet 发布的时候,同时更新了 Artifacts 演示的功能,当时就被演示效果震惊到了。
关于 Artifacts,它允许用户在对话中创建和引用大量独立的内容。
当我们向 Claude 提问关于“代码片段、文本文档或网站设计”等内容时,Artifacts 会在一个专用窗口中出现,与对话内容并排展示。如果输出结果不满意,我们可以立即修改、迭代并改进 Claude 的创作。

图为在 Poe 通过和 Claude 3.5 Sonnet 对话,用 Preview 生成的 HTML 效果。对话地址:https://poe.com/s/YEms220OFPLfoZhPKfLI
现在千等万等终于等到了 Poe 官方更新了 Preview 功能,效果类似于Artifacts 实时演示的效果,同时支持 Claude 3.5 Sonnet、ChatGPT-4o 和 Gemini 1.5 Pro 三款模型实时生成。
左图为 Claude 3.5 Sonnet 以及 Artifacts 更新,右图为 Poe 的Preview
插播一句,这里简单解释 Poe 是个啥
Poe 是由北美的“知乎”(问答社区)Quora 2022年底推出的 AI 平台,用户可以通过它与不同的 AI 模型进行交流,包括 ChatGPT 和 Claude 等知名模型。Poe 的设计初衷是提供一个多样化的聊天平台,使用户能够从多个 AI 模型中选择最适合自己的进行互动,无论是提问、求助于编程还是进行轻松的对话,Poe 都能满足。当 Poe 更新 Preview 演示功能的时候,我真是喜大若奔!

说了这么多,我已经等不及了,我们来看几个上手做的案例。

场景一:创建好看的游戏 ? 网页

在网上,我们经常能看到各种工具合集网站。如果有一个工具可以帮我们轻松创建自己的可视化合集网站,那不是省下了大把编程时间吗?最近我发现了一个游戏网站,每次点击进去都有种打开盲盒的惊喜感,里面有各种游戏、工具和网络实验,简直就是一个完美的游戏工具合集网站。
我就在想:能不能用 Poe 的 Preview 功能也来创建一个类似的实时演示页面,甚至打造一个工具合集网站呢?为了验证这个想法,我决定先做一个静态页面试试看,这可是基础的第一步啊!
我直接用 Poe 跟 Claude 3.5 Sonnet 对话。一开始只是纯文字提问,它生成了文字和方案;
后来我加了一句“直接在 Previews 预览展示”,结果实时效果立刻显现出来,效果真的很不错。

提示词:https://toms.toys/ 访问这个页面,并创建游戏教程,直接在 Previews 预览展示。

生成后我尝试下点击红色字,发现点不动,所以这生成的是静态网页,但是长得是八分相似的,logo 颜色基本符合,其他的索引框也都十分清晰,至少有原版那味儿了。

现在有了这个基础,我已经能自己动手打造一个专属的工具网站了。想象一下,各种实用工具都汇聚在一个自定义的网站中,随时随地点击就能用,真的是既方便又酷炫!

场景2:英伟达2024财报分析演示

之前用很多 AI 分析财报输出都是文字,现在我们尝试下用图表演示的效果。

提示词:

你能分析一下信息吗?https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/并把它变成一个可消化的互动演示来帮助我理解它
Poe 的 Preview 初步是用了一个简单的互动演示,展示了NVIDIA的主要财务指标。通过点击不同的按钮可以查看收入、利润和每股收益的图表,感觉还挺强的,完全不逊色于 Artifacts 。
优化后专业版来了,不仅有各项指标对比,还提供了 NVIDIA 财务状况的全面概览,包括数据呈现和专业分析,整体效果还不错,直接看图。

场景3:化学知识卡片制作

记得 Poe 官方账号生成的 web 应用程序案例中有一个是知识卡片 Flashcards: https://poe.com/s/HDAXQjBX9qmsInjjgV4X,不如以此为原型,做一个化学知识卡片?
卡片的制作也很简单,基本迭代几次之后效果就都出来了,主要迭代和修改的地方如下:
  • 文字基本信息:卡片前面是概念,背面是概念解释。

  • 文字:前后文字通过大小、背景颜色等进行区分。

  • 色调:整体色调采用莫兰色调,看起来比较舒服。

细心的朋友可以看到,除了翻转和互动,我在卡片中还加入了用户ID、实时时间,增加了卡片的唯一性和实时性。

场景4:模拟水循环动画

今天咱就梦回高中时代,做一个水循环动画过程,让页面自动播放动画效果。
提示词:
用 React 做动画,展示水是如何循环的,要复杂些,添加emoji或svg。
我需要一个水循环过程的 React 组件。左侧是动画,展示蒸发、凝结、降水和汇集四个阶段;右侧是对应的文字说明。请用 Web Speech API 添加自动语音播放功能,语音内容与文字一致。使用 SVG 制作动画,每个阶段持续8秒。整体设计要简洁明了,易于理解。请确保动画更流畅,文字更精简。并直接在 Previews 预览展示


不仅有动画自动演示,旁边还有水循环过程凝练的描述,十分清晰明了。当老师们讲一些复杂的概念时,在准备课件的时候能轻松地创建演示效果,又快又直观。这对于教师来讲可谓是省时省力的神器啊!

场景5:自建一个解压神器网站

前两天逛网站,发现一个好玩的网站,这个网站是一个展示 90 年代风格鼠标效果的网站,旨在展示这怀旧的鼠标效果。它展示了一系列通过 JavaScript 实现的鼠标特效,可以跟随你的鼠标移动或手指触摸。你可以点击任意位置来切换不同的效果,比如彩虹效果等。那试试用 Poe 的 Preview 功能试试看。

提示词:

创建一个解压神器,这是资料:

https://cursoreffects.com/

https://github.com/tholman/cursor-effects
第一次简约风格:
第一版风格太简洁了,我让 Claude 3.5 Sonnet 美化一下,增加了绿色按钮和白色背景,同时鼠标效果由4种增加到11种
但是这时候发现“文字”和“光标特效”占了整个屏幕,没法更好地看到鼠标点击的效果。继续调整跟 Claude 3.5 Sonnet 说:空出中间位置,同时继续美化视觉效果,就有了下面2种不同风格的效果。
我们会发现这一版颜色上采用了渐变色,同时非常清爽;中间位置也空了出来,整体效果还不错。

粉色渐变效果

蓝色渐变效果
其实上面的效果就已经挺满意的了,但我想整个页面更加简洁。细细观看我们会发现:
  • 整个页面文字居多,中间的两行小字意思重叠,可以删掉一个;
  • 下方的光标特效昵称占位置太大,太吸引注意力,可以迭代成1个按钮,随着玩家的点击而变化。
我接着继续跟 Claude 3.5 Sonnet 说要简洁清晰一些,最终效果如下,颜色上也相对淡雅一些,整个页面显示的内容也相对完整,没有多余的内容。
最终优化后,替换了跟风格更加贴切的字体,整个背景颜色是随机渐变的,非常有趣。

最后

无论是 Poe 还是 Claude,Preview / Artifacts 的出现让屏幕里的文字、代码 ➡️ 视觉化,这一步变得更加简单,且容易实现。

  • 对于开发者来讲,Artifacts 可以生成和修复代码,减少手动编码时间;

  • 对于团队协作来讲,能够在同一平台上实时查看、编辑和构建内容,极大程度上减少了信息传达之间的损耗。

  • 对于针对教育工作者来讲,使用 Claude 3.5 Sonnet 生成教学内容和演示文稿,简化制作过程。而学生能更加容易地获取学习资源,用实时演示来增强学习兴趣。

无论是开发者还是团队协作,还是教育工作者,对于日常工作和生活效率都提升了很多。像这样的场景,生活中还有很多......

我当时做完解压神器,就直接把自制的解压神器分享给了身边的程序员朋友,这是和他的对话。

他说:“像这样的代码要写一天”,而我今天最多只用了半小时就实现了,(PS:代码小白)这何尝不是一种AI走进寻常百姓家的开始呢?

期待未来更多 AI 走入寻常人家,走进大家的视野。


53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询

扫码登录
登录即表示您同意《53AI网站服务协议》
服务协议

欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。

在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。

一、 定义

本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。

会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。

知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。

二、 账号注册与登录

登录方式:本网站支持以下登录方式,您可根据实际情况选择:

微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。

手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。

账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。

实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。

未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。

三、 服务内容与规范

知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。

服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。

禁止行为:您在使用服务时不得实施以下行为:

利用技术手段批量爬取、下载、转存知识库内容;

将知识库内容用于商业目的或未经授权地向第三方传播;

干扰本网站正常运行或侵犯其他用户合法权益;

发布违法违规信息或从事违反公序良俗的活动。

四、 知识产权声明

权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。

有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。

侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。

五、 个人信息保护

我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。

您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。

您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。

六、 免责声明

内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。

不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。

第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。

七、 违约责任

如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。

如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。

八、 法律适用与争议解决

本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。

因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。

九、 其他

本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。

本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。

我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。


已查阅