前言
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给我们的工作提升效率。