制作自己的个人网站作品集

打个广告：6月18号有一个codex直播课程 

费用399元，直播时间是6月18号晚上19:00-21:00

课程咨询微信：Bwc2030

报名赠送十个codex录播案例 （3个skill案例  7个网站作品集案例）

OK，广告打完：  

制作网站的前提；先知道制作网站的基本步骤：

• 01 先用codex给你生成网页的布局大纲
• 02 怎么插入自己的图片
• 03 怎么加入交互效果
• 04 怎么导出PDF的格式；因为有的人还是会经常用PDF去查看

开始制作：

第一步：制作网站的布局：

在此之前一定要在你的电脑创建一个文件夹；指定给codex；不然生成的网页没法投放；指定你建立好的文件夹即可

紧接着做网站的时候；你可以找一个截图或者自己草绘一个大概的排版给codex；

• 比如我想做这个首屏（网上的截图）的效果：那你可以发给网页版本的GPT；最准确不费额度的用法就是先反推出提示词；再去codex生成；

提示词可以试试我这个再结合你的参考图：

请基于我提供的参考图，生成一份「网页代码生成提示词」。 这份提示词的目标是指导 AI 尽可能高保真地还原参考图中的网页视觉，而不是重新设计。 无论参考图是什么风格，都必须从图中提取： - 页面类型 - 视觉风格 - 构图结构 - 主体内容 - 背景方式 - 色彩系统 - 字体气质 - 排版比例 - 图像/产品/人物关系 - 装饰元素 - 动效可能性 - 响应式策略 - 代码输出要求

提示词结构必须包含：

text

1. 固定目标

2. 参考图视觉分析

3. 页面类型与定位

4. 技术栈

5. 全局样式

6. 页面整体结构

7. 背景层

8. 主视觉层

9. 内容排版

10. 导航或顶部信息

11. 装饰与特效

12. 动画与交互

13. 色彩 Token

14. 响应式要求

15. 禁止偏离方向

16. 代码输出要求

生成一个可以直接复制的提示词

那我们会得到：

得到提示词后：你就复制给codex；纯文字我们也会接近跟参考差不多的效果；

第二屏第三屏等你不想这么麻烦；那你用：www.aura.build这个网站；有大量的提示词风格；以及UI和交互功能；用起来也很方便；只需要复制提示词给codex这样更简单；

比如我们想要这个做第二屏：直接点击copy；

复制完给codex；

第二屏就直接复制提示词可以操作完成；

第三，第四屏都是根据自己的需求去增加；可以直接截图自己要的排版风格；也可以在这个网站上找现成的提示词

---

OK！第二步；插入自己的作品

• 刚刚我们只是在生成布局大纲；现在需要把自己的作品插入进来；
• 两种方法：
• 01 直接丢给codex；告诉他替换哪个第几屏的插图；

• 02 把你的素材整理好，命名好比如：站位1；站位2；站位3等；首屏背景图（如果是png序列也是一样）；

第二屏也是如何；只需要把自己的图片或者视频放置根目录文件夹即可；图片太多的话可以建立文件夹：也可以识别

文字修改也非常简单：自带一个注释功能；

先点击自己需要修改的部分；可以一次性注释很多个地方；点击后点开图标；可以直接对文本进行修改自己需要的文字

文字字体字重都可以直接修改：修改完；右上角直接点击发送即可

怎么加入鼠标交互动画？也是两种方式：

• 01 可以从这个网站提取代码提示词；网址：aura.build
• 复制提示词；告诉codex；根据这个提示词加入交互动画；跟制作布局一样；
  
  
• 02 自己的想法大白话告诉codex也可以；
  

大家就可以发挥自己的想法啦！！