夜雨聆风
别再用PDF投递简历了!用【v0+AI Studio+TRAE】,小白也能做出高质感求职网站,直接惊艳招聘官!
我的个人介绍网站，先放成品展示：
以及我的个人介绍网站的成品链接（需要科学上网打开）：
https://my-profile-website-sage.vercel.app/
Step 1：v0.app（https://v0.app/）
这是一款Vercel公司推出的AI驱动的全栈应用开发工具，主要用于帮助用户快速构建和部署Web应用或网站。如果想快速进入【模版页】，直接点开此链接：https://v0.app/templates。
如下图1所示，模版种类还是比较丰富的，大家可以根据需要自行选择。这里你可以不用花钱去买模版，只要点开，截图保存你想要的风格网站模版：
图1：v0.app/templates模版界面
或者大家可以使用figma（https://www.figma.com/community)，
如下图2所示：
图2：figma模版界面
Step 2：Google的AI Studio
（aistudio.google.com）
aistudio.google.com，搭建网站框架。
如何使用AI Studio，我两个月前的文章中有写过AI Studio实操｜2分钟生成多视角分镜，还自动拆分单图，有具体介绍和实操。
1、在Build中上传刚我们截图下来的网站模版图，如下图3所示：
图3：上传我们刚截图下来的网站模版图
2、在Build中输入提示词并点击【Build】创建，如下图4所示：
我的提示词如下（仅供参考，大家可自行发挥）：
提示词（参考）
参考附件中的图片，我要做一个个人求职介绍网站，这个网站要包含首页、关于我、我的文章、我的项目经验、我的联系方式这5个Tag，请按照我附件中给到的图片的视觉效果去实现这个网站，要求风格保持一致。
图4：输入相关提示词
在创建中，只需等待，如下图5所示：
图5：创建中
3、创建完成，界面右侧就是展示的效果，如下图6所示：
图6：创建完成
如果生成的有不满意的地方，可以直接在右侧的画布上进行编辑和调整，可以进行如下图7所示的操作：
点击【Annotate App】——点击【Add Comment】——手动圈出需要修改的地方，并在【add a comment】中输入需要其操作的指令提示词——最后点击【Add to chat】并点击发送。
*注：个人测试下来用上述方法调整到自己满意的感觉还是比较困难，但如果只是小的改动（比如去掉某个图标等）用上述的操作还可以。
图7：如何进行微调的操作步骤
然后我们选择【Code】中的【App.tsx】（会出现一段代码，不懂没事）——点击下载——文件夹下选择【src】——右击【App.tsx】，打开方式可以选择TRAE或者Cursor都可以（这里我们拿用TRAE打开做演示），如下图8所示：
图8：用TRAE打开App.tsx
Step 3：打开TRAE客户端编辑
大家可自行下载TRAE。然后在【Builder】的对话框中输入提示词，如下（供参考）：
提示词（供参考）
帮我启动这个项目，并打开网页
于是你就能看到在其左侧显示这个网页，如下图8所示：
图9：在TRAE中操作打开网页
如果你想看到全屏展示，可以点击如下图9所示的【浏览器中打开】：
图10：全屏预览
如果想要调整元素和内容，可以点击如下图10所示的【选择元素】——选中对应的模块/元素（比如这里我想把“John Carter”这个人名改成我自己的“Lily”）——并在对话框中输入提示词，如下：
提示词（供参考）
帮我把名字改成Lily
等待片刻就能修改好，如下图11所示
图11：调整/修改元素
同理，我要把下面“a web Designer form New York”改为“an AI Content Creator from Shanghai”就如上操作，如下图12所示：
把字号缩小：
图12：同理修改其他内容
如何修改首页上的个人照片呢？
先截图这个网页，然后把截图的网页和个人照片投喂给Nano Banana（也可以用豆包等），然后输入提示词，如下：
提示词（供参考）
图2是我个人照片，图1是我的个人网站，我想用图2生成一张和网站风格类似的个人照片，只要输出个人单独的照片就可以（不要网站全部的），并且个人照片是皮克斯动漫画风。
就能输出然后下载（当然可以改变画风，比如写实风等等），如下图13所示：
图13：用Nano Banana输出个人照
继续回到TRAE，选择元素——选中图片框——添加到对话——然后输入提示词，如下：
提示词（供参考）
帮我把这张图片替换成我附件上传的照片，请原封不动的替换，不要做任何修改。
最后上传上一步保存下来的个人照片。
注：但这里其实有个问题，虽然我上传了附件的照片，但在修改后最终呈现在网页上的还是会帮我照片做了改变（不是我上传的原图），这里我调试了很多次，还是不行（如果有知道的小伙伴可以告诉，我学习下）。
图14：修改头像照片（但和我附件上传的原图不一致）
另外如果你想让你的网页更有交互感一些，做出一些动效出来，可以：
还是先点击【选择元素】——选择需要交互的元素/内容——点击【添加到对话】——在对话框中输入提示词，如下：
提示词（供参考）
帮我实现下适合这个元素的动效悬浮上去动一下。
这里动效视频展示：
如何如果你想修改你的工作履历，同样上述的操作，如下图15所示：
甚至你可以直接选中该页面，然后点击【选择元素】——选中该页面——点击【添加到对话】——在对话框中输入提示词，如下：
提示词（供参考）
帮忙重新把这个页面排版下，要求排版美观内容充实。
图15：最终生成的工作经历页面的呈现
我在我个人简介网页的最后一part放了我往期在Linkedin、公众号上输出的文章和观点，如下图17所示：
同上述步骤写入提示词进行修改，如果你想让你的文章标题能外链到外部网站上打开，那就在提示词中多增加一句提示词，如下：
提示词（供参考）
帮我链接到这个链接，XXXXXX（*这里输入你文章所在的链接）。
如下图16所示：
图16：如何设置外链
图17：我的文章页最终呈现效果
Step 4：如何上线你的个人介绍网站？
关键的关键！全部修改/调整完成后，如何上线你的个人介绍网站？
如果不上线你的网站就只能在你本地打开，如果想让其他人看到，如何上线网站，这一part我下期具体出一篇教程，如下图18所示：
-
打开Vercel.com（*Vercel作为一个免费托管网站的平台，其部署就等于让你的作品集从“本地电脑”变成“全世界可访问的公开网站”，你的客户/老板/招聘官/朋友等都可以直观的看到你的个人介绍和作品集了）。
-
用GitHub登录
-
导入你的项目
-
点击Deploy
-
完成！自动上线！
图18：部署上线（下期详细讲解）
最终效果展示：
AI时代，市场人们，你们的简历不该再淹没在千篇一律的PDF的各种之中，不妨尝试下搭建一个属于自己的个人简历介绍网站吧，又能眼前一亮还能展示你的AI能力。
如果你公司的网站正好也要更新，不妨试试这个办法吧！
