用 Vibe Coding
一周建站全复盘
一个产品经理，如何用 Cursor + Claude 从零做出个人网站，全程没有手写一行代码。
为什么建站
动机不复杂，但也不是一时冲动。
我想有一个真正属于自己的地方——不是微信公众号，不是某个平台的主页，而是一个我可以 完全自主掌控、能完整展示自己的空间。
作为产品经理，我长期处在产品和研发的边界上。我想亲手验证一件事：没有工程背景的人，能不能用 AI 工具独立走完从想法到上线的全链路？
所以这个网站对我来说有两层意义：一是能力的展示——它是我的动态简历，让别人更立体地了解我；二是持续探索的场所——我可以在这里不断尝试新的 Vibe Coding 思路，让它一直生长。
先规划，后动手。在写第一行 Prompt 之前，花半天和 AI 讨论清楚「给谁看、传递什么、每个模块放什么」。这半天帮我省了后面至少两三天的反复推倒重来。
技术选型
技术方向是和 Gemini 反复讨论出来的。我不是让它直接给答案，而是把我的情况、约束和目标描述清楚，再问"哪个方向性价比最高"。
最终定下：Next.js 16 + React 19 + Tailwind CSS v4 + Framer Motion，部署在 Vercel。内容管理完全自建，Markdown 文件 + TypeScript 数据源，不依赖任何第三方 CMS。
这套方案的逻辑是：性能足够、生态成熟、和 AI 协作效率最高——Claude 对 Next.js App Router 的理解非常好，生成的代码基本不需要大量调整。
AI 的上限不在于它有多聪明，而在于你给它的信息有多完整。把需求、风格、目标用户、约束条件都描述清楚，越具体越好。
实战过程
技术上反而没遇到太大障碍——这出乎我自己的意料。真正让我反复折腾的，是三个更本质的问题。
页面太普通了
最开始让 Claude 直接生成页面，结果就是标准"个人官网框架"：导航栏、关于我、作品集、联系方式。整洁，但毫无个性。
我开始研究视觉风格，找到了 Neomorphism（新拟态设计）——用柔和的阴影和高光模拟真实物体质感。把风格描述清楚，让 Claude 重新设计整套 UI 系统，加上 Framer Motion 动效，整个气质完全变了。
行业洞察模块究竟是什么
最开始想放博客文章，但只有文字体验感不够；单独做播客模块又太碎。
最后找到了自己觉得很对的方案：每一篇博客文章，都配一段 AI 生成的播客音频。用户可以选择读，也可以选择听。音频通过小宇宙 RSS 直链 + 原生 audio 标签播放，不需要任何复杂实现。
实战实验室的内容方向
做完网站后，这个模块放什么、怎么持续更新，想了很久。
是只记录这个网站本身的建站经历，还是成为一个更大的 Vibe Coding 实验场？目前的答案：两者都要，但分阶段来。先把建站复盘做扎实，然后让这个模块随着探索新项目而自然生长。
给你的建议
如果你是产品经理、设计师，或者任何不会写代码但有想法的人，这件事 真的可以做，而且没有你想的那么难。
但真正的卡点往往不在技术上，而在这三个问题上：
想清楚这三个问题，再去找 AI 帮你实现。顺序不能反。
我想做一个个人网站，以下是我的完整需求描述： 目标读者：[具体说明，例如「同行产品经理 + 潜在雇主」] 想传递的核心信息：[1-2 个关键点] 视觉风格：[描述气质，不要说"好看的"，例如「低调、有质感、不花哨」] 技术要求：[你的实际约束，例如「不想维护服务器、希望免费部署」] 必须有的模块：[按优先级列举] 请先帮我梳理整体架构和模块逻辑，不要直接写代码。
技术栈
// STACK建站历程
产生想法，和 Gemini 反复讨论方案架构与内容规划
技术选型确定，搭建 Next.js 基础框架与路由结构
视觉风格确定，Neomorphism 设计系统从零建立
行业洞察 + 实战实验室模块开发，音频播放器接入
联调上线，第一版 MVP 完成
MVP LIVE