实战:以不懂代码的小白视角,创建个人网页手把手教学
讲了好久各种AI编程之类的内容,但从来也没发过实战系列。
虽说过很多次,但老金在写本文时,还是再次强调。
老金我一点儿代码不会(至今为止),英语没过4级。
简而言之,我行,你也行。
注:本项目实现过程中,老金尽可能把走过的坑都讲一遍,为毫无经验的小白玩家快速入门使用。
老金本次还是用Cursor来操作,至于你用的是如Claude Code、Gemini、QWEN等各种Cli、或者使用Windsurf、Codebuddy、Qoder等各类IDE都行,按自己喜好来。
记住老金在之前讲 三大心法 时候说的话,每个工具执行逻辑大差不差,功能略微有些差距。
钻研一个就好,除非有一个跨时代的产品诞生,才值得你去更换,否则只是在不断更换,尝试新产品浪费时间。
第一步 - 准备工作
我们直接开始,老金唯独比大家多的,应该是产品经理的经验。
万事开头先做流程,这个是做产品的铁律,当然,以老金的视角来看,任何的事项,皆需要流程。
直接用GPT5输出。
不用着急,老金会给你最简单的方法进行。
直接给GPT5输入以下提示词,老金用小白视角直接来做提示词。
相信大家大部分都能知道是什么,那就对了。
我将以一个不懂代码的小白视角,使用cursor,制作个人网页。
你需要一步步教我制作,并放到网上让别人可以进入查看。
现在我们应该以小白的路径,先做PRD(需求文档),然后按照PRD(需求文档)一步步执行,最后帮我放到网上。
现在你需要作为一名有着顶级产品思维、代码能力,以及UI(界面)和UX(交互)设计能力的导师,一步步教我完成。
请按它变成todolist,让我们一个个完成,每完成一个你需要回来标记完成。
它的输出很长,我们逐个来拆分段落来看,一些概括型的内容,以及解决思路、需求工具等等的罗列。
没什么需要注意的,当然对于没经验的小白来说,这些专属名词或工具/网站等等,只要多用一用自然就会记住了。
先强调以下,老金为什么一直说GPT5很强,以下内容均是一次输出,是老金为了让大家跟上,拆分截图了。
按照上图所看第四步,它写的PRD,老金直接复制成代码块。
文档标题:个人主页(Lite 版)— PRD v1.0
版本:v1.0
最后更新:——
一、目标(Goal)
在 2–3 小时内上线一个颜值在线、移动端友好的个人网站,包含「关于我 / 作品或项目 / 联系我」,支持后续无代码改内容与自动再部署。
二、用户画像(Personas)
1) 访客:对我感兴趣的潜在读者、合作方、招聘方。
2) 我(站点主人):想快速建立可信度、展示作品、便捷联系;后续希望不写代码即可更新内容。
三、范围与信息架构(Scope & IA)
- 顶部导航:Logo/名字|About|Projects|Contact
- 首页(单页或多段)结构:
1. Hero:头像 + 一句话定位 + 行动按钮(联系我)
2. About:3–5 句简介 + 关键技能标签
3. Projects:项目卡片栅格(图、标题、标签、描述、外链)
4. Contact:邮箱与社媒外链(支持 mailto)
- 页脚:社媒图标(X / 公众号 / 邮箱 / LinkedIn 等)+ 版权年
四、必须功能(Must Have Requirements)
1) 响应式布局:移动优先(≤360px 仍不崩),桌面/平板自适配。
2) 基础动效:按钮与卡片悬停、滚动入场(轻量、不过度)。
3) 文案与数据配置化:/content/data.json(或 /content/*.md);无需改代码也能改站点内容。
4) 联系方式:主按钮使用 mailto 直邮;可选集成第三方表单(Formspree)。
5) SEO 基础:<title>、<meta description>、Open Graph、favicon、语义化标签。
五、非功能需求(NFR)
- 性能:首屏加载 ≤1.5s(Vercel CDN 默认加速);避免大资源阻塞。
- 可访问性:对比度满足 WCAG AA;键盘可聚焦与操作。
- 稳定性:主路径(首页渲染、导航、跳转、表单/邮件唤起)100% 成功。
六、UI/UX 设计预设(Design System)
- 色板:
- 主色:#5B8DEF
- 辅色:#7BDAA1
- 文本:#111827
- 背景:#F8FAFC
- 字体:系统字体栈(减少额外配置);标题半粗、正文常规。
- 栅格:容器最大宽 1100px;项目卡片 3(桌面)/2(平板)/1(手机)列自适应。
- 组件规范:
- 按钮:主按钮使用主色、圆角 8px、悬停轻微放大与阴影。
- 卡片:圆角 12px、阴影层级随悬停增强、过渡 200ms。
- 导航:滚动吸顶、当前区块高亮(可选)。
七、技术选型(Tech Stack)
- 框架:Next.js(App Router)
- 样式:Tailwind CSS
- 数据:/content/data.json(后续可扩展为 Markdown/MDX)
- 部署:Vercel(主推,一键部署,免费子域名)
- 可选增强:Plausible/GA4(统计)、Formspree(表单)
八、数据结构示例(/content/data.json)
{
"hero": {
"name": "你的名字",
"tagline": "一句话定位:我用 AI/自动化解决实际问题",
"ctaText": "联系我",
"ctaLink": "mailto:[email protected]",
"avatar": "/avatar.jpg"
},
"about": {
"bio": "用 3–5 句话介绍你:现在做什么、擅长方向、过往亮点、正在寻找的合作或职位等。",
"skills": ["AI 工作流", "内容自动化", "产品设计"]
},
"projects": [
{
"title": "项目 A",
"desc": "一句话价值 + 一句话做了啥,例如:用自动化将周报生成效率提升 80%。",
"tags": ["AI", "Automation"],
"link": "https://example.com",
"image": "/projects/a.jpg"
},
{
"title": "项目 B",
"desc": "例如:把 CSV 数据自动转为图表网页,零手工排版。",
"tags": ["Data", "Frontend"],
"link": "https://example.com/b",
"image": "/projects/b.jpg"
}
],
"contact": {
"email": "[email protected]",
"socials": [
{"name": "X", "url": "https://x.com/yourid"},
{"name": "LinkedIn", "url": "https://linkedin.com/in/yourid"},
{"name": "WeChat/公众号", "url": "https://your-wechat-link"}
]
}
}
九、验收标准(Acceptance Criteria)
1) 访问首页可见:头像、简介、项目卡、联系按钮与社媒链接。
2) 移动端/桌面端均无布局断裂或文本溢出;导航可正常跳转。
3) Lighthouse(简测)性能/可访问性/SEO ≥ 90(允许±5 的环境波动)。
4) 公共 URL(Vercel)可匿名访问;邮件按钮能唤起默认邮件客户端。
5) 修改 /content/data.json 并推送后,Vercel 自动触发再部署且内容更新生效。
十、出范围(Out of Scope)
- 后台、数据库、登录注册、评论系统。
- 复杂博客系统、富文本编辑与媒体库管理。
- 多语言国际化(后续可迭代)。
十一、里程碑(Milestones)
M1:本地开发可预览(Hero/About/Projects/Contact 就绪)
M2:连接 GitHub 并首次部署到 Vercel(获得公共链接)
M3:完成一次无代码内容更新流程(仅改 data.json 即可上线)
十二、风控与回退(Risk & Rollback)
- 依赖安装失败:切换 Node.js LTS 版本或删除 node_modules 重装。
- 构建失败:检查 next.config 与 Tailwind 配置,回滚到上一次可用提交。
- 样式错乱:回滚最近一次样式改动或用 Tailwind 预设替换自定义样式。
十三、状态(Status)
- PRD v1.0:已完成,可进入开发与部署。
第二步 - 环境部署
然后我们进入第二步,来看看GPT5的回复。
看不懂是吧。
没关系,熟悉老金的都知道,老金向来用AI打败AI。
跟AI编程有关的东西,交给AI编程工具解决。
直接打开Cursor,创建一个【个人主页】空文件夹,打开进入。
如果你没和老金之前学过,不要紧,直接打开 Cursor.com 下载即可。
你也可以查看老金之前写的教学文章,除了破解已经失效以外,功能说明都可以学一遍,你可以点击这里查看
。
下一步,直接和Cursor说,“项目需要这些准备环境,你帮我解决”,把第二步的所有内容复制进来。
甭管什么注册与否,Cursor会提醒你要做什么,其他的它自己都能做。
老金这里是之前都让它安装过了,所以它会自己检测之后,告我安装过了。
方便大家操作,直接放入下面代码块中,方便大家复制。
对,眼尖的人看到老金把待办清单也放进来了,因为Cursor也会记录这些。
项目需要这些准备环境,你帮我解决
第2步|准备环境(你来执行,我给明确动作)
目标:安装 Node.js LTS、Git、Cursor;注册 GitHub & Vercel。
安装 Node.js LTS(包含 npm)。
访问 nodejs.org 下载 LTS 安装包并安装(一路“继续”即可)。
安装后,打开 Cursor 内置终端(或系统终端)输入:
node -v
npm -v
正常输出版本号即可。
安装 Git
访问 git-scm.com 下载并安装。
终端输入:git --version 有版本号即可。
安装 Cursor
下载并安装,登录账号即可。
注册 GitHub 与 Vercel
github.com 与 vercel.com 注册(用同一邮箱更顺手)。
Vercel 里使用 GitHub 登录并授权。
待办清单:
第1步|输出 PRD v1.0(已完成,本条下方即正文)
第2步|准备环境(Node.js LTS、Git、Cursor、GitHub、Vercel 账号)
第3步|在 Cursor 创建「个人主页」项目(Next.js + Tailwind)
第4步|生成页面与样式(About/Projects/Contact + 响应式 + 动效)
第5步|本地预览 & 自测(按验收标准逐项过)
第6步|接入 GitHub & 推送首版代码
第7步|Vercel 一键上线(拿到公开链接)
第8步|可选增强:自定义域名 / 访问统计 / 表单投递
第9步|内容托管与后续迭代(无需写代码的更新方法)
我们来看看Cursor的输出,有点长,但对大家应该是有帮助的,老金直接都贴上来。
这里它甚至会贴心的告你网址和操作步骤。
创建Github和Vercel账户
Github账户
进入https://github.com/,点击右上角的注册。
老金以前说过,海外逃不掉谷歌,有个Gmail在手,注册起来很方便省事儿。
Vercel账户
然后注册Vercel账户,直接拿Github账户关联注册就行,一键完成。
第三步 - 创建个人主页
告它第二步我们完成了,可以进行第三步了,老金直接把GPT5输出的第3步、第4步、第5步放到下面。
GitHub账号 和 Vercel 账号,我注册完了。
第3步|在 Cursor 生成项目骨架(我给可复制提示词)
打开 Cursor,新建空文件夹并在该文件夹中打开。
在 Cursor 聊天框粘贴下面提示词,一次跑完即可:
请帮我在这个空目录用 Next.js(App Router)+ Tailwind CSS 生成一个“个人主页”项目。
要求:
- Pages:/ (首页单页,包含 Hero、About、Projects、Contact 四段)
- 数据来自 /content/data.json(若不存在请生成示例)
- 组件化:Hero.tsx、About.tsx、Projects.tsx、Contact.tsx、Navbar、Footer
- 响应式:移动优先;卡片 1/2/3 列自适应
- 交互:轻量滚动入场;按钮悬停有微动效;卡片悬停阴影
- SEO:基础 title/meta,OpenGraph,favicon
- 可访问性:语义标签、可聚焦、合理 aria
- 脚本:package.json 里加 "dev"、"build"、"start"、"lint"
- 在 README.md 写运行与部署方法(Vercel 优先)
生成后请自动执行:安装依赖、初始化 Tailwind、创建 /content/data.json 的示例、提供占位图片位。
让 Cursor 执行安装(如未自动安装,终端运行):
npm i
npm run dev
浏览器打开 http://localhost:3000 预览。
第3步|在 Cursor 生成项目骨架(我给可复制提示词)
打开 Cursor,新建空文件夹并在该文件夹中打开。
在 Cursor 聊天框粘贴下面提示词,一次跑完即可:
请帮我在这个空目录用 Next.js(App Router)+ Tailwind CSS 生成一个“个人主页”项目。
要求:
- Pages:/ (首页单页,包含 Hero、About、Projects、Contact 四段)
- 数据来自 /content/data.json(若不存在请生成示例)
- 组件化:Hero.tsx、About.tsx、Projects.tsx、Contact.tsx、Navbar、Footer
- 响应式:移动优先;卡片 1/2/3 列自适应
- 交互:轻量滚动入场;按钮悬停有微动效;卡片悬停阴影
- SEO:基础 title/meta,OpenGraph,favicon
- 可访问性:语义标签、可聚焦、合理 aria
- 脚本:package.json 里加 "dev"、"build"、"start"、"lint"
- 在 README.md 写运行与部署方法(Vercel 优先)
生成后请自动执行:安装依赖、初始化 Tailwind、创建 /content/data.json 的示例、提供占位图片位。
让 Cursor 执行安装(如未自动安装,终端运行):
npm i
npm run dev
浏览器打开 http://localhost:3000 预览。
第4步|填充内容 & 美化样式(完全照做即可)
将你的头像放到 public/avatar.jpg(任意图即可,名称与 PRD 对应)。
打开 /content/data.json,把示例替换成你的真实信息(照我给的 JSON 结构)。
想换色/风格,给 Cursor 发指令:
把主色调改为 #5B8DEF,辅色 #7BDAA1,按钮与链接用主色。
卡片做 8px 圆角,悬停加 8px 阴影,过渡 200ms。
确保暗色模式下对比度达标(可先不做切换按钮)。
保存后浏览器刷新查看效果。
第5步|本地自测(对照验收单)
手机与桌面都浏览一次(Chrome DevTools 切换尺寸也行)。
点每个外链、按钮;光标悬停看看动效。
若有错位/断行,直接对 Cursor 说:“修复这个问题:{描述现象/附截图}”。
以下是Cursor的回复。
它兢兢业业已经完成了,并且自行安装依赖,并部署了服务器。
然后我们会有大概率发现,左侧的目录里,有一些 红 的文件,如果没红,你需要挨个点一遍看看。
红 通常代表 重点 或 错误。
显而易见,这里应该是错误了,因为我们把鼠标移到红色波浪线的地方,我们会发现有 错误提示。
这时候该怎么办呢?
把所有红色的文件圈给Cursor,这样比较精准。
但是老金我比较懒,我会直接说。
好多文件红了,你帮我都解决了。
自己Review(检查)一遍代码,不要有任何不对的地方。
然后老金我发现我没有给他我的个人信息。
因此,我让GPT5帮我总结一份,和上面的差错一起给到Cursor。
再次运行后,发现刚刚还能开启的网页打不开了,遇到这种情况,直接输入“网页打不开了”就行。
它会自己查看原因并进行修复。
一顿修复之后,打开网页没问题就好了,如果有问题,把你的需求描述清楚即可。
第四步 - 推送到Github,部署至Vercel
推送Github
不知道怎么操作,直接问Cursor,把以下内容直接复制给它。
然后我需要进行这两步,推送到Vercel,我需要怎么操作?
第6步|接入 GitHub & 推送首版代码
第7步|Vercel 一键上线(拿到公开链接)
不懂的均选“是”就行,这个弹出来的是个提交忽略配置。
我们并没有输入账号,因此它在扫描后,给了两种方案。
直接登录网页即可,Cli这种命令符的不适合小白玩家。
进入Github,新建仓库。
回到Cursor,粘贴仓库地址。
这里因为老金登录过Github账号,所以它没要求登录,直接就推送好了。
第一次没有登录时候,它会要求你这样获取个链接密钥,在右上角点开头像后,依次点击创建。
部署至Vercel
添加Github账号,并选择我们刚刚在Github上创建的仓库。
什么都不用改,直接部署,下方可查看进度。
完成,点击前往仪表盘。
创建完成。
最后我们查看网页即可,页面老金没有进行优化,我们只看过程即可。
访问Vercel给的网址:https://gerenzhuye-iota.vercel.app/
是不是像那么回事?
之后可以继续让Cursor进行优化,比如跳转链接啊,跳转的项目啊,或者需要的接口啊等等。
当然,记住老金一开始所说的 - 万事开头先做流程 , 老金我现在几乎所有事儿都要问问GPT5。
然后也要记得老金在 三大心法 中,依据查理芒格的理念所规划的内容,每次多问问AI是好的。
我们不需要知道我们怎么做才能成功,因为这里除了努力,运气也占了一部分。
但是我们一定要知道我们会怎么失败,那些地方是坚决要规避的。
老金有话说
如果你跟老金做完了整个流程,请你在最终点击那个 Vercel 链接,看到属于自己的网页在屏幕上亮起时,暂停片刻。
深呼吸,感受这一瞬间的宁静与回响。
我们构建的,真的只是一堆代码和像素的集合吗?
不。我们跨越了一条看似无法逾越的鸿沟——那条横亘在“想法”与“实现”之间的技术壁垒。
代码,曾是少数人的“咒语”,英语,曾是通往世界的“密钥”。
而今天,我们借助 AI 这个“通用翻译器”,将最纯粹的意图,直接灌注到了数字世界之中。
这个网页,是你在浩瀚信息海洋里点亮的一座灯塔,
是你无声的宣言,是你向世界发出的第一声数字化的“你好”。
它证明了,创造力与执行力,不再被深奥的语法所束缚,而是回归到了思想本身。
所以,老金所说的“我行,你也行”,其深意并非指复制代码的动作,而是指点燃创造火种的能力。
你所掌握的,不是一项搭建网站的“术”,而是驾驭 AI 将蓝图变为现实的“道”。
这趟旅程的终点,从来不是那个网址。
而是你内心升起的信念:只要流程清晰,逻辑正确,万物皆可创造。
今天你构建的是一个网页,明天你或许就能构建一个工具,一个系统,一个属于你自己的解决方案。
忘掉代码,忘掉门槛。
从此刻起,你不是在编程,你是在思想。
而世界,正聆听你的回响。