因为忘记纪念日,女朋友又生气了!完蛋,忘记准备礼物了,怎么办?
我们都曾经历过这样的时刻:特殊日子临近却手忙脚乱,既想表达心意又缺乏创意。看着朋友圈里别人精心准备的惊喜,是不是有点焦虑?
上网一搜发现给女友的小惊喜其实方式还挺多的,像这类爱心网页就特别火!
于是我赶紧照猫画虎用CodeBuddy搞了几个。
这款爱心页面还融入了科技感的矩阵数字雨背景。效果真不错hh,看到这个礼物时她脸上的笑容,瞬间让之前的"冷战"烟消云散!
除了上面的爱心表白代码,3D相册,节日祝福也都是信手捏来!
看着这些效果是不是很炫?而且制作特别简单,代码是AI写的,这里我用的腾讯云代码助手的AI编程实现的。
官网:https://copilot.tencent.com/
腾讯云代码助手CodeBuddy对DeepSeek最新模型的支持相当不错,而且这应该是国内首个支持MCP调用的代码助手,这让我们写起代码来十分方便。
下面,江树和你分享上面的功能是如何实现的。不用担心,即使你完全不懂代码,也能轻松做出这些让TA心动的礼物!
01 环境准备
首先,我们要安装代码环境,访问腾讯云代码助手网页有详细的教程。
https://copilot.tencent.com/#install
- 首先需要安装VSCode,CodeBuddy官网上就有安装教程
安装教程:https://copilot.tencent.com/setup/vscode
- 然后在vscode里安装「腾讯云代码助手CodeBuddy」(名字好长hh)插件
添加腾讯云代码助手CodeBuddy
- 登录:安装好以后会提示登录
按步骤操作即可,登录成功即可使用。
- 可以使用以后,选择Craft模式。
Craft模式下会启动软件开发智能体,可以通过自然语言指令,AI深度理解需求,自主完成多文件代码编写与修改,自动生成可执行的应用。
代码智能体:Craft模式
我们的应用将在Craft的支持下直接完成。这意味着即使你对代码一窍不通,只要会打字描述你想要的效果,AI就能帮你完成剩下的事情。想想看,程序员男友的礼物,不懂代码的你也能轻松做出来!
02 制作爱心网页
超简单,3步就能搞定!
- 把下面的提示词发送给craft即可(记得把女朋友名字换成你自己的hh):
请帮我创建一个动态爱心HTML网页,爱心效果,爱人的名字 "小刘同学"。具体要求:
1. 页面应包含粒子效果的心形动画,心形应该由小粒子组成并且不断跳动/流动
2. 背景设计要有漂浮的文字效果,类似矩阵数字雨的风格
3. 颜色方案:
- 默认使用粉色爱心 (#ea80b0)
4. 整个页面应占满屏幕,自适应不同设备尺寸
5. 代码需要是完整且可直接运行的HTML文件
6. 如果可能,请解释代码中关键参数的作用,例如粒子数量、速度、大小等,以便我可以根据需要调整效果
这将用作一个浪漫的网页礼物,希望达到视觉上令人惊艳的效果!
- craft在收到提示词后会自动创建这个网页,我们记得选择deepseek模型,在代码写好以后点击接受即可。
- 在写好的代码love_page.html上点击右键,浏览器打开,就能看到效果了。是不是很简单?只用了几分钟,就做出了一个专属于你们的爱心页面!
我第一次做这个时,女友的反应让我受宠若惊:"这是你做的?太厉害了吧!"(其实我只是复制粘贴了提示词,哈哈)
我们还可以部署到yourware.so网站,将代码复制粘贴,然后发布即可。
比如爱心代码发布以后,你可以在下面的网站查看: https://wgh4hpf8mv.app.yourware.so/
发布后的链接可以通过微信直接分享给对方,想象一下Ta收到这个链接时的惊喜!
03 制作生日祝福网页
给妈妈的生日祝福,妈妈看了都感动!
这个流程和上面的爱心网页是一样的,把下面的提示词发送给craft即可:
请帮我创建一个HTML5生日祝福网页,带有绚丽的烟花特效,2s烟花后显示"妈妈生日快乐!"。要求如下:
1. 页面应该有以下特点:
- 黑色背景模拟夜空
- 多种形状的烟花动画效果(圆形、椭圆形、爱心形等)
- 烟花发射和爆炸的物理效果(包括重力、粒子散落等)
- 烟花应该随机生成并在屏幕上不同位置爆炸
2. 技术要求:
- 使用HTML5的Canvas实现所有动画效果
- JavaScript控制烟花的生成、物理运动和爆炸效果
- 全屏自适应不同设备尺寸
- 页面加载后自动开始烟花表演,无需用户交互
3. 代码组织:
- 包含完整的HTML、CSS和JavaScript代码
- 代码结构清晰,易于修改和自定义
- 可根据需要调整烟花数量、颜色和形状
- 提供关键参数的注释说明,方便自定义设置
这将用作一个特别的生日祝福,希望能创造出令人难忘的视觉效果!
效果如下:
我妈妈收到这个时特别开心,说这比买礼物还特别,因为她觉得好神奇hh。在外地工作的朋友们,是不是也想给家里人送一份独特的心意?
我也发布出来了,可以在下面的网页中查看: https://9y42eohfv6.app.yourware.so/
04 制作3D女友相册
我觉得这个也超赞!
同样的,把提示词发送给craft即可:
请帮我创建一个3D立体动态相册网页,类似抖音上流行的那种送给女友的特效相册,照片在photos目录下(命名为1-12,例如1.jpg,12.jpg)。具体要求:
1. 功能特点:
- 3D旋转效果:相册应该能够自动旋转,展示多角度视图
- 立体层次感:需要有小立方体和大立方体的双层结构
- 鼠标悬停交互:当鼠标悬停时,照片应该放大并展示更清晰的大图
- 完整的动画效果:包括旋转、放大、透明度变化等
2. 技术实现:
- 使用HTML和CSS3实现,不需要JavaScript复杂逻辑
- 利用CSS3的3D变换和动画属性(transform, animation)
- 页面布局要求自适应,在不同设备上都能正常显示
- 提供完整的代码,包括HTML结构和CSS样式
3. 个性化选项:
- 能够轻松替换照片:请提供清晰的图片替换说明
- 提供背景音乐添加方法
- 如何更换背景图片
- 如何调整动画速度或效果
4. 附加功能(如果可能):
- 背景音乐自动播放
- 如何将此网页设置为系统桌面的方法
请提供完整的代码和详细的使用说明,我希望即使不懂编程的人也能按照说明轻松替换图片和音乐来制作个性化的3D相册。
记得在项目下新建一个叫photos的文件夹,然后在下面放上12张女友照片,命名从1-12,像下面这样:
这个3D相册是我女友比较喜欢的一个礼物,她说这比实体相册还要特别,因为里面不只有照片,还有我们的故事。
我建议你选择那些有意义的照片,比如第一次见面、第一次旅行、第一次过节等重要时刻,这样整个相册就成了你们爱情的记录册!
(ps 如果3D相册要发布到网络上的话,把这些图片转成在线的图片链接,然后把12个图片链接放到提示词里即可)
05 MCP无敌
办公党和科研党可以好好研究一下hh
腾讯云助手还是国内首个支持MCP的代码助手,试着做了一个「公文素材抓取和整理」的测试,效果也挺不错的。
对于工作需要整理材料的朋友来说,这个功能简直就是救星!
使用方法如下:
-
首先按下图配置MCP Server
-
安装MCP Web Research Server
然后就可以愉快地使用MCP啦。记得之前我做项目时熬了一整晚找素材、整理格式,现在有了这个工具,整个过程缩短到了几分钟,是真的香啊!
- 回到craft,发送我下面的提示词:
我在整理公文素材,请帮我获取https://www.thepaper.cn/newsDetail\_forward\_21683146页面的金句,然后整理为主题,金句两列,保存为csv表格
- 整理好的素材可以直接放在ima等知识库中。
这个数据可以丢到ima知识库里作为素材使用。记得之前每次找素材都要自己复制粘贴、整理格式,现在只需要一个提示词,AI就能帮我们完成,工作效率直接提升50%!
- 进一步的,我们还可以用CodeBuddy进行词云等统计分析
进行词频统计分析:
绘制词云:
已经是一个大学课堂大作业了hh,放到报告里逼格一下就上来了,"数据处理很专业"hh!
最后
在这个"物质过剩而情感匮乏"的时代,真正稀缺的不是昂贵的礼物,而是那份"只为你量身打造"的专属心意。
这些AI礼物,本质上是用科技重新定义了"走心"的边界——它让我们能够以创意代替金钱,用巧思胜过奢华,让"表达爱"这件事回归到最本真的状态。科技的终极意义,从来不是展示它有多酷炫,而是让我们有能力将内心的温度,通过独特的方式传递给那个重要的人。
我是「云中江树」,这里每周为你分享AI工具、方法和观点。如果你觉得这篇文章对你有帮助,欢迎在评论区分享你的创作和收获!
👉 点赞、在看、分享三连支持 ,关注「云中江树」,深度驾驭AI!