一、全文速览图
最近更新了我的第三版个人网站。和之前的版本相比，这次我想突出个人品牌形象，增加一些有趣的互动。
这篇文章写给谁看？在传统设计工作流中，你是否遇到过这样的情况：精心设计的对齐网格和细节，上线后却被开发干掉了。有了 AI，设计师的想法就能 100% 落地。
下面，我会从设计师的角度，分享个人网站的设计和搭建思路，告诉大家如何从 0 到 1 制作网站，并完成部署上线。
二、工具栈
下面这套工具是我用下来觉得最 AI Native、也适合 Vibe Coding 的组合。
产品构思阶段，我用 ChatGPT 网页版；设计阶段，我用 Pencil。设计稿完成后，我用 Codex 完成网站开发和动效设计，最后通过 GitHub 和 Vercel 部署上线。
全程你只需要订阅 ChatGPT Plus，其他工具都可以免费使用。
三、产品构思
产品构思阶段，我们需要解决几个问题：
这个网站是用来干什么的？给谁看？以及它需要包含哪些内容？
个人网站大多用来求职。应聘时，发送个人网站链接来替代 PDF，或许能给面试官留下好的第一印象。
有时，个人网站是为了展示作品，吸引更多潜在合作方；有时，则是为了建立个人品牌，提供统一的入口。
我和 AI 聊的第一句话，通常没怎么准备，表达也不太有逻辑。这个阶段不需要遵循特定的流程或方法，让 AI 尽可能激发你的想法就好。我把这个阶段叫作头脑风暴。
我还有个小技巧：尽量用语音输入，或者直接打开对话模式，这样更容易把想法说清楚。
这个阶段我们需要得到的结果，就是一个框架，它会清晰地展示整个网站的信息结构、需要表达的内容，以及网站的交互流程。
浪味设计所 · 视觉与交互优化版 ├─ 01 首屏 │ ├─ 顶部导航、标题与定位、人物主图 │ └─ 装饰与背景、探索入口、课程公告带 ├─ 02 个人介绍 │ ├─ 章节编号、成长标题与介绍 │ └─ VibeDesign 探索标题、身份标签池 ├─ 03 探索记录 │ ├─ 章节标题 │ └─ AI 工作流、AI 新工具、使用心得 ├─ 04 课程介绍 │ ├─ 章节编号、课程标题与介绍 │ └─ 查看课程按钮、打字机主图、背景与装饰 └─ 05 联系方式 ├─ 标题与邀请、人物与背景光晕 └─ 找我聊聊按钮、社交入口、底部装饰文字
四、低保真设计
设计工具我选了 Pencil，而不是 Figma。Pencil 本身免费，只要订阅了 ChatGPT，就能在里面使用 GPT 模型，消耗订阅套餐内的 token，无需额外付费。
这样就不用从 0 开始画了。AI 生成的设计稿也已经用自动布局（Auto Layout）搭好，调整起来更方便。
提示词参考
请根据低保真设计图，还原成可以编辑的设计稿，以网页端的标准尺寸为画板尺寸。
五、视觉设计
接下来，我要给网站定风格。我会在 Pinterest 上找参考图，再放到 Pencil 里做成一张视觉板。每个画板里都会放上参考图，标注想借鉴的内容，方便 AI 读取。
我不会一开始就把风格完全定下来，而是先让 AI 读取我想参考的风格和内容，再根据生成的图片确定最终的视觉风格，因为有些风格，AI 还原得不太好。
我选择了 Image2.5 作为生图的模型，但是我会在不同的平台调用，比如 ChatGPT 网页端、Codex 或者是 Pencil。一旦我发现生成的风格偏离了，我就会新开一段对话，或者是切换不同的工具。
我会把生成效果不错的图片放回 Pencil 的视觉板，避免好用的素材散落在不同平台，后续想用时却找不到。
六、高保真设计
接着，我会根据确定的视觉风格，逐步把原来的低保真变成高保真的视觉稿。
刚开始，我用的是“拼”的方式。在保留低保真信息结构的基础上，用生成的图片把我对网页的设想拼出来：比如首屏放上我的个人形象，文章用卡片展示，按钮长成啥样。
在这个基础上逐步细化想法，直到得到一版比较满意的视觉稿。最后，再让 AI 优化一轮，比如统一网站色彩、调整间距等。这一步能提高设计稿转成 HTML 后的还原度。
提示词参考
请读取我拼成的设计稿，以网页端的标准尺寸为画板尺寸，重新绘制。
七、代码开发
接下来，我只需要把 Pencil 里面对应的设计画板链接和图片发送给 Codex，它就可以读取画板里的设计信息，开始帮我生成网页了。
在 Codex 的项目管理里，我会按功能模块，把整个项目拆成几个不同的对话，避免上下文过长，干扰 AI 的思考。
提示词参考
请读取我提供的设计画板和 UI 图片，按已确认的页面结构与视觉规范，实现一版可以运行和预览的高保真网页。
接下来，就可以在实际网页上完善交互和细节了。比如：卡片里的信息是固定的，还是需要拉取？拉取逻辑是什么？点击后跳转到哪里？
八、动效设计
让 Codex 读取设计画板以后，生成的是一个静态网站，不懂代码的设计师如何做出丝滑的动效呢？
我用到了这个动效网站 https://reactbits.dev/components/folder
它把常用动效封装成了组件。找到符合你想法的动效后，把链接发给 Codex，再告诉它准备用在哪里，AI 就能还原出来。
面对这么多动效，我们怎么找到自己想要的呢？这里我也有个小技巧。
把自己做好的静态网站设计稿，以及这个动效网站的链接一起发给 AI，让它根据你的网站推荐一些适合的动效，由设计师确认以后再执行。
提示词参考
请参考{{动效链接}}，按现有模块实现这个交互效果，配色使用网站当前的主题色。
在我的个人网站里，用到的动效主要是以下几种：
https://reactbits.dev/animations/splash-cursor
https://reactbits.dev/text-animations/falling-text
https://reactbits.dev/components/folder
https://reactbits.dev/c/components/lanyard
九、部署上线
部署上线需要用到 GitHub 和 Vercel 两款工具。我会先把网站代码上传到 GitHub 仓库，再通过 Vercel 部署上线。
不过，Vercel 部署的网站在国内可能会存在无法直接访问的情况，需要在阿里云、腾讯云上购买一个域名，这样就能得到一个公开访问的链接了。
后续如果更新了代码，也可以直接把更新后的代码同步到线上网站。
提示词参考
请把当前项目推送到我指定的 GitHub 仓库，并部署到对应的 Vercel 项目。
最后
我已经用 Vibe Coding 做过好几个产品，所以完整做出一个网站并不难。真正有价值的是想法。
AI 让技术更容易上手，也给了设计师更多机会。以前那些天马行空的想法，终于能自己一一实现了。
最后，欢迎光临我的个人网站➡️ https://www.vibedesignlab.xyz/