当前位置: 首页 > news >正文

有了CodeBuddy,10分钟上线MBTI测试网站

还在为工作琐事烦恼?别人用腾讯云代码助手CodeBuddy一句话生成自动化脚本准时下班,你还在手动操作!看到热门MBTI测试爆火?不用写代码,10分钟你也能做出同款。这年头,会用AI工具才是真本事,CodeBuddy让你轻松变身职场效率王!

第一步,首先在你的电脑上新建一个文件夹,然后用VSCode打开它,在左侧扩展点击CodeBuddy标志。见下图界面,左侧是AI聊天窗口,点击进入Craft界面,就可以开始了!

descript

这里,我们将创作过程优化为清晰的"方案先行"模式,先要CodeBuddy生成一个MBTI网页实现方案,然后再让CodeBuddy根据网页方案实现功能。

第二步,在输入框中跟CodeBuddy说说你的需求,输入以下提示词:

我现在想要做一个mbti的测试网站,你觉得应该怎么做呢,请先不要生成代码,请先给我方案,包括题目如何设置,从哪里获取的,我就希望搭建前端页面能实现吗,如何通过用户的回答判定是什么人格等等问题,请都阐释清楚,给我一个方案

CodeBuddy开始飞速思考,制作这个方案,看看想要添加或删除什么功能。

descript

第三步,让AI根据方案实现MBTI网页,大概花了30秒,确认方案后,代码生成引擎开始构建完整的前端框架:从HTML基础结构到CSS视觉样式,再到JavaScript交互逻辑,每个技术层都自动装配到位。

descript

在聊天输入框上方会问你接不接受它提供的代码

小白不懂代码,点击「全部接受」试试看。

descript

全部接受代码之后,我们在文件管理器中找到 index.html 文件后双击运行,就可以打看MBTI前端页面啦~

descript

descript

太棒了!MBTI测试网站已经初具雏形啦~现在进入最好玩的"找茬+魔法改造"环节!就像玩电子游戏一样,现在我们可以:

1. 在浏览器里点点看(比如发现"下一题"按钮没反应)

2. 直接告诉AI:"点击下一题无法跳转"

3. 看AI秒变代码医生,唰唰唰给出修复方案

4. 点"接受"让魔法生效

5.  刷新页面继续测试

CodeBuddy提示词如下:

我希望点击选项之后可以跳转到下一个问题,请修复这个问题,问题下面设置两个按键,一个是上一题,一个是下一题,逻辑是点击选项之后自动跳转到下一个问题,点击上一题返回到上一题同时显示选择的选项,如果是在没有回答该问题时点击下一题按钮,则提示“请先回答问题”

修改过程如下图:

这样来来回回玩个三四轮,你的网站就会像被施了成长魔法一样,从蹒跚学步的小菜鸟变成能跑能跳的成品啦!整个迭代过程高效流畅,每次修改都能立即看到明显改进~

再点击双击index.html文件运行,最终的MBTI网站如下:

相关文章:

  • PiliPlus 非常好用的开源软件第三方B站哔哩哔哩 v1.1.3.35
  • upload-labs通关笔记-第18关文件上传之条件竞争
  • 文件操作和IO-3 文件内容的读写
  • QScrollArea内容增加后自动跳到底部
  • Python生成物理引擎的简单知识图谱
  • JavaScript 垃圾回收与内存泄漏
  • JavaScript中从原数组中删除某个元素
  • STM32 CAN CANAerospace
  • 使用 Docker 搭建 PyWPS 2.0 服务全流程详解
  • matIo库及.mat数据格式介绍
  • AI智能分析网关V4区域入侵检测算法:全功能覆盖,多场景守护安防安全
  • 【技术追踪】ADDP:通过交替去噪扩散过程学习用于图像识别和生成的通用表示(ICLR-2024)
  • 【Linux 学习计划】-- makefile
  • 6.13.拓扑排序
  • 危险品摆渡人
  • BSD 操作系统的历史、影响及贡献
  • day33 python深度学习入门
  • k8s容器入门(1)有状态服务 vs 无状态服务 核心区别
  • 企业级爬虫进阶开发指南
  • Vue 3 与 Vue 2 的区别详解
  • 基于html5设计的网站建设/百度推广优化
  • 南京做网站哪家好/武汉seo优化分析
  • 深圳网站建设工作室/阜新网站seo
  • 用服务器ip做网站页面/网络服务提供者不履行法律行政法规规定
  • 写作网站vir/北京网站优化托管
  • 上网站建设/游戏优化大师有用吗