从提示词到上线！手把手教你用Figma Make建立个人网站

一、全文速览图

设计师递交作品集的方式主要以 PDF 电子文档为主，但如果觉得这么展示乏味，或是展示的内容需要更多元，如增加动效或视频等，那么就需要使用线上展示的方案。

之前分享的作品集展示方法中，推荐了线上文档工具，可以很便捷的创建个人主页和展示项目内容：

但我们今天要分享的，是一个很多同学都关注的方向，即创建自己的设计师个人网站。

二、Figma 的准备工作

在 AI 工具大行其道的今天，使用 AI 生成网站的工具已经数不胜数，不管是 Codex，还是 Claude Design、Lovart、Framer、Cursor、Kimi 等，都能非常便捷地生成高质量网站。

但要使用这些工具存在以下这些阻力：

1. 无法正常联网，需要通过“特殊工具”访问
2. 如 OpenAI 不支持大陆手机号注册流程很麻烦
3. 都需要开通会员，多数也不支持国内支付方式

所以为了避开这些问题，建议大家可以直接选择 FigmaMake 来作为个人作品集网站的生成工具，它还具有下面这些优点。

第一，Figma 是 UI 必用工具，使用起来会更熟悉，多数用户已经开通会员/教育版账户，自带 AI 点数，可以直接使用 Make 功能。

第二，Figma 可以将生成的内容导入到设计画布中进行手动修改，可以结合我们的实操能力提高设计质量和效率，而不是只用文字描述。

第三，Figma 可以直接将生成的页面免费进行发布，而不用另外购买云服务器和域名进行配置。

所以想要使用 FigmaMake，只需要先准备 Figma 的付费或教育账户即可。但要强调一点，就是 Figma 最低档付费会员和教育账户，都只有3000点积分用于 AI 生成，很容易用完，所以建议注册多个账号，然后加入到同一团队中，这样编辑同一个 Make 文件，就可以在不同账户间切换，使用各账号内的剩余积分。

如果原本不用 Figma的话，那也可以开通 Kimi，它的“网站”模块有和 FigmaMake 差不多的功能，使用逻辑也基本一样，也支持直接发布。就是一定要开通付费会员才能比较好的使用起来。

用哪个工具可以自己选，但工具只帮我们设计和搭建网站页面，不能直接帮助我们完成项目设计和包装（直接AI去做的质量等于不能用）。所以在正式开始创建之前，也尽量先完成作品的准备，只有确定了要展示的项目数量以及项目内容，才能引导AI生成合适的静态页面结果。

三、Figma Make 的网页生成方式

Figma Make 是使用文字描述来生成网页的AI工具，我们要生成个人主页的话就需要给它明确的指示。以首页为例，我们需要在描述中添加下面这些信息模块：

1. 网页的类型和规格
2. 想要使用的视觉风格
3. 页面中包含的模块
4. 每个模块内包含的字段信息

基于这个要求，我们可以先在文本工具中编辑出下面这样的提示词：

我想做一个 UI/UX 设计师的个人作品集网站，网站包含以下几个主要的页面：

1. 首页：Hero区域、职业经历、作品画廊、联系方式
2. 作品详情页：作品的详情页面，包含作品基本信息和作品集图片流。

接下来我会详细描述这两个页面的内容和交互，设计风格则需要你发挥，整体偏向深色模式。

我们先做首页。

首页

1. 顶部导航栏：导航栏需要包含个人Logo+名字、导航选项：Home、Career、Works、最右侧的 Contact 按钮，点击都可以跳转到下方对应的模块上去。
2. Hero：标签「UI/UX Designer」、个人照片以及超大标题「Superman Chao」、副标题介绍「用系统化设计思考与 AI Agents 协作，连接产品目标与真实用户体验。」以及整个Hero区域需要一张极具视觉冲击力的背景图。
3. Experience：标题「Experience」、副标题「本页经历均为虚构，仅作为展示使用」
4. Selected Works：标题「Selected Works」、四个项目作品的封面+介绍+标签+序号，封面均为16:10的比例，大小一致。
5. Contact：标题「Let Design Make Sense」、副标题「如果这些项目与你正在寻找的 UI/UX 设计能力匹配，随时通过邮箱联系我。」、以及电话、邮件、小红书和微信公众号的按钮。

交互

1. 导航栏可以分别导航至经历页面和作品详情页，点击 logo 区域回到首页。
2. 当鼠标指针移入作品画廊中的作品上时，会变成箭头的样式。
3. 首页页面滚动时，Hero 区域缩放并渐隐。

字体 ：无衬线体使用 Space Grotesk，衬线体使用 GFS Didot。

直接将这些信息输入到 Figma Make 中，就可以等待它生成出相应的结果了。（当然 Figma Make 对英文 Prompt 更加友好，所以你也可以把写好的中文 Prompt 扔给 AI，让 AI 帮你翻译成英文）

AI 生成的结果会有很大的随机性，所以不一定符合我们的想法。如果差异极大，可以重新修改风格描述内容，重新生成，如果只是局部需要修改，可以直接在输入框中输入针对某个指定模块进行调整的说明。

而不管生成的结果我们满意不满意，里面的文字信息和图片是肯定需要替换的，所以可以点击编辑模式，直接手动修改里面的文本内容即可：

图片编辑就是比较麻烦的过程，Figma 目前没有给出直接替换图片的操作，需要我们先设计好图片文件，然后一次拖一张进输入框，再指定它替换原页面中的某张图片。

替换完之后，我们还需要增加二级页面，即每个项目封面点击以后要能展开具体的项目包装内容。这些都是我们之前就已经设计好的东西，所以我们可以给出大致如下的描述：

再做作品详情页： 左右布局，但是分为左四分之一，和右四分之三。

1. 顶部导航栏
2. 左侧作品标题、简单介绍、标签+分类，作品信息固定在顶部，不随鼠标滚动而移动。
3. 右侧作品图片，需要你为我留好图片的位置，做好自动布局，图片间距 0px。

交互：作品画廊可以点击进入对应的作品详情页。

字体：与首页的字体规则保持一致。

实现二级页面以后，下面就可以为这些页面添加内容。我们需要将项目包装的页面先导出成本地图片，然后可以批量拖进输入框中，指定将它们添加到某个项目的二级页面中去，就能完成内容的填充。

批量添加完成以后，设计师个人主页的主体基本上也就制作完成了。还想怎么增加什么内容或动效需要自己尝试，直至能符合自己的需要为止。

然后就可以点击右上角的 Publish 按钮，在打开的弹窗中再次点击上传按钮，就能将该页面进行公开通过浏览器访问，而弹窗中间的网址就该页面的地址，可以直接复制出来进行分享。

下面就是简单生成的主页案例（Token 不够用不做更多调整了）：

链接：https://kiwi-vary-20810419.figma.site

如果使用其它工具生成逻辑基本一样，实际操作上的差异你们可以直接问这个工具让它给你解答即可。

在实际求职过程中，网页版本可以是辅助和补充，但最好不要只做它。因为很多投递环节可能不看链接只收电子文件，所以 PDF 的版本是一定也要同时输出的。

四、结尾

AI 工具可以帮助我们非常轻松地搭建线上网页，节省我们大量的时间。但还是要注意，我们做作品集网站不是为了展示网站本身，而是为了展示项目和设计成果，要尽量把更多的注意力和精力放在项目包装里，不要让网站过度花哨来影响我们对项目本身的观感。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」