首页路线 4 · 代码开发 › 任务卡 4.4 搭建网站:从需求到上线

任务卡 4.4 搭建网站:从需求到上线

进阶 前置:任务卡 4.3 代码审查:让 AI 帮你把关 适用版本:WorkBuddy Desktop 1.0+ 更新:2026-08-31 交付:搭建网站:从需求到上线

① 看结果:做完你手里会多出这个

这张卡做完,你会得到一份「搭建网站:从需求到上线」的可交付产物。先看成品长什么样,再倒推做法:

产物预览 · .4 搭建网站:从需求到上线

.4 搭建网站:从需求到上线(完成后你手里的样子)

从 我想做一个什么网站 到上线运行——全程用 WorkBuddy 搭建,不会写代码也能交付。

要点 1:1. 描述你想要的网站——做完这一步,你会得到「1. 描述你想要的网站」对应的可查看产物或结果。

要点 2:2. 预览和修改——做完这一步,你会得到「2. 预览和修改」对应的可查看产物或结果。

要点 3:3. 添加功能——做完这一步,你会得到「3. 添加功能」对应的可查看产物或结果。

这就是「跟着任务链走完」能拿到的成品。接下来倒推它怎么做出来的。

② 拆思路:这条任务链为什么这么下

做出上面的结果,靠的是一条 4 步任务链。看懂每一步的意图,你就能自己「出题」了:

#Prompt / 操作原文意图(为什么这么写)
1 帮我做一个个人作品集网站,包含:首页展示个人信息、项目作品列表页(卡片式布局)、关于我页面、联系方式。风格简洁现代,支持手机浏览 主指令:说清「要什么 + 范围 + 约束」,AI 才知道交付标准,模板越具体产出越精准
2 把主色调改成深蓝色,导航栏固定在顶部,首页加一个欢迎动画 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始
3 给网站添加暗色模式切换按钮、搜索功能、访问统计(用 localStorage) 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始
4 帮我部署这个网站,让它可以通过公网访问 这一步在补充关键上下文或提出明确交付要求,让 AI 基于前面的内容继续,而不是重新开始

③ 跟练回放:照着走一遍

下面是这段任务在 WorkBuddy 里的完整回放。点「下一步」逐步展开,把每条 Prompt 复制到你的 WorkBuddy 里跟练。

💡 小贴士:先出雏形再打磨:不要一开始就提 50 个需求,先让 WorkBuddy 出个基本版,然后逐步迭代。
💡 小贴士:截图反馈:看到效果不满意?截个图标注问题发给 WorkBuddy,比纯文字描述更高效。
💡 小贴士:参考网站:"风格参考 dribbble.com 的 minimalist 风格"——给参考比从零描述容易多了。

④ 变式挑战:换个场景,你会不会

任务:把上面的任务链换到你的场景

把模板里 带下划线的词换成你自己的话题,在 WorkBuddy 里跑通:

帮我做一个个人作品集网站,你的对象包含:首页展示个人信息、项目作品列表页(卡片式布局)、关于我页面、联系方式。你的场景风格简洁现代,支持手机浏览

检查点:① 只改内容、结构照抄;② 每一条都等 AI 回复后再发下一条;③ 至少追问一次「把 X 改成 Y」,确认 AI 是基于上文修改而非重新开始。

⑤ 交付自检:证明你真的会了

对照你手里的产物,勾选完成项

🎉 本卡完成!进度 +1(学习徽章联动已在路上)