用Vibe Coding快速搭建一个聚合常用链接的个人导航，把邮箱、GitHub、CSDN、领英、剪映、微信公众号等入口集中在一个清爽页面上，点击即跳转，不用再翻收藏夹或记网址。

准备基础信息与风格偏好

打开任意支持Vibe Coding的AI编程工具（如Cursor、Codex或Trae），新建对话窗口。先不急着写代码，花2分钟整理出你要放上去的全部链接——至少包括3个真实可用的平台入口，比如你的CSDN主页、GitHub仓库、个人邮箱；如果暂时没有，用测试链接占位也行，但所有链接必须带完整协议头（https:// 或 mailto:），否则生成的按钮点不了。

接着选一个视觉风格：极简白底、深空蓝黑、玻璃拟态、赛博霓虹，任选其一。不需要精确描述，直接说“我要一个浅色系、无动画、文字居中的导航页”就足够让AI理解。

用自然语言生成初始代码

在AI工具输入框中粘贴以下指令（可逐字复制）：

请帮我生成一个纯静态HTML个人导航，要求：1）单页结构，顶部居中显示我的名字“Vibe Coding”；2）下方为垂直排列的图标+文字按钮，共6个入口；3）每个按钮包含：图标（用Font Awesome 6免费CDN）、平台名称、跳转链接；4）整体配色干净，移动端适配；5）不要Ja vaScript交互，只用HTML+CSS；6）输出完整可运行的单文件代码。

按下回车后等待AI生成。这一步通常耗时10–30秒，生成结果会是一段带doctype开头的完整代码。别急着复制，先滚动到底部确认是否包含引入Font Awesome的CDN地址——如果没有，立刻补一句：“请加上Font Awesome 6的最新CDN链接”。缺少图标CDN会导致所有按钮只显示文字，无图标。

替换占位内容并本地预览

将AI生成的代码全选→复制→粘贴到VS Code或记事本中，另存为index.html，编码选UTF-8。

用浏览器双击打开这个index.html文件，检查是否能正常显示名字和6个按钮。如果页面空白或报错，大概率是复制时混入了Markdown符号（如```html），删掉首尾三重反引号即可。

找到代码中类似GitHub这样的6处链接，逐个替换成你的真实地址。注意保持格式一致：href值必须用英文双引号包裹，且以https://、mailto:、tel:等合法协议开头。

改完保存，刷新浏览器。此时所有按钮应可点击跳转。若某个链接点不开，右键→“检查”→看控制台有没有Mixed Content警告——说明你误用了http://开头的旧链接，必须换成https://。

部署到GitHub Pages上线访问

第一步：注册GitHub账号（已有则跳过）→新建公开仓库，命名为vibe-na v（必须全小写、无空格、无中文）→进入仓库，点击Add file → Upload files。

第二步：把本地改好的index.html拖进上传区→滚动到页面底部，在“Commit changes”栏填写：first commit → 点击Commit changes。

第三步：仓库顶部点Settings → 左侧菜单点Pages → 在“Build and deployment”区域，Source选Deploy from a branch → Branch选main → Folder选/(root) → 等待状态条变绿，出现“Your site is published at https://xxx.github.io/vibe-na v/”。

复制这个URL发给朋友，他们就能通过互联网直接访问你的个人导航站了。