大家好我是CSDN的一名技术博主。最近发现很多零基础的朋友对“虚拟产品”和“副业”很感兴趣尤其是看到一些爆款的心理测评、性格测试网页觉得既有趣又有潜力但苦于不懂编程不知从何下手。今天我就来分享一个完全面向纯小白的实战教程如何利用 WorkBuddy 这款AI工具零代码复刻一个功能完整的爆款心理测评网页。整个过程就像搭积木一样简单你将亲手打造一个属于自己的虚拟产品体验从想法到上线的完整流程。无论你是学生、运营还是想探索副业的开发者都能跟着本文一步步实现。1. 背景与核心概念为什么选择WorkBuddy在开始动手之前我们有必要先搞清楚几个核心概念这能帮助你理解我们正在做什么以及为什么这么做是最优解。1.1 什么是爆款心理测评网页这类网页通常具有以下特征交互性强用户通过回答一系列选择题如“在聚会中你更倾向于”A.主动交谈 B.安静观察最终得到一个个性化的分析报告如“INFJ型人格”、“色彩性格”。传播性广结果页面设计精美易于分享到社交媒体形成裂变。轻量级产品它不涉及复杂的后端逻辑、用户系统或支付初期核心是前端交互和结果生成逻辑属于典型的“虚拟产品”或“数字产品”。变现潜力可以通过嵌入广告、引导关注公众号、或提供更详细的付费报告来实现流量变现。传统开发这样一个网页需要学习HTML、CSS、JavaScript甚至一些后端逻辑门槛较高。而我们的目标是让完全不懂代码的“纯小白”也能完成。1.2 WorkBuddy是什么它如何帮助我们根据网络上的信息WorkBuddy是一款集成在浏览器侧边栏的AI助手工具。它的核心能力在于理解和执行自然语言指令并直接操作你当前浏览的网页或应用。对我们这个项目而言WorkBuddy的核心价值在于“对话式开发”你可以用中文告诉它“创建一个有标题和欢迎语的网页”它就能生成对应的HTML代码。“所见即所得”的修改你可以指着网页上的某个部分说“把这里的颜色改成蓝色”它就能直接修改CSS。逻辑生成你可以描述测评逻辑“如果用户选择A选项加1分B选项加2分最后根据总分显示不同结果”WorkBuddy可以帮助你编写实现这一逻辑的JavaScript代码。效率倍增省去了反复查阅语法、调试布局的时间将重心完全放在产品设计和内容策划上。简单来说WorkBuddy扮演了一个“懂你意图的资深程序员搭档”的角色你负责提出需求和创意它负责将之转化为代码。这完美匹配了小白用户“想创造但不会编码”的痛点。2. 环境准备与工具说明由于WorkBuddy是一款浏览器扩展工具我们的开发环境非常简单几乎零成本。2.1 所需工具清单一台电脑Windows、macOS或Linux系统均可。Chrome浏览器或Edge浏览器推荐使用最新版本。WorkBuddy插件你需要获取并安装WorkBuddy插件。请注意插件的获取渠道请务必通过官方或可信赖的来源关注其官方的发布动态。网络上提及的“兑换码”等信息请谨慎甄别以官方说明为准。一个文本编辑器可选但推荐如VS Code、Sublime Text或记事本。用于偶尔查看和备份代码。一个本地服务器工具可选但推荐由于涉及JavaScript模块等直接在浏览器中打开本地HTML文件可能会有限制。一个极简的方法是使用VS Code的Live Server插件或者Python的http.server模块。本文会提供最简单的方法。2.2 核心工具安装与验证Step 1: 安装WorkBuddy假设你已经通过可靠渠道获得了WorkBuddy插件通常是一个.crx文件或来自浏览器的扩展商店。打开Chrome浏览器进入扩展程序管理页面 (chrome://extensions/)。开启右上角的开发者模式。如果是.crx文件将其拖入扩展程序页面即可安装如果是从商店安装直接点击添加。安装成功后浏览器工具栏或侧边栏应出现WorkBuddy的图标。Step 2: 验证安装点击WorkBuddy图标其侧边栏应该成功弹出。你可以在输入框中用中文尝试一些简单指令例如“请帮我写一个显示‘Hello WorkBuddy’的网页。” 观察其响应确保它能正常工作。Step 3: 准备项目文件夹在你的电脑上创建一个新文件夹命名为my_psych_test。所有后续的文件都将放在这里。3. 产品设计与规划在让WorkBuddy动手之前我们必须自己先想清楚。这是最重要的一步决定了产品的成败。3.1 确定测评主题选择一个你感兴趣且有认知的主题例如经典MBTI性格测试16型人格压力指数评估职业倾向测评恋爱风格测试专属“精神动物”本文示例我们创建一个简化版的“情绪能量类型测评”将人的情绪处理方式分为“火焰型”、“海洋型”、“清风型”、“大地型”。3.2 设计测评逻辑为上述四种类型设计4-6个问题每个问题2-4个选项。每个选项对应为某种类型加分。例如问题1当你感到压力巨大时你第一时间会A. 找朋友倾诉或激烈运动火焰1B. 独自听音乐、写日记海洋1C. 告诉自己冷静分析问题根源清风1D. 通过整理房间、做美食来放松大地1问题2在团队中你通常扮演的角色是A. 推动进程的领导者火焰1B. 调和矛盾的润滑剂海洋1C. 提供创新点子的智囊清风1D. 确保细节无误的执行者大地1计分规则用户完成所有问题后累计四种类型的得分。得分最高的类型即为用户的测评结果。3.3 规划网页结构与页面我们的网页将包含三个主要部分首页 (index.html)精美的宣传图、测评标题、开始按钮。测评页 (test.html)逐题展示问题和选项有上一题/下一题和进度条。结果页 (result.html)根据最终得分展示对应的类型名称、详细解读和分享按钮。现在我们已经有了清晰的蓝图可以开始邀请WorkBuddy这位“搭档”来帮我们实现了。4. 实战开发从零到一构建测评网页我们将按照页面顺序一步步使用WorkBuddy进行开发。请确保你的WorkBuddy侧边栏已经打开并跟随操作。4.1 创建项目首页 (index.html)指令1创建基础HTML结构在WorkBuddy中输入请创建一个标准的HTML5网页骨架包含doctype, html, head, body标签。在head中设置字符编码为UTF-8视口设置适配移动端标题为“情绪能量测评 - 发现你的内在力量”。在body中先留空。WorkBuddy可能会生成如下代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title情绪能量测评 - 发现你的内在力量/title /head body !-- 页面内容将在这里添加 -- /body /html将这段代码复制保存到你的my_psych_test文件夹中命名为index.html。指令2添加首页内容现在我们需要在body内添加内容。你可以直接在WorkBuddy中针对这个已打开的index.html文件进行对话。请为这个网页的body部分添加内容。要求1. 一个居中的容器div。2. 容器内有一个主标题h1内容是“你属于哪种情绪能量类型”。3. 主标题下方有一段引言p内容是“只需5分钟完成6道题解锁专属你的内心能量图谱指引你更好地与自己相处。”。4. 引言下方是一个漂亮的开始按钮id设为“start-btn”文字是“开始测评”。请为这些元素添加一些基本的CSS样式让容器有内边距标题醒目按钮有背景色、圆角和悬停效果。WorkBuddy会生成包含HTML和style标签的完整代码。它会将代码直接插入或替换你当前的body部分。生成的代码可能类似于body div classcontainer h1你属于哪种情绪能量类型/h1 p classintro只需5分钟完成6道题解锁专属你的内心能量图谱指引你更好地与自己相处。/p button idstart-btn开始测评/button /div style body { font-family: Microsoft YaHei, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 20px; } .container { text-align: center; background-color: white; padding: 40px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 600px; width: 90%; } h1 { color: #333; margin-bottom: 20px; } .intro { color: #666; line-height: 1.6; margin-bottom: 30px; font-size: 16px; } #start-btn { background-color: #4a6fa5; color: white; border: none; padding: 15px 40px; font-size: 18px; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; } #start-btn:hover { background-color: #385d8a; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(56, 93, 138, 0.3); } /style /body指令3为按钮添加跳转功能现在我们需要让“开始测评”按钮能跳转到测评页面。请为id是“start-btn”的按钮添加一个点击事件。当点击时跳转到同一个文件夹下的“test.html”页面。请使用JavaScript实现。WorkBuddy可能会在style标签后面添加script标签script document.getElementById(start-btn).addEventListener(click, function() { window.location.href test.html; }); /script至此index.html完成。用浏览器打开它应该能看到一个美观的首页点击按钮会尝试跳转虽然test.html还不存在。4.2 创建测评页面 (test.html)指令1创建文件与基础结构新建一个文件test.html。我们可以让WorkBuddy基于首页快速创建。 在WorkBuddy中打开新的对话上下文或新建一个标签页输入请创建一个新的HTML文件包含标准结构。标题为“情绪能量测评 - 测试中”。body内包含1. 一个显示当前进度如“第1题/共6题”的divid为“progress”。2. 一个显示问题的h2元素id为“question”。3. 一个用于放置选项的divid为“options”。4. 两个按钮一个id为“prev-btn”文字是“上一题”一个id为“next-btn”文字是“下一题”。5. 引入一个单独的CSS文件命名为“style.css”。6. 引入一个单独的JavaScript文件命名为“script.js”。将生成的代码保存为test.html。同时在文件夹中创建空的style.css和script.js文件。指令2设计测评页样式 (style.css)接下来我们设计样式。在WorkBuddy中我们可以描述想要的样式。请为心理测评的答题页面编写CSS保存到style.css文件中。要求整体风格与首页协调有柔和的渐变背景。进度条用文字和长条图形表示。问题字体加大加粗。选项设计成卡片样式每个选项是一个div有内边距、边框、圆角鼠标悬停时有背景色变化。按钮区域布局在下方。确保在手机和电脑上看起来都不错。将WorkBuddy生成的CSS代码复制到style.css文件中。内容可能如下/* style.css */ body { font-family: Microsoft YaHei, sans-serif; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); min-height: 100vh; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; } #test-container { background-color: white; width: 90%; max-width: 800px; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } #progress { margin-bottom: 25px; font-size: 16px; color: #555; } .progress-bar { height: 8px; background-color: #e0e0e0; border-radius: 4px; margin-top: 5px; overflow: hidden; } .progress-fill { height: 100%; background-color: #4a6fa5; width: 0%; /* 初始为0由JS控制 */ transition: width 0.5s ease; } #question { font-size: 24px; color: #333; margin-bottom: 30px; line-height: 1.4; } .option { border: 2px solid #e0e0e0; border-radius: 12px; padding: 18px 20px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s ease; font-size: 17px; } .option:hover { border-color: #4a6fa5; background-color: #f8f9fa; transform: translateX(5px); } .option.selected { border-color: #4a6fa5; background-color: #e8f0fe; color: #4a6fa5; } .button-container { display: flex; justify-content: space-between; margin-top: 40px; } .nav-btn { padding: 12px 30px; font-size: 16px; border: none; border-radius: 50px; cursor: pointer; transition: background-color 0.3s; } #prev-btn { background-color: #f1f1f1; color: #333; } #prev-btn:hover:not(:disabled) { background-color: #ddd; } #next-btn { background-color: #4a6fa5; color: white; } #next-btn:hover:not(:disabled) { background-color: #385d8a; } .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }指令3实现测评逻辑 (script.js)这是最核心的部分。我们需要告诉WorkBuddy我们的数据结构、题目和逻辑。请编写JavaScript代码实现一个心理测评功能保存到script.js文件中。要求 1. 定义一个数组questions包含6个问题对象。每个对象有text问题文本和options选项数组属性。每个选项是一个对象包含text选项文本和type对应的能量类型‘fire’ ‘water’ ‘wind’ ‘earth’。 2. 定义变量记录当前题号currentQuestionIndex从0开始和分数对象scores包含四种类型的初始分数0。 3. 编写函数loadQuestion()根据当前题号更新进度条、问题文本和选项按钮。选项被点击时高亮当前选择并记录选择的类型到currentSelection。 4. 编写函数updateProgressBar()根据当前题号和总题数更新进度条的宽度。 5. “上一题”按钮点击时如果当前题号大于0则减1并重新加载题目。注意如果之前本题已选择要恢复选择状态。 6. “下一题”按钮点击时首先检查当前题是否有选择。如果有则将currentSelection对应的类型分数加1然后检查是否是最后一题。如果是最后一题跳转到result.html并将分数通过URL参数传递如result.html?fire3water1wind2earth0。如果不是最后一题则题号加1清空currentSelection加载下一题。 7. 页面加载时初始化分数加载第一题并为两个按钮绑定事件。将WorkBuddy生成的详细JavaScript代码复制到script.js中。由于代码较长这里展示一个核心框架示例// script.js const questions [ { text: “当你感到压力巨大时你第一时间会” options: [ { text: “找朋友倾诉或激烈运动” type: ‘fire’ }, { text: “独自听音乐、写日记” type: ‘water’ }, { text: “告诉自己冷静分析问题根源” type: ‘wind’ }, { text: “通过整理房间、做美食来放松” type: ‘earth’ } ] }, // ... 添加剩下的5个问题 ]; let currentQuestionIndex 0; let scores { fire: 0, water: 0, wind: 0, earth: 0 }; let currentSelection null; function loadQuestion() { const question questions[currentQuestionIndex]; document.getElementById(‘question’).textContent question.text; const optionsContainer document.getElementById(‘options’); optionsContainer.innerHTML ‘’; question.options.forEach((option, index) { const optionElement document.createElement(‘div’); optionElement.className ‘option’; if (currentSelection option.type) { optionElement.classList.add(‘selected’); } optionElement.textContent ${String.fromCharCode(65 index)}. ${option.text}; optionElement.addEventListener(‘click’, () selectOption(option.type, optionElement)); optionsContainer.appendChild(optionElement); }); updateProgressBar(); updateButtons(); } function selectOption(type, element) { // 移除其他选项的选中状态 document.querySelectorAll(‘.option’).forEach(opt opt.classList.remove(‘selected’)); // 选中当前选项 element.classList.add(‘selected’); currentSelection type; } function updateProgressBar() { const progress ((currentQuestionIndex 1) / questions.length) * 100; document.querySelector(‘.progress-fill’).style.width ${progress}%; document.getElementById(‘progress’).innerHTML 第${currentQuestionIndex 1}题 / 共${questions.length}题; } function updateButtons() { document.getElementById(‘prev-btn’).disabled currentQuestionIndex 0; document.getElementById(‘next-btn’).textContent currentQuestionIndex questions.length - 1 ? ‘查看结果’ : ‘下一题’; } // 事件监听和跳转逻辑... document.getElementById(‘next-btn’).addEventListener(‘click’, goToNext); document.getElementById(‘prev-btn’).addEventListener(‘click’, goToPrev); // 初始化 loadQuestion();你需要根据WorkBuddy生成的完整代码补充完所有6个问题并确保goToNext和goToPrev函数逻辑正确。4.3 创建结果页面 (result.html)指令1创建结果页基础新建result.html。在WorkBuddy中输入请创建一个结果展示页。标题为“情绪能量测评 - 你的结果”。body内包含1. 一个容器id为“result-container”。2. 容器内有一个h1元素id为“result-title”初始文字为“正在生成你的能量图谱...”。3. 一个divid为“result-description”用于放置详细描述。4. 一个分享按钮id为“share-btn”文字为“分享我的结果”。5. 一个重新测试按钮id为“retry-btn”文字为“再测一次”。同样引入style.css和script.js但我们还需要一个单独的result.js来处理结果逻辑。保存result.html并创建result.js。指令2编写结果逻辑 (result.js)请编写result.js。功能1. 从URL参数中获取分数fire water wind earth。2. 比较四个分数找出最高的类型。3. 根据最高类型更新页面设置result-title为类型名称如“火焰型”设置result-description为一段详细的解读文字请为四种类型各创作一段约150字的积极、有趣的解读。4. 为“分享我的结果”按钮添加点击事件点击后弹出一个提示框提示“结果已复制到剪贴板快去分享给朋友吧”并尝试将结果文本包含类型和描述写入剪贴板。5. 为“再测一次”按钮添加点击事件点击后跳回首页index.html。将WorkBuddy生成的代码放入result.js。核心逻辑示例如下// result.js function getUrlParams() { const params new URLSearchParams(window.location.search); return { fire: parseInt(params.get(‘fire’)) || 0, water: parseInt(params.get(‘water’)) || 0, wind: parseInt(params.get(‘wind’)) || 0, earth: parseInt(params.get(‘earth’)) || 0 }; } function determineResult(scores) { const maxScore Math.max(scores.fire, scores.water, scores.wind, scores.earth); const types []; if (scores.fire maxScore) types.push(‘fire’); if (scores.water maxScore) types.push(‘water’); if (scores.wind maxScore) types.push(‘wind’); if (scores.earth maxScore) types.push(‘earth’); // 简单处理取第一个最高分类型 return types[0]; } function displayResult(type) { const resultMap { fire: { title: ‘ 火焰型能量者’, desc: ‘你拥有如火焰般热情、直接而充满行动力的内在能量...此处为WorkBuddy生成的一段详细描述’ }, water: { ... }, wind: { ... }, earth: { ... } }; const result resultMap[type]; document.getElementById(‘result-title’).textContent result.title; document.getElementById(‘result-description’).innerHTML p${result.desc}/p; } // 页面加载后执行 window.onload function() { const scores getUrlParams(); const resultType determineResult(scores); displayResult(resultType); // 绑定按钮事件... document.getElementById(‘share-btn’).addEventListener(‘click’, shareResult); document.getElementById(‘retry-btn’).addEventListener(‘click’, () { window.location.href ‘index.html’; }); };指令3美化结果页样式我们可以让WorkBuddy为style.css追加结果页的样式。请为结果页面添加一些CSS样式到style.css文件中。要求结果标题要大且醒目可以用颜色代表不同类型如火用橙色水用蓝色。描述文字段落行距宽松。两个按钮并排居中样式与之前统一。可以添加一个代表能量类型的图标或装饰性背景。将新生成的CSS追加到style.css文件末尾。4.4 本地运行与测试由于涉及JavaScript模块和可能的跨域问题直接双击打开HTML文件可能功能不全。最简单的方法是使用一个本地HTTP服务器。方法一使用Python最简单打开命令行终端CMD或PowerShell。使用cd命令导航到你的my_psych_test文件夹。例如cd C:\Users\YourName\Desktop\my_psych_test。输入命令python -m http.server 8080如果你用Python 3或python -m SimpleHTTPServer 8080如果你用Python 2。打开浏览器访问http://localhost:8080。方法二使用VS Code的Live Server插件在VS Code中打开项目文件夹。安装“Live Server”插件。右键点击index.html选择“Open with Live Server”。现在你可以在浏览器中完整地体验整个测评流程首页 - 答题 - 查看结果 - 分享/重测。5. 常见问题与排查思路在开发过程中你可能会遇到一些问题。这里列出一些常见情况及其解决方法。问题现象可能原因解决思路WorkBuddy无响应或指令不执行1. 插件未正确安装或启用。2. 指令描述不够清晰。3. 当前网页不支持操作。1. 检查浏览器扩展管理页面确保WorkBuddy已启用。2. 尝试刷新页面或重启浏览器。3. 将指令拆分成更小、更具体的步骤。例如不说“做一个网页”而说“创建一个包含标题和段落的div”。页面样式混乱或错位1. CSS代码冲突或错误。2. 浏览器缓存了旧样式。1. 使用浏览器的“开发者工具”F12检查元素样式查看哪些CSS规则生效进行针对性调整。可以请WorkBuddy帮你修复“请检查这个元素的CSS为什么它没有居中”2. 强制刷新页面CtrlF5。按钮点击没反应JavaScript不工作1. JS代码中存在语法错误。2. JS文件未正确加载。3. 事件绑定时机不对。1. 打开浏览器开发者工具的“Console”控制台查看红色报错信息。根据错误提示让WorkBuddy协助修改代码。2. 检查HTML中script标签的src路径是否正确。3. 确保JS代码在DOM元素加载完成后执行通常将脚本放在body末尾或使用DOMContentLoaded事件。结果页无法获取URL参数1. 从test.html跳转时参数拼接有误。2.result.js中解析参数的逻辑错误。1. 检查test.html中跳转时构建的URL字符串是否正确例如result.html?fire${scores.fire}water${scores.water}...。2. 在result.js中console.log打印获取到的参数确认其格式和值。在手机上显示不正常1. CSS没有做好响应式设计。2. 视口viewport设置问题。1. 确保CSS中使用了百分比、max-width、flexbox或grid等响应式单位和技术。可以指令WorkBuddy“让这个容器在手机屏幕宽度下变成垂直堆叠布局。”2. 确认HTML的head中有meta name“viewport” content“widthdevice-width, initial-scale1.0”。6. 最佳实践与进阶优化恭喜你完成了第一个版本但这只是一个开始。要让你的心理测评网页更像一个真正的“产品”可以考虑以下优化方向。6.1 内容与用户体验优化打磨题目与结果这是灵魂。多花时间设计有趣、有洞察力的问题和令人共鸣的结果描述。可以借鉴心理学书籍或热门测评但务必加入自己的理解和创意。增加动画与过渡让页面交互更流畅。例如题目切换时的淡入淡出效果选项选中时的微动效。可以请WorkBuddy“为选项卡片的点击事件添加一个缩放动画。”进度可视化将进度条做得更生动比如用图标或数字阶梯表示。结果可视化不要只有文字。可以添加一个简单的雷达图或柱状图来展示四种能量的分数对比。这需要引入图表库如Chart.js你可以指令WorkBuddy“如何在网页中引入Chart.js并绘制一个简单的分数雷达图”6.2 代码与工程化建议代码结构将CSS和JS分离到独立文件是很好的习惯。对于更复杂的项目可以考虑按功能模块拆分JS文件。注释与文档在关键的函数和逻辑处添加中文注释方便未来你和WorkBuddy回顾、修改。浏览器兼容性使用WorkBuddy生成的现代CSS和JS语法在主流浏览器上一般没问题。如果担心可以指令它“请确保这段CSS代码在旧版Edge和iOS Safari上也能正常工作。”版本备份在做出重大修改前复制一份整个项目文件夹作为备份。6.3 部署与分享静态网站托管你的项目是纯静态文件HTML CSS JS可以免费托管在Github Pages、Vercel、Netlify等平台。这样你就拥有了一个真正的网址可以分享给任何人。自定义域名如果你有域名可以绑定到托管平台让测评看起来更专业。数据收集进阶如果你想匿名收集测评结果数据用于分析可以接入一些无需后端的表单工具或轻量级云数据库如Airtable Supabase这需要一些额外的JS代码。可以向WorkBuddy描述需求“如何在用户点击‘查看结果’时将匿名分数数据发送到一个在线表格”6.4 从项目到产品引流与分享在结果页精心设计分享话术和海报图鼓励用户传播。迭代更新根据用户反馈定期更新题目库或增加新的测评类型。探索变现在流量稳定后可以在页面底部或结果页谨慎地加入广告联盟代码或者引导关注你的公众号、知识星球提供更专业的付费解读服务。通过这个项目你不仅获得了一个可以运行的虚拟产品更重要的是掌握了一套“AI辅助创造”的方法论。你可以用同样的方法去复刻更多类型的轻量级网页应用如趣味小游戏、工具计算器、产品展示页等。WorkBuddy这类工具极大地降低了创造的门槛将你的注意力从“如何实现”解放出来更聚焦于“创造什么”和“为谁创造”。