前段时间用 AI 做了个个人网站——打开就是一个实时渲染的黑洞在转，五个"人生系统"像行星一样绕着它公转，点一个按钮黑洞会先收缩再爆炸 深度体验了一下"利用 AI 人人都可成为程序员"这件事。它能把你的想法快速实现、迭代和落地，代码真的是非常强大的个人杠杆。 今天就分享一下我做个人网站的方法 1️⃣ 先搞懂网站的三个层 网站大致分为三块内容： 框架（HTML）：网页的结构——标题、图片、视频等元素怎么组合呈现 样式（CSS）：怎么变好看——颜色、字体、间距、动画 交互（JavaScript）：要有怎样的互动方式，比如鼠标移动会有什么动态效果 拿我的黑洞网站举例：HTML 搭出了"首页→关于我→人生系统→爱好→技能→联系方式"六个区块的结构；CSS 控制了墨黑+鎏金的配色和排版；JavaScript 负责黑洞的实时渲染和鼠标移动时角度跟随变化。 2️⃣ 把想法变成代码 为了让 AI 生成的 HTML 和 CSS 更精准，我自己先大致画了网页的排版草图。 如果你对排版没有特别要求，可以在网上搜集喜欢的网页设计素材，然后把素材图 + 你的诉求喂给 AI，让它生成初始代码。 💡 我的黑洞背景就是跟 AI 描述了"星际穿越里 Gargantua 的感觉，要有吸积盘和光影变化"，它帮我写了 WebGL 渲染代码。描述清楚你要的感觉就行。 3️⃣ 整理文件结构 新建一个文件夹，把 index.html 放进去，然后在里面创建一个 images 文件夹，图片一定要命名好（比如 hero-bg.jpg、avatar.png），不然后面跟 AI 沟通"换哪张图"的时候会说不清。 4️⃣ 用自然语言改代码 打开codex，把含有 index.html 和 images 文件夹的整个文件夹拖进去。VS Code 里可以直接用自然语言跟 AI 调整——比如"把首页标题字号调大"、"第二张图换成 images 里的 sunset.jpg"、"鼠标移到卡片上加一个上浮动画"。 💡 强烈建议装一个 Live Server 插件，改了会实时刷新，所见即所得。 我网站里那个"Enjoy the Universe"按钮，就是改了二十多版——从"加个按钮"到"点了让黑洞先收缩再爆炸，整个页面跟着呼吸"，全是自然语言描述，AI 一步步帮我实现的。 5️⃣ 上线 登录 GitHub，创建一个新仓库，把文件夹传上去。然后用 GitHub Pages（免费）或 Vercel（也免费，我用的是这个）一键部署，几分钟就有了一个公网链接，所有人都能浏览到。 欢迎大家一起交流～ #vibecoding #网页设计#AI工具 #codex #作品集#设计师#vibecoding大赏 #openclaw