别人花3天排个作品集，你用Codex 30分钟搞定！附完整课件赠送

今天给大家分享，如何用codex打造个人作品集。

整个过程说难不难，说简单... 啊确实简单~

关于

，为了教程不显得臃肿这里就跳过啦，如果有需求可联系我免费领取这方面的教程，我们学员内部有现成无痛操作教程~

我们先说一下整个流程。

如果你已经有了作品集，那第1步就可以省略，直接把它做成可交互的网站格式就行。

如果你只是自己看看不需要分享给其他人看，那第3步也省了，因为相对来说第3步反而是最麻烦的。

而如果你什么都没有...

个人作品集说白了就是“商品”详情页，是一个hr看完是否考虑聘用你的关键资料！因此这一步千万不要瞎写，不要用战术（作图）上的勤奋掩盖战略（策划）上的懒惰。

上面这个基础框架，是我从线下班职场大课中偷来的，大家可以简单参考一下。

如果你不会写，也可以与codex对话，让它帮你分析。凡是你不懂得，你都可以用最简单，最直白，最不绕弯子的方法告诉它，让它帮你解决！你是它的老板，你得硬气起来！

策划好的信息，即可复制一份，丢到下一步让ai做网站设计的时候套进去。

在第二步网站设计的时候，就不能瞎来了，因为它可能真的不太懂设计... 如果你直接就让它设计网站的话，它大概率会给你设计的非常普通。

就像这样..

所以这里，我们得用些手段工具来补齐codex天生审美不足的缺陷。

首先，你可以安装一下官方的这个

插件，这个插件会比较科学的做各种分析规划，会让整个项目看起来更合理~

点开你会发现，它其实就是由一堆skill规范打包而成的：

但我一般不建议只用这一个插件，因为它只是在项目规划上做的比较科学，但审美上的提升依旧一坨。

比如下图所示，我把前一步分析的信息内容丢给它，它会先给你3版方案图让你选，但是这3版都丑到令我无从下手...

但也要注意的是，这里丑也不全怪人家，也可能是前一步规划的框架太呆板，这也会限制ai的发挥。

所以这就得请出第二个skill

，这是一个专门用于提升页面审美的skill。这个必须安装一下！

除了这个，如果是构建网站的话，最好再安装一个

，它是一个通用的工具集，用于提高ai的编程能力，让网站构建更快更合理！

既然用了codex就好好用gpt的5.5模型，不建议接dpsk来玩这些，否则你会很难受。一个是因为编程能力确实不在一个档位，其次codex也不是专门适配dpsk的，这就反向降低了agent的表现...

非要便宜可以接glm5.2，这个目前很强！你看智谱的股价就知道了~

关于上面2个工具怎么安装，也是一句话的事情：

你也无需担心重复安装什么的，操作简直跟呼吸一样轻松~

安装好后，新建一个项目文件夹，在对话框输入信息之前，先输入斜杠"/"，呼出工具列表，然后依次输入这2个skill的工具名，就能看到它们。（当然你也不需要主动搜索，提示词提及或者让ai自动触发也行）

然后还是正常的对话，等待ai给出答卷，我们来看一下结果：

和之前的一对比，会发现确实版式丰富了些许，动效强化了些许。但是，也只是些许...

因此，我真正建议的玩法，不是把所有创作权都丢给AI，而是由人来做把控！

因为我们还有自己想要的

，在这些的约束下，ai未必能完整发挥其眼前一亮的“文生图”惊艳时刻~

其次，ai盲建也存在随机性，而这个的等待时间成本太高，也是伤不起~

因此我们必须有干预，要么是提示词把效果写丰富些，要么是直接给到现成的参考让ai直接去借鉴，甚至是照搬~

所以这里我也给大家整理了一些参考网站：

有像直接复制一整个网页设计提示词的网站：

也有像提供各类组件动效设计参考的网站：

它们的使用也非常简单，你只需找到你喜欢的，点击复制代码，然后回到codex，让它直接复刻即可~

比如下面这个，我们只需点开，然后点击左边的

按钮即可：

codex就会根据提示词的描述，把网页设计成这个风格，包括动效也是如此：

*由于写教程的时候codex更新遇到闪退，来不及修复了，先用上周内部课直播课的录屏片段给大家看一下：

但要注意，此类网站为了维持运营以及创收，基本都需要开通会员， 我们只需选择免费的就好了。

如果你看中了一个非常喜欢的但要付费，也可以把那个网页录成gif或者视频丢给codex，让它去解读复刻，也能抄个7788~

初步大方向定了，接下来就是各种微调了，这里codex是真的贴心，当我们用codex的内置浏览器打开网页后，可以看到窗口上方有个截图和注释按钮，使用注释就可以自动吸附浏览器各类组件：

比如我上面想把这一排logo换成真实的，就可以使用注释，按住鼠标左键不放，拖拽一个区域，然后输入信息，发送，codex就会逮着这一块进行修改：

以此类推，像这个框框，我也可以在动效参考网站上复制的动效代码贴进来，让codex把这个模块的动效改成参考的样式：

接下来的路就得靠你自己走了~ 所有的修改均是如此，用简单的对话即可完成。包括你想录制一些独属于自己的视频，也可以用sd2做好了让codex替换进去~

至此，本地端就把个人作品集网站给设计好了，下一步就是上传云服务器上发布了！

这一步就稍微有点门槛了，因为要涉及到的新东西有点多。

但逻辑其实很简单，这无非就是一个hr点开就能看到我们作品的网站，那我们只需准备这2样东西：

1、一个24小时不关机能存放我们作品信息且接受第三方自由访问的云平台。因为我们的信息也不多，所以会有免费的云平台供我们使用。

2、一个看起来像正经网站域名，也就是作品集网页链接。但这里就开始有门槛了，因为域名需要购买，好在便宜的几块到几十块就行。但域名购买需要实名认证+工信部备案，以确保你不会发布一下违规的信息~ 最后再装一个免费的SSL证书即可。

上面2步搞定，一个谁拿到网页链接就可以随时打开的个人作品集网站就算真正搞定了！

当然，有市场就会有需求，国内外应该有这种付费专门让你发布作品集的第三方服务平台。

但能否高自由度的设计网站就不太清楚了，这个大家如果有用过好的，可以评论区留言分享给大家~

注册一个github账号，在codex里让codex把你刚设计好的网站上传到github上。至于如何上传，也是直接叫codex操作就行，非常简单，接着绑定一下账号，取个项目名字就好了~

这里可以试试

这个托管网站：

不需要钱，也不需要购买域名及后续的认证备案。直接链接里刚上传到github上的网站项目信息，即可一键部署进来。

但遗憾的是，国内需要魔法环境才能访问，咱们大多数公司的hr估计没得这个环境...

所以我建议使用腾讯云旗下的

：

部署的方式和上面一毛一样，但如果你没有自己的个人域名，则只能获得一个仅供3小时临时预览的链接...

所以需要弄个自己的域名，我这里接入了公司的域名，并弄了个子域名：

，这样一切就都就绪了，且国内访问贼快！

来看下效果，感兴趣的同学也可以自己打开上面链接体验一下：

到这一步我感觉有点超纲了~

怕你听懵，所以域名配置这块没展开讲，感兴趣的同学可以继续研究一下，我们本次的核心是学习如何使用codex设计一个自己的个人网站。

其实还有很多细节，图文无法详尽分享，这个是电商头等舱内部的直播课，虽然视频无法发给大家，但课件还是可以免费分享给大家的，里边除了有流程步骤外，还有其他codex玩法攻略。

最最最后！其实现在大多数HR看的还是PDF，如果有个人作品集附录，大多数人会选择把作品发布到【站酷 】上来，无需魔法，打开贼快，而且看的也很明白~

所以你不想折腾，可以直接选择让codex帮你策划+设计个人作品集，把这些作品放到站酷上来。像我们hr说的，基本面试的设计师都有在玩站酷~

ok，教程就到这里啦~ 其实整个流程不难，如果你觉得难核心是在于你还没摸过，所以天然存在陌生感，当你上手一试之后，其实你会发现操作完全没有什么门槛，最终卡点还是回到了我该怎么策划，怎么设计我的网站上面了，诶这又回到了拼创意拼美学的时候。

如果对你有所帮助，还望点个赞，留个言，感谢大家的支持！我将继续更新好玩实用的codex与设计相关的教程🌹