第3章 用Windsurf等5款工具可视化数据

第3章

用Windsurf等5款工具可视化数据

假设领导交给你一份包含上千甚至上万条记录的数据，要求你分析并可视化其中的关键信息用于向高层汇报，你是否会感到无从下手？如何分析这些数据？如何将分

析结果可视化？如何确保数据准确性？传统上，完成这项工作需要项目负责人、数据分析师、UI/UX（user interface user experience，用户界面用户体验）设计

师和前端开发工程师4个角色协同工作，通常耗时数天到数周。

而使用氛围编程工具，只需用自然语言向大模型描述数据分析需求，几分钟内即可自动生成HTML、CSS和JavaScript代码。在浏览器中打开后，你就能看到设计精美

的综合数据看板。大模型还能将这些HTML格式的看板转换为SVG格式，确保在缩放时保持清晰度，方便插入印刷品或演示文稿。

如果对大模型生成的数据分析结果的准确性有疑虑，可以让大模型对这些结果进行可靠性验证，作为自行调整的依据，或提供给数据分析师进行进一步验证。

先来看一下本章实战项目的具体需求。

3.1 需求分析

以逗号分隔各列数据的纯文本文件格式，文件后缀为.csv，可以用Excel打开，并另存为Excel格式。如果用Excel打开了一个Excel格式的数据表，也可

以将其另存为CSV格式。

本章的实战项目将分析一个包含上万条记录的CSV（comma-separated values）

数据集，并制作综合数据看板用于向高层汇报。这类项目通常具有以下特点。

・时间紧迫：领导往往临时要求汇报，需要在1～2天完成。

・展示要求：面向高层领导汇报，图表必须专业美观，且数据准确。

・多端适配：需要在会议室大屏、笔记本计算机、台式计算机、平板计算机或手机上正常显示。

・印刷需求：需要打印纸质报告。

・数据安全：确保企业内部数据不外泄。

假设企业高层关注2025年全球人工智能就业市场及薪资趋势。你在Kaggle网站（一个面向数据科学家和机器学习从业者的数据科学竞赛平台和在线社区，用于发布和

查找数据集）上找到了相关数据集（参见本书配套代码中的ch03- windsurf/ai_job_ dataset.csv文件）。该数据集全面展现了人工智能就业市场现

状，包含来自全球50多个国家/地区的主要求职平台的15000多个真实职位信息，具体包括：

・职位名称；

・薪资（统一换算为美元）；

Kaggle相应页面将这个经验等级的英文缩写EX描述为Executive（高管级），而不是Expert（专家级）。

・经验等级（入门级、中级、高级、高管级）；

・雇佣类型（全职、兼职、合同制、自由职业）；

・公司名称；

・公司所在国家/地区；

・公司规模；

・远程工作时间占比；

・技能需求；

・教育背景需求；

・工作年限需求；

・行业；

・职位发布日期；

・应聘截止日期。

・各职位的技能要求；

・不同国家/地区的就业机会对比；

・个人职业发展路径。

现需要快速分析这15000条数据，制作一个涵盖AI领域个人职业规划的可视化综合数据看板。

3.2 技术栈选型

针对3.1节描述的需求，可以选择以下4种技术栈来创建综合数据看板（为便于比较，下文中的实施周期均不包括数据分析师对最终数据看板中数据进行的准确性验

证时间）。

（1）AI生成HTML的技术栈。这种方案整合了HTML、CSS、JavaScript和Chart.js，简单直接，只需向AI描述数据分析需求，它就能自动生成完整代码，供浏览器预览

和微调。其优势显著，通用性强，可跨设备和浏览器运行，无须服务器部署，数据安全性高，使用门槛低，便于演示和分享。虽然在数据更新、后端功能和大数据处

理方面有所局限，但其最大亮点是极短的数据看板生成周期——仅需5～30分钟，远低于传统人工创建数据看板的7～11天的周期。

（2）Excel与图表技术栈。这需要依次完成数据导入、清理、创建透视表、制作图表和美化设计，最后导出文件。其优势在于普及度高、易于接受、便于演示，且几

乎无额外成本。但处理大量数据时性能欠佳，在美观度、交互性和移动端适配方面也有明显不足。该方案通常需要1～3天完成。

（3）帆软FineBI/FineReport技术栈。这需要完整的环境准备、数据连接、建模、组件制作和权限配置等专业操作。作为国产方案，它在政府和国企项目中广受欢

迎，具备完善的企业级特性和良好的中文支持。但其学习门槛高、许可证费用昂贵，且部署要求复杂。实施周期通常为4～9天。

（4）Vue.js与ECharts技术栈。这需要完整的前端开发流程，从项目初始化到最终部署。它具有高度可定制性、出色性能表现和现代化用户界面，且拥有成熟的技术

生态。然而，该方案要求较强的技术能力，开发和维护成本较高，且需要9～14天的开发周期。

如果人工使用HTML技术栈实现综合数据看板，需要以下步骤。

指标和图表数据。

（2）页面结构设计。UI/UX设计师设计信息架构和页面布局，确定图表类型和排列方式，绘制线框图和布局草图。前端开发工程师则用文本编辑器编写HTML网页结

构，将设计转换为代码。

（3）样式设计和实现。UI/UX设计师制定配色方案和视觉规范，设计卡片和按钮等组件，确保符合企业品牌形象。前端开发工程师将设计转换为CSS代码，实现响应

式布局。

（4）图表功能开发。前端开发工程师使用Chart.js图表库编写JavaScript代码，创建各类图表。

（5）数据集成。数据分析师将分析结果整理为JSON格式，验证数据的准确性和完整性。前端开发工程师将数据嵌入JavaScript变量中，确保与图表库兼容。

（6）测试和优化。前端开发工程师测试图表显示、浏览器兼容性、页面加载速度和移动端适配。数据分析师则检查数据准确性，确保分析结果符合业务预期。

如果使用AI生成HTML的技术栈，上述第1步至第5步可合为一步，如果负责数据准确性验证的数据分析师就在身边，那么就能将8～12天的人工开发时间缩短至半天左

右（含数据看板生成所需的5～30分钟及紧随其后的数据分析师验证数据准确性的时间），效率显著提升。

AI生成HTML的技术栈在交付效率上具有突出优势，将上述第1步至第5步传统“天”

级的开发周期压缩至“分钟”级，堪称革命性的技术突破。本章使用的Kaggle数据集仅包含公开的企业招聘信息，可安全地交由大模型分析，因此使用AI生成HTML的

技术栈能完全满足3.1节中的需求。基于这些考虑，本章将采用此技术栈。

接下来，我将依次介绍使用DeepSeek、Claude、Trae国际版、Cursor和Windsurf生成综合数据看板的具体实现过程，为你提供更多选择，并方便比较这些工具在数据

分析方面的表现差异。我会用Claude验证各看板中数据分析结果的可靠性（这符合 1.7节中的氛围编程大模型升级指导原则），从而总结出使用氛围编程方法制作既

美观又准确的数据看板的最佳方法。最后，我将简述使用其他氛围编程工具完成相同工作的体验。

为什么本章在介绍5款氛围编程工具与大模型组合来可视化数据时，把Windsurf搭配o3这个组合放到最后讲解呢？这是因为在撰写本书时，这个组合生成的数据看板

在数据准确性方面明显优于前面4个组合。但要注意的是，氛围编程领域发展迅

得出这个结论的探索过程并不会因技术发展而过时。因此，本章会完整还原我的探索历程，让你能够运用同样的方法在未来获得新的发现。

3.3 用DeepSeek搭配R1生成HTML数据看板

虽然使用氛围编程工具生成HTML格式的综合数据看板看起来简单，但对搭配的大模型而言，仍需完成3.2节中提到的前五个复杂步骤。在选择AI聊天应用类型的氛围

编程工具时，我优先考虑了DeepSeek（搭配DeepSeek-R1大模型）。这个选择不仅基于它的性能可与它首次发布同期备受瞩目的OpenAI的o1大模型相媲美，更因为它

是截至本书撰写时国内少有的用户协议不禁止商用的大模型，便于读者在工作环境中使用。

使用DeepSeek生成HTML数据看板的具体步骤如下。

（1）用计算机上的浏览器（因为后面需要上传CSV文件，所以使用DeepSeek手机应用不太方便）访问并登录DeepSeek网页端。

（2）点击左侧边栏上部的“开启新对话”按钮开启新对话，避免受之前对话上下文的影响。

（3）开启默认搭配的DeepSeek-R1大模型的“深度思考（R1）”模式，同时关闭 “联网搜索”功能。

（4）输入代码清单3-1所示的提示词。

代码清单3-1 listings/L3-1.md

我上传了一个Kaggle数据集“Global AI Job Market & Salary Trends 2025”。我主要关注3个职业规划方面的用例：（1）了解各职位的技能要求；（2）对比不同国家/地区的就业机会；（3）规划职业发展路

径。我希望能将这个数据集可视化。请帮我读取提供的CSV文件，生成一个HTML格式的综合数据看板。看板需要包含数据可视化设计，重点展示与职业规划相关的分析，并显示数据集中的总记录数。数据看板要

求使用浅色调。请提供可直接运行的HTML代码。

（5）上传CSV格式的数据集文件。点击提示词输入框右下角的附件按钮（），上传ai_job_dataset.csv文件。该纯文本文件大小为2.6 MB。

（6）提交。点击提示词输入框右下角的提交按钮（），开启DeepSeek-R1大模型的处理。仔细观察可以发现，DeepSeek会在答复区顶端提示“超出字数限制，

仅处理了前700条记录。

（7）运行。DeepSeek-R1大模型进行了75秒处理，生成了包含HTML、CSS和 JavaScript代码的综合数据看板（参见本书配套代码中的ch03-

windsurf/deepseek/ai_job_ dashboard-by-deepseek-with-r1.html文件，可直接在浏览器中打开查看）。在DeepSeek网页端，点击HTML代码结果卡片右上角的“运

行”按钮即可在界面右侧预览数据看板（3.3～3.7节都可以暂且只关注HTML代码运行是否报错及看板的可视化设计是否美观，至于看板中的数据分析结果是否准确，

参见3.8节讨论），如图3-1所示。

图3-1 在DeepSeek网页端点击“运行”按钮预览HTML格式数据看板

图3-1右侧的数据看板采用了响应式设计。在图3-1中，由于显示区域仅有我的笔记本计算机屏幕的一半宽度，因此看板呈现单列垂直排列布局。而把浏览器设置为全

屏显示并打开HTML文件时，看板会根据可显示的屏幕宽度和卡片宽度自动调整为2 列或4列布局，如图3-2所示。

图3-2 数据看板会根据可显示的屏幕宽度和卡片宽度自动调整为2列或4列布局

【避坑指南】使用DeepSeek智能聊天应用生成HTML综合数据看板时，开启默认搭配DeepSeek-R1大模型的深度思考模式能获得更高质量的代码吗？

不妨用科学方法做一个实验来一探究竟。

假设：开启深度思考模式的DeepSeek智能聊天应用能生成运行效果更好的HTML综合数据看板代码。

预测：使用DeepSeek聊天应用并开启深度思考模式时，将获得更高质量的数据看板代码。

测试1：在DeepSeek智能聊天应用中开启新对话，开启深度思考模式，输入代码清单3-1所示的提示词，并上传ai_job_dataset.csv文件。

测试2：在DeepSeek智能聊天应用中开启新对话，关闭深度思考模式，输入并上传与测试1相同的提示词和CSV文件。

我的实验结果支持上述假设：测试1中，DeepSeek成功分析了CSV文件的前700条数据，并生成了内容丰富的综合数据看板。测试2中，DeepSeek尝试在JavaScript代

码中添加包含全部15000条数据记录的函数，导致实验中断。

（注意，某些卡片样式可能与HTML看板有所差异），以便缩放时保持画质并无损插入演示文稿，可在DeepSeek中输入以下提示词追问：

请将你生成的HTML数据看板转换为SVG格式，并保存在相同的目录下。

如果在DeepSeek中很快就追问，大概率会遇到“服务器繁忙”的错误。此时可以打开Trae国际版（搭配Claude Sonnet 4大模型，使用Agent模式，使用Trae国际版的

方法参见3.5节）输入以下提示词（其中的#是在Trae的提示词输入框中引用某个文件的符号，免去了使用AI聊天应用时需要上传文件的麻烦）：

请把 #ai_job_dashboard-by-deepseek-with-r1.html 转换为SVG格式，并保存在相同的目录下。

【避坑指南】遇到DeepSeek网页端显示“服务器繁忙”怎么办？

在使用DeepSeek时，我经常遇到这种情况：刚完成首次对话想要追问，却收到“服务器繁忙”的提示。这里有3种解决方法。

第一种方法是等待几小时到一天后再尝试，不过这种方法特别需要耐心。

第二种方法是使用备用手机号码（可用身份证申请多个）重新登录。这样能快速继续使用，但会丢失之前的对话上下文，仅适用于可以重新提问的场景。

第三种方法是转向替代平台。可以选择其他搭配了DeepSeek-R1大模型的氛围编程工具，如元宝、秘塔AI搜索、纳米AI搜索和Trae国内版IDE等，也可以选择搭配了

Claude Sonnet 3.5及以上版本的大模型的氛围编程工具（如上面提到的Trae国际版或Windsurf）。需要注意的是，元宝、秘塔AI搜索、纳米AI搜索和Trae国内版

IDE这些氛围编程工具虽然都可搭配DeepSeek-R1大模型（可能是这些平台自己的私有化部署版本），但生成内容的质量可能不及DeepSeek官方平台（参见1.7节氛围

编程原厂优先指导原则），具体原因参见1.2.4节的避坑指南“大模型独立于氛围编程工具会导致什么令人困惑的现象？”。

在个人计算机的文件管理器中双击ai_job_dashboard-by-deepseek-with-r1.html 文件并用浏览器打开后，可以发现DeepSeek生成的综合数据看板确实有许多亮点，

不仅看板外观设计精美，而且其中包括“最高平均薪资”“最热门技能”“职位最多的国家/地区”“远程工作比例”“热门技能需求”“职业发展路径示例”等引

人注目的内容。

然而，这个看板也存在一些明显的局限。最主要的问题是数据处理量被限制在700 条以内。此外，“薪资最高的AI职位”卡片显示为空白，这个bug需要通过在对话

整处理这15000条数据呢？

3.4 用Claude搭配Claude Sonnet 4生成HTML数据看板

要完整处理这15000条数据，可以使用Claude智能聊天应用（搭配Claude Sonnet 4 大模型，并开启“Extended thinking”与“Web search”模式）。只需使用代码

清单3-1所示的提示词，上传包含15000条数据的CSV文件，即可生成综合数据看板的HTML代码（参见本书配套代码中的ch03-windsurf/claude/ai_job_dashboard-

by-claude-with- sonnet-4.html文件），如图3-3所示（使用了Claude桌面应用）。

图3-3 使用Claude桌面应用生成HTML数据看板

之后想要获得看板的SVG格式以便将整个看板以图片形式插入文档，可以用以下提示词将HTML格式的看板转换为SVG格式：

请将你生成的HTML格式的综合数据看板转换为SVG格式。

转换后的SVG格式数据看板如图3-4所示。

了Claude智能聊天应用能够处理完整数据集。看板中的“热门技能需求分析”“工作模式分析”“必备技能清单”等内容特别引人注目。

如果仔细看图3-4右上方的职业发展路径，会发现Claude搭配Claude Sonnet 4大模型错把EX解释为专家级，而不是Kaggle相应页面所描述的高管级（Executive）。

这也印证了1.7节中的氛围编程生成内容不完美指导原则的有效性。可以通过在提示词输入框中追问让大模型修复这个问题。

Claude智能聊天应用展现了出色的编程能力，在数据分析、页面设计、样式实现、图表开发和数据集成方面表现突出。不过，如果你暂时无法使用Claude，该如何选

择替代方案呢？通过实际测试，我发现搭配了Claude Sonnet 4大模型的Trae国际版和Cursor都是不错的替代选择。

3.5 用Trae国际版搭配Claude Sonnet 4生成HTML数据看板

Trae国际版是字节跳动于2025年1月21日推出的AI原生IDE，基于开源Visual Studio Code开发。它可以搭配Claude、Gemini、GPT和DeepSeek等大模型（字节跳

动在2025年3月3日推出的Trae国内版功能与国际版一致，但仅能搭配豆包和 DeepSeek，不能搭配国外大模型）。在Trae国际版推出的最初4个月里，用户可以

免费使用包括Claude最新版在内的所有大模型。这让Trae国际版在国内氛围编程社区迅速走红，但高峰时段使用Claude最新版大模型生成代码时常需要排队等候上百

人。直到字节跳动于2025年5月27日推出Trae Pro订阅服务（只针对Trae国际版），用户才能无须排队地使用Claude Sonnet 4大模型生成代码。如果你还未安

装Trae国际版，可以参考附录A.1的安装指南。

要使用Trae国际版生成包含15000条数据的HTML数据看板，首先需要将CSV文件保存到本地计算机的指定目录中。然后用Trae国际版打开该目录并打开CSV文件，这样

就能在与Claude大模型对话时将文件加入上下文。

在Trae国际版中，点击界面右上方的按钮即可打开右侧的AI聊天界面。在对话框中选择Agent模式，搭配Claude Sonnet 4大模型，然后可以输入与代码清单3-1

相似的提示词，但这里可以使用“#”符号来引用文件和目录（在提示词输入框中输入“#”后，可从弹出菜单中选择文件或目录，而且左右无须添加空格，这比

Cursor左右需要添加空格要方便），从而实现精确定位，如图3-5所示。

图3-5 在Trae的提示词中使用“#”符号来引用文件和目录

注意图3-5右上方提示词中的“ch03-windsurf”。虽然在编写这段提示词时该

目录仅包含“ai_job_dataset.csv”一个文件，但随着目录内容增多，这种写法会导致Trae将所有文件作为上下文传递给大模型，消耗大量token，因此，在实

际对话时，代码清单3-2中的提示词已经删除了该目录引用。

【避坑指南】在提示词中引用代码时，目录范围该如何掌控？

引用代码时要把握适度原则。如果为了引用一个文件而把整个目录都加入提示词，会导致上下文中包含大量无关代码。这不仅会增加token消耗，还可能让AI产生幻

觉，错误地修改了不该动的代码。

windsurf/prompts/ prompt-data-dashboard.md文件）。

代码清单3-2 listings/L3-2.md

我有一个Kaggle数据集“Global AI Job Market & Salary Trends 2025” #ai_job_dataset.csv。我主要关注3个职业规划方面的用例：（1）了解各职位的技能要求；（2）对比不同国家/地区的就业机会；

（3）规划职业发展路径。我希望能将这个数据集可视化。请帮我读取提供的CSV文件，生成一个HTML格式的综合数据看板。看板需要包含数据可视化设计，重点展示与职业规划相关的分析，并显示数据集中的总

记录数。数据看板要求使用浅色调。请提供可直接运行的HTML代码。

要将Claude Sonnet 4大模型在聊天区生成的HTML代码保存到Trae国际版新创建的 HTML文件中，只需点击代码右上角的“Apply”按钮，再点击提示词输入框右上方

的“Accept All”按钮即可，如图3-6所示。

图3-6 在Trae中接受大模型对代码的改动

在浏览器中打开这个HTML文件（参见本书配套代码中的ch03-windsurf/trae-withclaude/ai_job_dashboard-by-trae-with-claude-4-sonnet.html文件）即可查看

数据看板。如果你担心将HTML格式的数据看板截屏插入演示文稿会导致文字模糊，

Claude Sonnet 4大模型把HTML格式的看板转为SVG格式的图形文件（参见本书配套代码中的ch03-windsurf/trae-with-claude/ai_job_dashboard-by-trae-with-

claude-4-sonnet.svg文件），这样就能无损缩放并插入文稿：

请你把你刚生成的整个HTML综合数据看板转换为SVG格式。

Trae国际版转换后的SVG图形文件如图3-7所示。

图3-7 Trae国际版将HTML格式的看板转为SVG格式的图形

现Trae国际版搭配Claude Sonnet 4大模型错把EX解释为专家级，而不是Kaggle相应页面所描述的高管级（Executive）。这也印证了1.7节中的氛围编程生成内容不

完美指导原则的有效性。可以通过在提示词输入框中追问让大模型修复这个问题。

3.6 用Cursor搭配Claude Sonnet 4生成HTML数据看板

如果你订阅了Cursor Pro服务，那么也可以使用Cursor来生成HTML综合数据看板。

如果你想安装并免费试用Cursor两周，可以参考附录A.2进行安装。

Cursor的使用方法与Trae国际版大体上很相似，都需要先将CSV文件保存到本地计算机的指定目录中，然后用Cursor打开该目录并打开CSV文件，这样就便于在与

Claude大模型对话时将文件加入上下文。但将这个2.6 MB的大型CSV文件加入上下文的方法与Trae不同，即把大文件加入对话上下文最有效的方法是右键单击左侧文

件树中的CSV文件，然后在弹出的菜单中选择“Add Files to Cursor Chat”。这样这个CSV文件就不是以引用的形式出现在提示词中，而是以上下文的形式出现在

提示词输入框顶部，如图3-8所示。

【避坑指南】有哪些方法可以将CSV文件加入Cursor的提示词上下文中？

在Cursor中将CSV文件加入提示词上下文的方法取决于这个文件的大小。

如果CSV文件小于1 MB，那么加入与大模型对话的上下文有4种办法。

（1）在提示词中使用“@”：先打开这个文件，然后在提示词中输入“@”（注意确保“@”的左右都有一个空格），之后在弹出的菜单中选择“Files &

Folders”，然后在新弹出的菜单中选中这个文件，之后这个文件就以引用的形式（如“@ai_job_ dashboard-by-cursor-with-claude-4-sonnet.html”）插入提示

词中。

（2）在提示词中使用“#”：先打开这个文件，然后提示词中输入“#”（注意确保“#”的左右都有一个空格），之后在弹出的菜单中选中这个文件，就能把这个

文件加入上下文（能在提示词输入框顶部看到这个文件），但不会以引用的方式出现在提示词中。

（3）选择“Add Files to Cursor Chat”：在Cursor左侧文件树中右键单击这个文件，在弹出的菜单中选择“Add Files to Cursor Chat”，这个文件就会出现在

提示词输入框顶部。

（4）点击提示词输入框左上方的“@”：点击提示词输入框左上方的“@Add Context”按钮，就能在弹出的菜单中选中这个文件，把这个文件加入上下文，这

个文件会出现在提示词输入框顶部。

如果CSV文件大于1 MB，例如本章中的这个2.6 MB的大型CSV文件，那么上述4种方法中，只有后两种起作用。

我在Cursor（搭配Claude Sonnet 4大模型，选择Agent模式）中首先使用代码清单 3-2所示的提示词来生成HTML数据看板。点击“Accept all”按钮后，按照大模型

的提示，我将Cursor生成的HTML文件与CSV文件放在同一目录下。然而，用浏览器打开HTML文件时，出现了“Error loading data”（载入数据时出错）错误，并提

示需要将CSV文件放在同一目录下。这让我意识到Cursor生成的数据看板依赖于CSV 文件才能运行，而我需要的是一个包含了分析好的数据且能独立运行的HTML文件。

这是因为我在提示词中没说清楚。从这一点能看出，在氛围编程中要实现“首次对话即成功”是多么不容易。那些“单次对话即成功”（指虽然首次对话没有成功，

但经过反复迭代并优化提示词，最后实现在单次对话中达到与“首次对话即成功”

相同的效果）的提示词，大多需要根据大模型生成代码的实际表现不断调整才能得

行的HTML”，如代码清单3-3所示。

代码清单3-3 listings/L3-3.md

我有一个Kaggle数据集“Global AI Job Market & Salary Trends 2025”。我主要关注3个职业规划方面的用例：（1）了解各职位的技能要求；（2）对比不同国家/地区的就业机会；（3）规划职业发展路径。

我希望能将这个数据集可视化。请帮我读取提供的CSV文件，生成一个HTML格式的综合数据看板。看板需要包含数据可视化设计，重点展示与职业规划相关的分析，并显示你实际分析过的数据集中的总记录数。

数据看板要求使用浅色调，且不依赖那个CSV文件就能用浏览器独立打开并运行，也无须用Python启动一个Web服务器。请提供可直接运行的HTML代码。

这样，Cursor就能很好地按要求生成能独立运行的HTML数据看板了。

【避坑指南】如果氛围编程工具生成的代码效果不符合预期，该怎么办？

首先要端正心态。在用氛围编程方法生成代码时，不要期望“首次对话即成功”

（可参考1.7节的氛围编程生成内容不完美指导原则）。虽然第6章在特定场景下的实战目标就是要达到这种效果，但如果你读完那一章就会发现，这样的目标需要反

复迭代才能实现，而介绍这个迭代过程整整花了一章的篇幅。

然后你需要根据观察到的现象来调整提示词。向大模型明确说明你希望看到的效果（例如“不依赖CSV文件就能独立运行”）和不希望看到的效果（例如“无须启动

Python Web服务器”）。之后查看生成结果，如果仍不满意，就继续调整提示词，反复迭代直到达到预期效果。

Cursor生成HTML文件后就可以用浏览器打开刚生成的HTML文件（参见本书配套代码中的ch03-windsurf/cursor-with-claude/ai_job_dashboard-by-cursor-with-

claude-4- sonnet.html文件）查看数据看板。如果想把HTML版的看板转为SVG图形，可以在Cursor的AI聊天区使用下面的提示词追问（注意在Cursor的提示词中引

用文件用“@”或“#”，并且在输入“@”或“#”时确保其两边都有一个空格才能从弹出的菜单中选择文件，这一点与在Trae中用“#”作用一样，但所使用的符号

可以多一种选择）：

请你把 @ai_job_dashboard-by-cursor-with-claude-4-sonnet.html 所生成的综合数据看板整个转换为 SVG格式，并保存在相同目录下。

【避坑指南】为何在Cursor的提示词输入框里输入“@”或“#”没有菜单弹出？

当在Cursor的提示词输入框中输入“@”或“#”符号想让菜单弹出以便选择要加入

然后将光标退回一个空格，在两个空格之间输入“@”或“#”，这样就能看到弹出的菜单了。产生这个问题的原因可能是Cursor在识别这些特殊符号时默认认为每个

英文单词之间都应该有空格，而用中文写提示词时通常不会在每个字之间添加空格。相比之下，Trae没有这个问题，可以随时输入“#”弹出菜单。

用Cursor转换后的SVG格式数据看板如图3-9所示。

如果细心观察图3-9就能看出，这张图中白色字体的标题在浅灰色背景的衬托下很难看清。另外，图中显示的分析过的总记录数不是15000条，而是14999条。这说明

即使是Cursor搭配Claude Sonnet 4大模型这样的在撰写本书时的顶级组合，也会在首次对话后生成有瑕疵的代码。这两个问题可以在与大模型的对话中进行追问，

让它修复。这也启发我总结出1.7节中的氛围编程生成内容不完美指导原则。

在本书撰写期间，Cursor作为AI原生IDE在氛围编程领域占据市场领先地位，而 Windsurf 紧随其后。那么，接下来看一下用Windsurf 生成HTML数据看板的效果如

何。

3.7 用Windsurf 搭配o3-high-reasoning生成HTML数据看板

Windsurf公司的前身是Codeium公司。Codeium公司于2021年创立，最初名为 Exafunction，专注于GPU虚拟化。2022年10月，Codeium公司首次发布了传统IDE的

AI插件Codeium的beta测试版。

2024年11月13日，Codeium公司基于开源Visual Studio Code发布了AI原生IDE—— Windsurf。这是对集成开发环境（IDE）的全新诠释，因为它是全球首个具备Agent

模式（即智能体模式，Codeium称之为Cascade，能够自动感知整个IDE打开的代码库，并进行多文件和多步骤的代码修改）的AI原生IDE。11天后，Cursor才在0.43

版本中推出其Agent模式。正如一位博主所说，使用Cursor的Agent模式的用户应该感谢Windsurf的开创性贡献。2025年4月，Codeium公司正式更名为Windsurf公司，

反映了公司从自动补全插件（Windsurf也出品了同名的传统IDE中的AI插件）转向全功能AI原生IDE的战略转型。

在2025年6月3日之前，搭配Claude 3.7的Windsurf是一款出色的AI原生IDE。然而，当5月6日有消息传出OpenAI同意以约30亿美元收购Windsurf公司后，竞争对手

Anthropic公司开始限制Windsurf使用Claude的权限。6月4日，Windsurf公司的CEO 在X平台上表示，Anthropic公司在仅提前5天通知的情况下就切断了Windsurf对几

乎所有Claude 3系列大模型的访问。此后，我在6月中旬尝试使用Windsurf搭配 Claude Sonnet 3.7时因“context deadline exceeded”（上下文超出最后期限）

错误而停滞（但在2025年7月中旬，Cognition公司收购了Windsurf，Anthropic公司又恢复了Windsurf完全访问Claude Sonnet 4大模型的权限，故Windsurf搭配

Claude Sonnet 4又成为氛围编程的一个良好选择）。

于是，我只好在Windsurf中尝试搭配其他大模型。在搭配大模型前，我在Windsurf 中打开ai_job_dataset.csv文件，使用代码清单3-3的提示词，并在数据集名称后

（之后可以付费订阅Pro版），可以参考附录A.3进行安装。

当搭配谷歌的Gemini 2.5 Pro大模型时，等待9分钟后大模型回复代码生成因 “Error while editing ai_job_dashboard.html”（在编辑

ai_job_dashboard.html文件时发生错误）而中断。我转而尝试OpenAI的o3-highreasoning大模型，但它只生成了一个外观简陋的三卡片看板，如图3-10所示（为

提升清晰度已转换为SVG格式）。

如果仔细观察图3-10就会发现，中间那个卡片的标题中的“AI位”其实应该是“AI 职位”。另外图3-10上面第二行文字“共分析14,999”，而不是“共分析

15,000”，也说明大模型在本次对话中生成的代码并不完美。这两个问题可以通过在同一对话中向大模型追问来解决。这也体现了1.7节所总结的氛围编程生成内容

不完美指导原则的适用性。

读到这里，你可能会觉得，Windsurf虽然优秀，但失去了Claude这样称手的工具后，就难以发挥其全部实力。但事实真的如此吗？

3.8 验证数据准确性

正如3.2节中人工使用HTML技术栈实现综合数据看板步骤的第6步“测试和优化”所述，在大模型生成数据看板后，需要验证数据的准确性。传统上，这项工作由数据

分析师完成。但在氛围编程时代，可以借助大模型来辅助验证。

由于验证过程只需提供数据集CSV文件和生成的HTML代码，且不涉及新代码生成，使用AI聊天应用是最便捷的方式。目前在分析15000条数据并提供可靠答复方面，

Claude是最佳选择。

我的验证计划如下：首先让Claude（如因故无法访问，可用Windsurf搭配Claude Sonnet 4替代）读取CSV文件，验证其自身生成的HTML代码中的数据分析准确性。

接着，依次验证其他工具生成的HTML代码，包括Cursor、Trae国际版、Trae国内版、Windsurf搭配o3-high-reasoning大模型和Windsurf搭配o3大模型（这些都分

析了全部15000条数据）。最后验证DeepSeek搭配R1大模型生成的HTML代码（仅分析了前700条数据）。

我启动Claude桌面应用，搭配Claude Sonnet 4大模型并开启“Extended thinking”模式。上传ai_job_dataset.csv和此前Claude生成的HTML数据看板文件

后，我提交了如下提示词：

我已上传两个文件：一个CSV文件，以及一份基于该CSV文件生成的HTML格式数据分析报告。请帮我验证 HTML报告中的分析结果是否与CSV原始数据相符。请按HTML报告中分析结果的顺序逐一核实。如有不一

致，请告诉我基于CSV数据应得出的正确分析结果。另外，请保留你对CSV文件的分析结果，因为我稍后会提供其他版本的HTML格式数据分析报告，需要你进行同样的验证工作。

Claude首先分别列出了HTML看板分析数据中完全准确的部分、略有差异的部分和存在明显错误的部分。最终总结指出：在详细的数据分析方面（包括技能需求、薪资

位类型数量和国家/地区数量的统计出现了明显偏差。

随后，我在同一对话中上传了此前由Cursor（搭配Claude Sonnet 4大模型）生成的HTML看板文件，并提交了新的验证请求：

我已上传基于之前提到的CSV文件生成的另一份HTML格式数据分析报告。请帮我验证HTML报告中的分析结果是否与CSV原始数据相符。请按HTML报告中分析结果的顺序逐一核实。如有不一致，请告诉我基于CSV数

据应得出的正确分析结果。

Claude按相同方式分析了HTML看板数据的完全准确部分、轻微差异部分和明显错误部分，并给出了总结。随后，我采用同样的验证方法检查了其他版本，包括Trae国

际版（搭配Claude Sonnet 4大模型）、Trae国内版（搭配Doubao Seed 1.6大模型）及Windsurf（分别搭配o3-high-reasoning和o3大模型）。

在验证Windsurf搭配o3-high-reasoning大模型生成的HTML看板时，Claude给出了 “数据准确性方面表现完美！”的结论。看板中的所有数据（包括前20项技能需

求、前20项国家/地区职位机会，以及0～19年工作经验的薪资数据）都完全准确。

随后验证的Windsurf（搭配o3大模型）看板也达到了100%的准确率。尽管这两种搭配生成的HTML看板在美观度上不如其他氛围编程工具，但其完美的数据准确性让我

对Windsurf搭配o3大模型刮目相看。

最后，我验证了DeepSeek（搭配DeepSeek-R1大模型）生成的HTML看板数据准确性，使用了如下提示词：

我已上传一份HTML格式的数据分析报告，该报告基于之前CSV文件的前700条数据生成。请帮我核实HTML报告中的分析结果是否与CSV前700条原始数据相符。请按照HTML报告中分析结果的顺序逐一验证。如发现任

何不一致，请告诉我根据这700条CSV数据应得出的正确结果。

Claude验证DeepSeek生成的看板数据后得出了令人震惊的结论：根据对CSV文件前 700条数据的详细检验，这份HTML报告（DeepSeek搭配DeepSeek-R1大模型生成）的

数据准确性表现极差。统计卡片中的所有数据都出现错误：最高薪资职位的薪资被高估了4万美元，Python技能需求被高估了181%，职位最多的国家/地区的职位占比

被高估了433%。此外，国家/地区的职位分布数据完全是虚构的，各经验级别的薪资数据也都系统性偏高。

最后，Claude贴心地对本次对话中验证的所有氛围编程工具组合生成的HTML数据看板进行了数据准确性排名，结果如表3-1所示。

表3-1 氛围编程工具组合生成的HTML数据看板的数据准确性

通过表3-1中的排名可以发现一个有趣的现象：外观简陋的看板数据准确性较高，而外观精美的看板数据准确性却较低。如何能兼具数据准确性和视觉吸引力呢？这

个问题其实有一个巧妙的解决方案：可以先用Claude、Cursor、Trae或DeepSeek生成一个视觉效果出众的综合数据看板；然后确定所需的数据分析维度，再用

Windsurf搭配o3大模型进行精确分析；最后，将准确的数据填入美观的看板中。这样的数据看板就兼具数据准确性和视觉吸引力了。这启发了我总结出氛围编程多工

具组合指导原则（参见1.7节）。

那么，除了表3-1列出的这些氛围编程工具与大模型组合外，其他工具与大模型的组合表现如何呢？

3.9 用其他氛围编程工具开发数据看板的体验

Trae国内版IDE（搭配Doubao Seed 1.6大模型，选择Agent模式）在看板外观设计上表现不错。它成功按照代码清单3-3的提示词生成了独立运行的HTML数据看板。

虽然因为提示词未明确要求，看板包含了非预期的动态筛选功能，但通过追加提示可以修正这一问题。而当搭配DeepSeek-R1大模型时，Trae国内版生成的看板中只

有一个卡片正常显示。这表明Trae国内版确实与自家的Doubao大模型配合得更好（这启发我总结出了1.7节中的氛围编程原厂优先指导原则）。

成的HTML数据看板存在图表溢出卡片的问题。

除了之前已经介绍的DeepSeek和Claude，其他AI聊天应用的表现不尽如人意：天工只能读取数据集前40条数据；智谱清言仅支持Python数据分析，HTML技术栈支持不

足；豆包（开启深度思考）生成了76190行难以理解的HTML代码；元宝（搭配 DeepSeek-R1大模型）生成的看板显示职位数量为0；Kimi（开启长思考k1.5）提示

“对话长度超限”；而通义、阶跃AI、文小言、MiniMax、秘塔AI搜索、讯飞星火和纳米AI搜索则完全不支持上传CSV格式文件。

本章展示了如何使用氛围编程工具来分析和可视化上万条数据，并制作综合数据看板。那么，对于规模较小的数据集（如上百条记录），当需要通过特定规则提取关

键数据时，应该如何运用氛围编程方法呢？