news 2026/7/13 8:46:21

别把「感觉对了」当成工程:以AI Coding搭个人网站为例

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
别把「感觉对了」当成工程:以AI Coding搭个人网站为例

周末一句「帮我做一个好看的个人站」,Accept All,本地一开——爽。
这事本身没问题。有问题的是:同一套手法,周一绑上域名、开始收真实留言、还想写进简历。

Karpathy 说的vibe coding,原意就是故意不看代码、忘掉 diff。Fowler、Willison 也这么划线:适合扔的、玩的、自己坑自己的。
AI 写、你审、你测、你能跟人讲清这段在干嘛——那不叫 vibe,那是正常用工具写软件(有人叫 agentic engineering,名字不重要)。

一句话分轨:

  • 能扔→ 可以 vibe

  • 要养(长期网址、真表单、以后还要改)→ 得看着代码走

「用了 AI」不等于 vibe。审过、测过、讲得清,就不是。


个人站上,两种玩法差在哪

周末 vibe

要挂域名的那种

你在验证什么

版式喜不喜欢

换台电脑还能 build、邮件真能到、三个月后还改得动

看不看代码

基本不看

布局可以扫一眼;表单和密钥必须看

怎样算完

本地好看

build 过、主路径手点过、知道怎么回滚

版式可以 vibe 两三套。选定以后,别再「一整站 vibe 到底」——首页、博客、表单、部署,一块一块来,对外只说「本周上静态简历页」,别吹「一周上带 CMS 的产品站」。

瀑布、敏捷、XP 那些老词,这里不必背。个人站更像:先扔几个草稿试味道,再短步往前拱;质量靠「能 build、能讲清」,不靠站会贴纸。


搭着搭着,坑一般长这样

「先做个站」——模型很热心,评论区、登录、分析脚本一起塞进来,你本来只想放三行简介。

本地npm run dev美滋滋;一 build,图片 404,暗色模式碎一地。联系表单弹「已发送」,Network 里其实是 500,或者邮件进了垃圾箱。API Key、Analytics ID 写进前端包——你看不见,爬虫看得见。

三个月后想改导航,目录像考古现场:当初 Accept All 的,自己也读不懂。

所以真要养站,人得守几件具体的事(不是背七条教条):

  • 你定边界:内容用 Markdown,别一上来上数据库。

  • 一次聊一件:先信息架构,再首页,再表单——别一个会话从头干到尾。

  • 说清楚怎样算完:比如npm run build过,再手点三条主链。

  • 加博客时别「顺便重写设计系统」。

  • 表单、域名、密钥——再懒也自己看一眼 diff。

  • 把常用命令和「不许干什么」写进仓库的AGENTS.md,别只活在聊天记录里。

  • 上线平台确认能一键回滚。

Prompt 是商量;build 挂了合不进主分支,才是规矩。模型写烂了,优先把 lint / build / 禁区写进仓库,别玄学下一条咒语。


怎么排期,别跟自己玩假敏捷

可以这么走:

  1. 一晚草稿(可 vibe):两三个版式,只本地看,不绑域名、不接真邮箱。

  2. 选定后短步走:首页 → 博客列表 → 联系表单(加点防刷)→ 域名和自动 build。

  3. 改旧站:先列出「现在能打开的页面」,再让 AI 改——别拿「新建站三天搞定」要求迁 WordPress。

假敏捷长这样:不写任何约定,下次会话忘了用的 Astro 还是 Next;今天塞 Framer,明天换一套 UI 库;嫌 build 烦,去掉检查,「预览能开」就算上线。

敏捷要的是可工作的软件,不是「演示好看」。演示是 vibe 的强项;养得住,还得靠检查和收束。


跟 AI 说话时,稍微像个人

别说「把认证做好」那种空话。个人站可以说清楚:

首页要有姓名、简介、三个链接;只改首页相关文件;做完跑npm run build,过了再说。

一次只合并「博客列表」,别顺手开 CMS。布局 diff 可以快扫;.env和表单逻辑,自己读。手机宽能不能读完简介——你自己就是验收人。

老派 XP 那套(小步、先有检查再改、结对)在这里就是:你掌舵,AI 打字,关键路径你别躺平。


真要上线,大致走这么一遭

不必背流程图。按个人站说人话:

  1. 想清楚:访客十秒内知道你是谁,能点到 GitHub / 简历 / 联系。

  2. 先问再写:「列几种静态站做法和取舍,先别写代码。我要是嚷嚷上 CMS,你先怼我。」

  3. 写死几条:用啥框架、有哪几页、禁止乱加依赖和数据库、验证命令是npm run build

  4. 最小检查:build 必须过;首页有姓名;/blog能列出两篇样例。

  5. 下手:「只做首页,别动部署配置。」

  6. 挂了:日志贴回去,让它改;别无限循环。

  7. 你过目:外链、图片路径、有没有密钥;表单必看。

  8. 先预览,再解析域名;确认坏了能退回上一版。

  9. 收拾:删掉没用的 UI 库;在AGENTS.md补一句「加依赖先问」。

绑了域名的站,至少满足:

  • build 过

  • 手机上首页可读,三主链能点

  • 密钥不进 git,表单有基本校验

  • 你能讲清:页从哪来、文章从哪读、表单打到哪

  • 知道怎么回滚

周末自嗨的草稿,标准可以只有一条:自己开心,扔了不心疼。别拿那条标准去考核公开站。


给仓库一点记忆,比给模型长篇大论管用

聊天里的约定,下个会话就没了。根目录丢个短的AGENTS.md就够个人站用:

# Commands - Dev: npm run dev - Build: npm run build - Lint: npm run lint # Structure - Pages: src/pages/ - Content: content/posts/*.md - Components: src/components/ # Never - Do not commit .env* or API keys - Do not add a database without asking - Do not upgrade Next/Astro major unless asked

再加一条 CI:PR 上跑npm run build,挂了别合并。有表单再补提交校验。密钥扫描有更好。

别一上来就搞「多 Agent 并行装修」——个人站有AGENTS.md、会自动 build、你知道密钥在哪,就已经比大多数 vibe 站强。改文案用补全就行;新板块你定方向 AI 写;「只做博客列表」这种单任务可以放手一点。

每月花十分钟:清没用的依赖、核对部署说明还准不准、暗色模式 TODO 要么做要么删。AI 代码一样会烂尾。


啥交给 AI,啥你别甩手

布局、组件草稿、仿现有文章页——交给它。
域名 DNS、OAuth、Resend/Stripe 的 Key、最终点 Deploy——你来。
它写的测试断言,你看是不是在测真行为,还是删检查「变绿」。
「好像 SEO 好了」不算数,Search Console 才算。

Fowler 提醒过的几件事,个人站天天见:

  • 安全:表单地址、Analytics、存储凭证最容易进包。

  • 以后改不动:单文件两千行的万能 page,半年后连模型都晕。

  • 表面成功:绿勾 toast,背后请求挂了。

调试别听故事:打开 Network,看平台日志。
专门开一轮找茬也行:「空提交、超长字符、断网,看你怎么破。」


常见翻车,对照着躲

现象

多半因为

个人站样子

好看但假

没验收

toast 成功,邮件没有

直接公网

草稿当成品

没 build 就绑域名

半套残骸

一句「做完整站」

CMS 建一半扔那儿

组件过、整站挂

没集成看一眼

生产图片全 404

永远差一口气

被预览骗了

无域名 / 无 HTTPS / 无表单

依赖风暴

没禁区

静态站塞了 Docker Compose

检查没了

嫌烦

删掉 build「就绿了」

自己成外人

长期不读 diff

不知 Markdown 在哪个文件夹

公式很简单:

周末不审的习惯 × 周一要给面试官看 × 预览太好看
= 能跑的站,最会丢人(或泄密)

新建落地页快,迁老站慢——别用同一种期待折磨自己。


两条轨道,别混着考核

轨道 A(vibe):选风格、试框架、周末玩。不绑域名,预览链接够了,仓可以随时删。
轨道 B(要养):长期网址、真留言、写进简历。有约定、有 build、审表单和密钥、结构你讲得清。

A 有用,能让你摸清模型边界。
别用 A 的速度承诺 B 的结果;也别给 A 套一堆仪式假装很工程。

先把预览丢给朋友点点,再解析域名。表单选带配额的服务,设一下账单告警——按量计费 API 是 vibe 经典爆点。


你想这周就动手

  1. 看一眼:现在有没有自动 build?密钥会不会进 git?目录自己是否看得懂?

  2. 写短AGENTS.md(命令、内容目录、禁数据库、禁瞎升级)。

  3. PR 上挂一个npm run build

  4. 跟自己约定:改颜色文案可以飘;动路由、表单、部署就收心。

  5. 顺序:首页 → 一篇样例博文 → 联系表单。每步:说清楚 → 做 → build → 你能讲清再合。

  6. 改旧站的,先列出当前能开的 URL。

  7. 周末问自己:依赖是少了还是多了?不打开旧聊天,能不能改一行简介?


收尾

vibe 是选味道的;养站点靠看着代码 + build 门禁。
预览骗眼睛,域名和表单骗不了后果。

不必把自己活成手册:说清要什么、一次做一块、仓库里留点规矩、关键路径自己过目、讲不清的别往公网推。
谁分得清「能扔」和「要养」,谁就在用 AI 写软件;谁把 Accept All 直接送上域名,谁只是在更快地堆一堆以后骂自己的东西。

出处与延伸:Karpathy 原帖、Fowler · Vibe Coding、Willison 的区分、GitLab AI 开发手册。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/13 8:40:58

Fluent竖炉球相反应仿真:收敛性调试与浮点溢出解决方案

Fluent 竖炉球团矿异相反应仿真:从参数设置到收敛性调试全流程实战 在冶金工程和化工过程仿真中,竖炉球团矿的异相反应模拟一直是技术难点。很多工程师在使用 ANSYS Fluent 进行此类仿真时,经常会遇到计算不收敛、浮点溢出报错等问题&#xf…

作者头像 李华
网站建设 2026/7/13 8:40:33

AI编程工具Cursor结合Unity开发修仙游戏Demo实战指南

在游戏开发领域,AI 编程工具正在改变传统的开发模式,让没有编程基础的用户也能参与到游戏创作中。特别是对于修仙题材这类拥有固定世界观和玩法框架的游戏类型,借助 AI 工具可以快速生成核心代码、剧情文本和角色设定。本文将围绕如何使用 Cu…

作者头像 李华
网站建设 2026/7/13 8:38:41

Java高并发底层原理(二十)—— ReentrantReadWriteLock 与 StampedLock

一、从互斥锁到读写锁 普通互斥锁解决的是“同一时刻只能有一个线程进入临界区”的问题。无论临界区里是读取数据,还是修改数据,只要一个线程持有锁,其他线程都必须等待。 以一个二维坐标对象为例: class Point {private double x…

作者头像 李华
网站建设 2026/7/13 8:37:27

4K流媒体技术解析:从编码压缩到播放优化的全链路实践

一口气看完4K画质神作《遗愿清单》,两位身患绝症、阶层迥异的病房老人,结伴奔赴环球冒险,逐一实现死前心愿,笑泪交织道尽人生遗憾与热爱。 当技术遇上电影艺术,4K修复如何让经典作品重获新生?《遗愿清单》…

作者头像 李华
网站建设 2026/7/13 8:35:12

Netflix 2013 架构演进:从 Lambda 到 Kappa,Flink 如何替代 80% 离线任务

从Lambda到Kappa:Netflix推荐系统架构演进与Flink的崛起 2013年,Netflix公开的推荐系统架构图成为了行业标杆,其分层设计理念至今仍影响着推荐系统的演进方向。当时的技术栈以Hive、Pig等批处理工具为主,Manhattan作为自研流处理框…

作者头像 李华