有了CodeBuddy,10分钟上线MBTI测试网站
还在为工作琐事烦恼?别人用腾讯云代码助手CodeBuddy一句话生成自动化脚本准时下班,你还在手动操作!看到热门MBTI测试爆火?不用写代码,10分钟你也能做出同款。这年头,会用AI工具才是真本事,CodeBuddy让你轻松变身职场效率王!
第一步,首先在你的电脑上新建一个文件夹,然后用VSCode打开它,在左侧扩展点击CodeBuddy标志。见下图界面,左侧是AI聊天窗口,点击进入Craft界面,就可以开始了!
这里,我们将创作过程优化为清晰的"方案先行"模式,先要CodeBuddy生成一个MBTI网页实现方案,然后再让CodeBuddy根据网页方案实现功能。
第二步,在输入框中跟CodeBuddy说说你的需求,输入以下提示词:
我现在想要做一个mbti的测试网站,你觉得应该怎么做呢,请先不要生成代码,请先给我方案,包括题目如何设置,从哪里获取的,我就希望搭建前端页面能实现吗,如何通过用户的回答判定是什么人格等等问题,请都阐释清楚,给我一个方案
CodeBuddy开始飞速思考,制作这个方案,看看想要添加或删除什么功能。
第三步,让AI根据方案实现MBTI网页,大概花了30秒,确认方案后,代码生成引擎开始构建完整的前端框架:从HTML基础结构到CSS视觉样式,再到JavaScript交互逻辑,每个技术层都自动装配到位。
在聊天输入框上方会问你接不接受它提供的代码
小白不懂代码,点击「全部接受」试试看。
全部接受代码之后,我们在文件管理器中找到 index.html 文件后双击运行,就可以打看MBTI前端页面啦~
太棒了!MBTI测试网站已经初具雏形啦~现在进入最好玩的"找茬+魔法改造"环节!就像玩电子游戏一样,现在我们可以:
1. 在浏览器里点点看(比如发现"下一题"按钮没反应)
2. 直接告诉AI:"点击下一题无法跳转"
3. 看AI秒变代码医生,唰唰唰给出修复方案
4. 点"接受"让魔法生效
5. 刷新页面继续测试
CodeBuddy提示词如下:
我希望点击选项之后可以跳转到下一个问题,请修复这个问题,问题下面设置两个按键,一个是上一题,一个是下一题,逻辑是点击选项之后自动跳转到下一个问题,点击上一题返回到上一题同时显示选择的选项,如果是在没有回答该问题时点击下一题按钮,则提示“请先回答问题”
修改过程如下图:
这样来来回回玩个三四轮,你的网站就会像被施了成长魔法一样,从蹒跚学步的小菜鸟变成能跑能跳的成品啦!整个迭代过程高效流畅,每次修改都能立即看到明显改进~
再点击双击index.html文件运行,最终的MBTI网站如下: