Vibe Coding从零开始教你打造一个WebLLM页面

前言

Vibe Coding实战:本文将从零开始并且零代码教你打造一个漂亮的WebLLM页面,能够直接与大模型进行对话回复。我将使用Claude Sonnet 4 完成本次零代码的打造。

Step One

我们要选择一个合适的prompt让Claude完成本次需求。我们可以先写一个简单的prompt,交给claude让他完善一下prompt,再把Claude优化后的prompt再次交给Claude让它完成本次任务。

css 复制代码
创建一个通用的原生HTML/CSS/JS项目 项目名为WebLLM。帮我优化一下上述prompt

Step Two

我们把优化后的Prompt交给了Claude,初步生成第一个版本。我们可以看到Claude还是干得很不错的,生成了一个算是比较漂亮的页面而且还是响应式的(源码上有)。我试着询问它一个很简单的问题,请告诉我今天的日期,很显然它出现幻觉了,日期给了我们一个错误的时间。

要想一次性生成完美的项目是有些困难的,往往都需要一个不断迭代优化的过程。回到正题,我们要想打造一个WebLLM的页面,我们似乎还没有配置LLM使用的模型,我们还需要去选择一家大模型的API平台上申请。在这里我选择的是国产大模型DeepSeek,去官网申请API_KEYS后,我们就把配置信息交给Claude,让Claude给我们做好这一切,我们只需要校验结果即可。在等待之后,Claude生成了较为完善的版本。

经过实验Claude完成的任务还算是比较出色的,基本完成了需求。虽然说可能存在的些许bug,每当我们遇到bug的时候,我们可以把bug再次丢给Claude让它去解决bug。经过如此不断重复的迭代版本,我们这个WebLLM肯定能够变成一个成熟没有问题的小项目。

心得体会

在本次的Vibe Coding中,我没有编译任何一行的代码,最终完成了WebLLM的基本构建,花费时间也是很短暂,不得不感慨Claude的强大。与以往传统的开发来说,要是构建一个如此WebLLM所花费的时间和精力肯定是本次所花费的时间精力的数百倍。在如今AI爆发式的发展中,我们要拥抱AI,学会如何使用AI,让AI给我们的工作提升效率。

相关推荐
ygyqinghuan1 小时前
读懂目标检测
人工智能·目标检测·目标跟踪
华东数交1 小时前
企业与国有数据资产:入表全流程管理及资产化闭环理论解析
大数据·人工智能
liangshanbo12153 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
newxtc3 小时前
【昆明市不动产登记中心-注册安全分析报告】
人工智能·安全
techdashen3 小时前
圆桌讨论:Coding Agent or AI IDE 的现状和未来发展
ide·人工智能
CV实验室4 小时前
TIP 2025 | 哈工大&哈佛等提出 TripleMixer:攻克雨雪雾干扰的3D点云去噪网络!
人工智能·计算机视觉·3d·论文
余俊晖5 小时前
一套针对金融领域多模态问答的自适应多层级RAG框架-VeritasFi
人工智能·金融·rag
哆啦A梦15886 小时前
搜索页面布局
前端·vue.js·node.js
码农阿树6 小时前
视频解析转换耗时—OpenCV优化摸索路
人工智能·opencv·音视频
_院长大人_6 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js