Codex制作高级个人网站完整流程：从UI参考到部署上线的AI实战教程

AI时代，每个人介绍自己的方式，除了简历，还可以是个人网站。那么，如何去打造一个有特色的个人网站呢？分享下我的思路以及使用的Skill：

第一步：先找参考页面，而不是直接让AI设计

使用AI做网页，如果直接输入提示词：

“帮我做一个高级个人网站。”结果往往比较平庸。因为AI并不清楚你的审美标准。所以第一步，先找好参考页面。

设计个人网站前，你需要先整理一份个人资料文档：

personal-info.md

内容包括（参考）：

个人简介教育经历工作经历项目经历代表作品数据成果图片素材联系方式

然后告诉Codex：

“根据这份个人资料和参考页面，重新设计我的个人网站。”

这样生成出来的页面，才不会变成一个通用模板。

AI的初稿不一定是你喜欢的风格。你可以找到喜欢的页面后，把链接上传到Codex。

在VS Code中：

输入：

打开Skill列表。

选择：

image-to-code

Prompt：

请根据链接中的UI截图还原页面。重点保持： 1. 页面布局 2. Typography 3. 间距 4. 色彩系统 5. 图片比例 6. 组件结构不要增加额外设计元素。

这一步可以把优秀设计快速转换成代码。

不过需要注意：

这一版只是视觉还原，但是：

按钮不能点击；页面不能跳转；功能只是静态展示。

所以还需要下一步。

这时使用：

Frontend Design

在Codex中：

输入：

选择对应Skill。

Prompt：

基于当前UI，不改变整体视觉风格。请将这个页面从静态展示升级为真正可使用的网站。增加： - 页面导航 - 点击反馈 - 页面跳转 - 卡片详情 - 响应式布局保持当前设计语言。

经过这一步：

变成真正可以浏览和操作的网站。

完成开发后，可以先使用WorkBuddy生成临时链接，小范围测试页面效果和交互。

确认没有问题后，再部署到GitHub、Vercel等平台，让网站正式上线。