丰富的线上&线下活动，深入探索云世界
做任务，得社区积分和周边
最真实的开发者用云体验
让每位学生受益于普惠算力
让创作激发创新
资深技术专家手把手带教
遇见技术追梦人
技术交流，直击现场
海量开发者使用工具、手册，免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
为开发者定制的Chrome浏览器插件
今年似乎大模型之间的“内卷”已经有些偃旗息鼓了，各大技术公司逐渐从单纯追求模型参数量的竞赛中抽身，转向更加注重模型的实际应用效果与效率，开始内卷起了LLM“载具”
不知道这个词是不是我第一个发明的哈，总之我更喜欢将结合了大模型的工具都称之为LLM“载具”，这些“载具”就像是为强大的大模型配备了各种增强功能的载体，使得它们能够更好地融入不同的应用场景中，解决具体的问题
涉及到编程和开发方面的，这两年就涌现出了至少五款以上的产品（其实远远不止这么点），有较为老牌的Cursor和Cline插件，今年新出的Bolt.new，还有Vercel推出的v0，甚至是国产的CodeFlying。这些工具的出现，不仅极大地丰富了开发者的工具箱，也为编程和开发带来了革命性的变化
这里再衍生一下，我们其实是可以得到一套完整的AI工具链的,即：底层大模型+全栈开发工具+前端微调工具+后端代码改写优化=ALL
为了让没有接触过的朋友能看懂，这里还是从0基础开始介绍一下AI工具链
2024年11月12日凌晨，阿里云通义大模型团队正式开源通义千问代码模型全系列，共6款Qwen2.5-Coder模型，每个规模包含base和Instruct两个版本（Base模型为开发者可以自行微调的基座模型，Instruct模型是可以直接聊天的官方对齐模型）。
其中32B尺寸的旗舰代码模型在十余项基准评测中均取得开源最佳成绩，成为全球最强开源代码模型，在多项关键能力上超越闭源模型GPT-4o。
具体在此不过多赘述了，可以翻看我之前的作品：
这意味着，只要有一个浏览器，就能创建、编辑、运行、调试并发布完整的应用程序。
并且，它的代码是开源的！这也意味着可以进行本地部署和调用本地模型！
到这里，其实就出现三条路了：
经过周周这几天实测，总结出各自优势劣势如下：
通过上述对比可以看出，本地部署的bolt.new实在是没有太大吸引力，在windows环境下部署过程繁琐不说，其能力也是在线版本的阉割版，所以这里并不推荐本地部署
周周这里尝试的是本地bolt.new+Qwen2.5-coder-7b：
所以还是老老实实使用官网提供的在线服务吧，普通版每个月也有免费额度的
鉴于v0在优化UI组件方面有着得天独厚的优势，所以我在此将其归类为了前端微调工具，主要用于对Bolt.new生成的前端进行优化
v0相比于Bolt.new的优势主要包括：
目前，v0仅能通过官网提供的在线服务使用，并不是开源项目
这里主要就是将上述两个工具产生的代码进行本地优化，实际上，除了Cursor以外，阿里的通义灵码，Vscode插件Cline都可以实现，其实最终理念还是代码编辑器+AI
实现路径也有三条：
值得注意的是，其实通义灵码有一个全新的功能极其适合在此处使用，即工作空间全局理解
该功能可以深度解析和理解本地代码库，为用户提供包括代码导航、智能问答、需求实现建议、代码生成与优化等一系列服务，旨在帮助开发者快速上手新项目、高效解决编码过程中遇到的问题，并提升整体开发效率。无论是在理解复杂的项目结构，还是在寻找特定代码片段、实现新功能需求等方面，@workspace都能提供强有力的支持。
本文后续的实践中也会将Cursor与灵码的使用进行一个对比的
到这里，相信大家对上述工具的能力都已经基本了解了，下面我们就按照这套工具链的流程进行一个实操演示
在真正开始之前，我们必须要做好关于prompt的准备，经过实测，prompt最好具备以下几个要点：
可以将该部分规范下载后放置到通义中进行理解，并让其按照规范编写prompt：
这里我们只需要得到一个初版prompt就可以了，后续的优化和修改可以直接在Bolt.new中进行
周周这里给出的prompt如下：
下面我们将这一部分prompt放入Bolt.new中
复制这段prompt，点击箭头执行：
我们可以看到Bolt.new依次执行了下述操作：
在Bolt.new回复时，我们也可以看到它给出的一段对于页面生成风格及功能的限定词
I'vecreatedamodern,professionalBaZifortunetellingwebsitewiththefollowingfeatures:Clean,modernUIwithsmoothanimationsandgradientsResponsivedesignthatworksonalldevicesProperformvalidationanduserfeedbackDetailedresultsdisplaywithmultiplesectionsProfessionaltypographyandspacingClearvisualhierarchyandintuitiveuserflowThesiteincludes:BirthdateandtimeselectionwithpropervalidationInformativesidebarexplainingtheBaZianalysisprocessBeautifulresultscardwithpillarsdisplayDetailedanalysissectionwithformattedtextSmoothanimationsandtransitionsProfessionaliconsfromLucideReact最终生成效果如下所示，使用后不难发现，现在还完全是一个静态界面，包括八字的生成及预测都是固定好的
下面我们继续给出需求，让Bolt.new在原有基础上继续优化，prompt如下：
已经初具雏形了，但是在体验上还是有一些不好，命理分析都是长串长串的文字，让用户很难看的很直观，所以我们继续优化
可以看出，优化前后对比真的是极其明显
其实，在刚才的优化中还碰到了bug，但是利用Bolt.new的自我修复功能成功解决了，这也是我为何推荐使用它生成框架的原因
到现在，这个框架已经差不多了，但是我想再加入一点特色功能，集成一个AI对话算命的功能，给出prompt如下：
IwanttoaddanAIfortune-tellingmodule.YouneedtohelpmeintegrateanAIfeaturesothatwhenusersconversewiththeAI,itcanpredicttheirfuturefortunes.我想新增一个AI算命模块，你需要帮我集成一个AI功能进行，实现当用户和AI对话时，AI就可以推算出用户未来的运势。最终效果如下所示：
我们也可以直接一键部署，但是显然，这里效果并没有达到我们的预期，而且每日token也用完了，怎么办呢？
接下来有两种方式：
第一种，我们先点击云编辑器：
进入如下界面：
复制对应代码到v0中进行优化，但是这种方式特别笨且不方便
第二种，我们将当前界面截图：
然后将图片上传到v0中
给出prompt如下：
Createawebsitethatmimicsthecurrentinterface,ensuringthatthelayoutandstructureareidentical.仿照当前界面，制作一个网站，需要确保布局和结构完全相同。在v0中渲染完毕后，我们可以看到几乎一模一样：
这时，我们可以直接给出前端优化的提示词：
似乎优化的有些过头了，如果觉得不满意，可以选择上面的版本进行回退：
看到这里大家可能会觉得v0也没有那么神，这个前端整体生成和bolt也差不多嘛，但是我想说的是，v0的核心能力是在于定向可控生成前端组件，如果系统自用倒是无所谓，万一是给客户使用难免得有一些定制化要求，这时，我们就可以通过v0来快速生成符合用户要求的前端组件。
比如说我在网上找到了一张八卦的图片，我想快速将其制作成动态的，同时将其集成到我的网站作为背景，那么我只需要做出如下操作：
第一步，将图片上传到v0作为附件
第二步，给出prompt如下：
Ontheexistingwebpage,addtheattachedBaguaimageandcreateananimatedbackgroundwithit.在原有网页的基础上，加入附件中的八卦图片并制作成动画背景效果立竿见影！
所以，这里也是我为何更提倡将v0作为一个前端优化工具的原因了
后面我们可以通过复制代码的方式，将制作出来的组件再丢给bolt.new进行整合
目前在网上也看到有人说可以直接在bolt.new的云环境中执行如下操作：
首先使用npxv0@latestinit在你的项目中初始化v0，然后在v0的代码导出页面，找到该组件的id，例如XXppPDLK7op。接着在你的项目中，执行npxv0addXXppPDLK7op命令，于是就将代码加入到你的项目中
这里暂时未经证实
还有一种方式就是，我们复制粘贴这个文件，发送给通义，让通义将v0的前端代码文件，组织到单独的组件中。也就是通过大模型的能力，将单个文件，拆分成多个组件，为了后期复用。
prompt如下：
然后我们将拆分后的这个组件，直接复制到bolt.new中进行优化：
不过bolt.new的免费token确实太少了，一不小心又限额了，所以这里也可以直接进行到下一个步骤，去cursor中进行前后端调整
我这里还是在bolt.new中优化的，但是很搞笑的是，它自动判定我图片太大了，给我进行了缩放和透明度修改，并且增加了一些若隐若现的效果，听起来似乎不错，但是实际情况如下：
好端端的八卦变成一个球了，不过这里也可以看出，bolt.new的前端能力是不如v0的
到这一步，我们可以把整个项目先下载到本地来
我个人推荐可以先利用通义灵码的全局代码功能快速熟悉代码框架，并推测出优化点，再结合Cursor及目前最为强大的Qwen2.5-coder-32b进行定向优化调整
如果通义灵码使用的习惯的朋友也可以直接全程使用通义灵码，因为其底层也是采用的Qwen2.5-coder-32b
这时可能有人要问了，你说如果他们底层如果都用Qwen2.5-coder-32b的话，那么灵码和Cursor不就是一样的了吗？？？
实则不然，他们之间仍存在差异，具体有以下几点：
我们先进到vscode中，打开灵码，输入/，选择@workspace，给出prompt，让其熟悉整个框架：
这里的重点就是，最好明确的指出项目的名称，比如：
PleasefamiliarizeyourselfwiththeoverallframeworkoftheXXXprojectandhelpmeunderstanditusingatreediagram.灵码给出的回答如下：
假如你对后端代码有所疑问或不满意，又或者想找一些优化点的话，可以继续给出如下提示词：
Iwanttofurtheroptimizethebackendcode.CanyouprovidesomeoptimizationsuggestionsFocusonoptimizingthebackendonly.这时，灵码给出的优化点如下：
用户需求总体分析针对后台代码优化的需求，计划从代码结构、性能和可维护性等方面进行改进。变更规划优化环境变量加载变更内容1.优化环境变量加载在项目的配置文件中，如vite.config.ts，添加dotenv配置以在前端开发服务器启动时加载环境变量。在vite.config.ts文件中，插入如下代码块：dotenv.config();总结通过在配置文件中添加dotenv配置，优化了环境变量的加载过程，提高了后台代码的可维护性。此时也可以选择直接插入该段代码即可：
不过说实话，感觉还是有些鸡肋，也有可能是bolt.new太过于强大了
我们最后一次给出优化prompt
ArethereotherareasthatcanbeoptimizedbesidesthisIfnot,pleaseprovidethedeploymentsteps.这次灵码又给出了新的优化项：
最后，我们给出prompt，让其告知部署步骤：
在灵码这边看完了，我们再来到Cursor这边看看
点击齿轮按钮，选择models，点击新增模型：
比如我选择通义千问2.5-coder-32B，点击查看详情，复制模型名称：
将复制后的名称填入Cursor中：
然后将其他模型调用全部关闭：
回到百炼，找到API调用示例：
复制此处到Cursor中：
点击百炼里的个人头像，选择API-Key，复制此处到Cursor中：
我们同样将代码放入Cursor中，需要注意的是Cursor可以依靠快捷键唤醒了
我们打开Ctrl+L，点此此处选择folders：
和灵码一样，选择到当前项目：
同样给出prompt，先进行框架理解：
PleasefamiliarizeyourselfwiththeoverallframeworkoftheXXXprojectandhelpmeunderstanditusingatreediagram.但是很蠢的是，即使能读到当前文件夹的内容，也没法像灵码那样进行完整的全局代码分析，当然，由于周周平常Cursor确实用的不多，所以也可能是这里没有掌握方法，欢迎大佬们交流探讨！
那没了这个能力，想要读懂全局代码就有一些难度了，你可以说Cursor从0开始写代码的能力很强，但是不能否认万一半途捡到个同事的屎山代码，此时通义灵码发挥的作用可能会更大一些！
所以这里我的推荐仍然是先用通义灵码理解整体框架，然后再依据个人喜好使用Cursor、灵码或Cline插件等进行实际开发工作。
这里也想再总结一下整个工具链：
如果没有项目原型，可以直接采用bolt.new生成，视个人要求采用v0进行前端优化、下载到本地结合编码工具（Cursor、灵码）进行整体优化或者二开等
如果已有项目原型，可以先去v0中优化前端效果，再结合编码工具（Cursor、灵码）进行整体优化或者二开（bolt.new会破坏原型）
除此，提示词在整个工具链中也扮演着重要角色，需要尽可能的保证自己的prompt准确、精炼，且最好采用英文的形式。
最后，也希望大家都能通过AI工具，开发出一个属于自己的网站！祝愿每位开发者都能在自己的项目旅程中收获满满，成就非凡！
本系统及其中的八字算命内容，旨在传承和弘扬中华传统文化，展示古代智慧的独特魅力。请注意，八字算命属于传统文化的一部分，其理论基础并非现代科学所能完全解释或验证。因此，我们建议观众朋友理性对待，不要过分依赖或盲目迷信。