设计师递交作品集的方式主要以 PDF 电子文档为主，但如果觉得这么展示乏味，或是
展示的内容需要更多元，如增加动效或视频
等，那么就需要使用线上展示的方案。
但我们今天要分享的，是一个很多同学都关注的方向，即创建自己的设计师个人网站。
在AI工具大行其道的今天，使用AI生成网站的工具已经数不胜数，不管是 Codex，还是 Claude Design、Lovart、Framer、Cursor、Kimi等，都能非常便捷的生成高质量网站。
所以为了避开这些问题，建议大家可以直接选择 FigmaMake来作为个人作品集网站的生成工具，它还具有下面这些优点。
第一，Figma是UI必用工具，使用起来会更熟悉，多数用户已经开通会员/教育版账户，自带AI点数，可以直接使用Make 功能。
第二，Figma可以对生成的内容导入到设计画布中进行手动修改，可以结合我们的实操能力提高设计质量和效率，而不是只用文字描述。
第三，Figma可以直接将生成的页面免费进行发布，而不用另外购买云服务器和域名进行配置。
所以想要使用 FigmaMake，只需要先准备 Figma的付费或教育账户即可。但要强调一点，就是Figma最低档付费会员和教育账户，都只有3000点积分用于AI生成，很容易用完，所以建议注册多个账号，然后加入到同一团队中，这样编辑同一个Make文件，就可以切换不同账户并使用账号内的剩余积分。
如果原本不用Figma的话，那也可以开通Kimi，它的“网站”模块有和FigmaMake差不多的功能，使用逻辑也基本一样，也支持直接发布。就是一定要开通付费会员才能比较好的使用起来。
用哪个工具可以自己选，但工具只帮我们设计和搭建网站页面，不能直接帮助我们完成项目设计和包装（直接AI去做的质量等于不能用）。所以在正式开始创建之前，也尽量先完成作品的准备，只有确定了要展示的项目数量以及项目内容，才能引导AI生成合适的静态页面结果。
FigmaMake是使用文字描述来生成网页的AI工具，我们要生成个人主页的话就需要给它明确的指示。以首页为例，我们需要在描述中添加下面这些信息模块：
基于这个要求，我们可以先在
文本工具中编辑出下面这样的提示词
：
我想做一个 UI/UX 设计师的个人作品集网站，网站主要包含以下几个主要的页面：
- 首页：Hero区域、职业经历、作品画廊、联系方式
- 作品详情页：作品的详情页面，包含作品基本星系和作品集图片流。
接下来我会详细描述这两个页面的内容和交互，设计风格则需要你发挥，整体偏向深色模式。
- 顶部导航栏：导航栏需要包含个人Logo+名字、导航选项：Home、Career、Works、最右侧的 Contact 按钮，点击都可以跳转到下方对应的模块上去。
- Hero：标签「UI/UX Designer」、个人照片以及超大标题「Superman Chao」、副标题介绍「用系统化设计思考与 AI Agents 协作，连接产品目标与真实用户体验。」以及整个Hero区域需要一张极具视觉冲击力的背景图。
- Experience：标题「Experience」、副标题「本页经历均为虚构，仅作为展示使用使用」
- Selected Works：标题「Selected Works」、四个项目作品的封面+介绍+标签+序号，封面均为16:10的比例，大小一致。
- Contact：标题「Let Design Make Sense」、副标题「如果这些项目与你正在寻找的 UI/UX 设计能力匹配，随时通过邮箱联系我。」、以及电话、邮件、小红书和微信公众号的按钮。
- 导航栏可以分别导航至经历页面和作品详情页，点击 logo 区域回到首页。
- 当鼠标鼠标指针移入作品画廊中的作品上时，会变成箭头的样式。
无衬线体使用Space Grotesk，衬线体使用 GFS Didot。
直接将这些信息输入到Figma Make中，就可以等待它生成出相应的结果了。（当然Figma Make对英文Prompt更加友好，所以你也可以把写好的中文Prompt扔给给AI，让AI帮你翻译成英文）
AI生成的结果会有很大的随机性，所以不一定符合我们的想法。如果差异极大，可以重新修改风格描述内容，重新生成，如果只是局部需要修改，可以直接在输入框中输入针对某个指定模块进行调整的说明。
而不管生成的结果我们满意不满意，里面的文字信息和图片是肯定需要替换的，所以可以点击编辑模式，直接手动修改里面的文本内容即可：
图片编辑就是比较麻烦的过程，Figma目前没有给出直接替换图片的操作，需要我们先设计好图片文件，然后一次拖一张进输入框，再指定它替换原页面中的某张图片。
替换完之后，我们还需要增加二级页面，即每个项目封面点击以后要能展开具体的项目包装内容。这些都是我们之前就已经设计好的东西，所以我们可以给出大致如下的描述：
再做作品详情页： 左右布居，但是分为左四分之一，和右四分之三。
左侧作品标题、简单介绍、标签+分类，作品信息固定在顶部，不随鼠标滚动而移动。
右侧作品图片，需要你为我留好图片的位置，做好自动布局，图片间距 0px。
实现二级页面以后，下面就可以为这些页面添加内容。我们需要将项目包装的页面先导出成本地图片，然后可以批量拖进输入框中，指定将它们添加到某个项目的二级页面中去，就能完成内容的填充。
批量添加完成以后，设计师个人主页的主体基本上也就制作完成了。还想怎么增加什么内容或动效需要自己尝试，直至能符合自己的需要为止。
然后就可以点击右上角的 Publish 按钮，在打开的弹窗中再次点击上传按钮，就能将该页面进行公开通过浏览器访问，而弹窗中间的网址就该页面的地址，可以直接复制出来进行分享。
下面就是简单生成的主页案例（Token不够用不做更多调整了）：
如果使用其它工具生成逻辑基本一样，实际操作上的差异你们可以直接问这个工具让它给你解答即可。
在实际求职过程中，网页版本可以是辅助和补充，但最好不要只做它。因为很多投递环节可能不看链接只收电子文件，所以PDF的版本是一定也要同时输出的。
AI工具可以帮助我们非常轻松的搭建线上网页，节省我们大量的时间。但还是要注意，我们做作品集网站不是为了展示网站本身，而是未来展示项目和设计成果，要尽量把更多的注意力和精力放在项目包装里，不要让网站过度花哨来影响我们对项目本身的观感。
同时，直接使用AI来生成作品集也是不可取的，但我们已经在研究一些辅助的AI方案帮助我们更高效有质量的完成作品集的输出了，这些方法会加入到我们下期的实战班课程中。
