夜雨聆风
这一步我个人认为是越细致越好的，我在这一步甚至梳理好了每一个作品我要讲什么，文案在这里就已经确定下来了，包括图片。在这一步多花一些时间，实际是反而能为你后续节省更多的时间——修改简单的文案总要比修改设计布局和文案要简单不是吗？
当然，在这一步你就可以利用 AI 工具来辅助你了，比如帮你生成一下框架、和 AI 多对话几次找到自己的突出优势等等，AI 作为一个工具使用的角度是灵活的、个性化的，你完全可以根据自己的卡点来使用它们。
这里你可以尽你所能地发挥你设计的热情，尽可能发挥你对设计的理解和想法去设计。当然你也可以去找参考，或者你喜欢的网站风格和排版布局。
不过这里需要注意的是响应式，理论上来说个人网站的信息密度不会很高，毕竟大家都喜欢说“less is more”，所以其实不设计响应式也无所谓，后续只需要告诉 AI，它会自动帮我们完成。
设计的部分我就不再过多赘述了，这是设计师的本职工作。
开发前的准备
连接好 MCP 后，这里需要给大家说明几个必要的操作要求，建议大家使用的时候一定要阅读并遵守，否则你会发现 AI 无法完成你的任务。
一定要先打开 Figma 开启 MCP 服务后，再打开 TRAE，否则就算智能体显示 Figma MCP 连接成功，在获取设计文件信息时也会失败，甚至可能直接就连接失败； 在使用的过程中，一定要一个小模块一个小模块的还原，千万不要一口气还原一个完整的页面，甚至是多个页面，那样效果一定很差； 在 AI 还原的过程中，必须要确保 Figma 文件的用户正处在正在还原的页面所在文件中（也就是说绝对不能去查看其他文件，多屏分屏分窗口都不行），否则依然会 Figma 信息获取失败； 如果要使用图标，我更建议使用开源的已经广泛使用的图标库，例如 remix、lucide 等等，这样的话不需要单独切图，省时省力。 设计师网站里面几乎不可能一张图片没有，如果有，一定要检查路径，让其放在 Assets 文件夹下，一般这里有 2 种方法，一种是自己先把所有图片下载好然后导入到项目，另一种是修改 Figma 的资源下载方式，默认是 Local sever，修改为 Download；
请注意，以上的几点是必要做到的，否则是无法还原的！
搭建基础框架
下面就是搭建框架了，如果你是一个有一定的开发基础的人，你完全可以利用 IDE 模式来独立完成这一步。但如果你是一个完全不了解的人（像我一样），那我建议这里使用 TRAE solo 模式（其他 IDE 工具都有类似的功能，例如 Qoder 的 Quest 模式等等）来实现第一个页面，这里我们要的是基础框架的代码文件，因此无所谓它是否需要还原设计文件，因此这一步，我们要做的很简单，只需要跟 AI 说明我们要做一个个人网站即可。
但即使如此，我依然建议大家在提示词中增加一些额外的要求，我在这里整理了一下，并给出我的理由：
使用 ShadcnUI 组件库来还原组件：因为 ShadcnUI 组件库是一个无头组件库，完全可以自定义样式，但是又封装了全部的基础业务逻辑，例如聚焦态等等，无障碍考虑足够； 使用 react 框架来还原：虽然 AI 几乎 100% 会使用 react 框架，但是我依然建议这么说明，因为以防万一;
这时候开始生成，你会得到一个非常“丑陋”的原型图，这就像是产品给我们的设计原型一样，你可以理解为从 Figma 做设计变成了利用 AI 直接用 IDE 工具来做设计，只是自动布局的数据从给到 Figma 变成了给到 AI 而已。
开始还原设计
这里要利用 Builder with MCP 这个智能体，具体的一些要求我在上面已经提到了。再次重申，一定要一小块一小块还原，就像下图这样，我这次只还原一个导航栏。
除此之外，你可能会遇到另一个问题，就是图片依然路径不是位于src/assets中，这时候建议复制路径，然后选中要替换的图片的元素，然后告诉AI来进行替换。
再者，因为个人网站具备一定类似博客的性质，可能有很多图文内容，AI 可能会出现信息缺失的问题（特别是文章那种地方），这时候我建议大家搭配截图交给AI。
这个过程要消耗比较旧的时间，也十分耗费积分，需要大家有耐心的去调整。
优化交互
交互设计在这里依然可以利用自然语言对话完成，你可以完成更酷炫的动画效果、交互的一些细节，例如点击后是新建 Tab 而不是直接在本页面打开等等。
这一步也很简单，主要是选择元素，说明需求即可，就不过多说明。
打包代码
这是在部署前，需要你对代码文件做的准备，如果你的个人网站也是静态网页，我个人建议使用这些云服务产品的 OSS 部署方案，通常免费的就足够满足需求。
打包代码也只需要跟AI说明“你要用OSS部署”即可，AI 运行结束后，会多出来一个叫做 dist 的文件夹，这就是我们待会部署需要的全部代码资源。
准备域名
购买域名
想要购买域名你可以直接前往阿里云、腾讯云等云服务产品官网，直接搜索“域名”即可，例如下图就是阿里云的域名购买页面。
你可以自己搜索一下想要的域名是否还可以购买，找到自己想要的域名购买即可。不过这里我建议搭建优先选择.com的域名，其次是.cn，一般也不会很贵，100以内一年。像xyz、net这些域名，可能只是第一年很便宜，后续都十分昂贵。
实名认证
国内要求域名必须要进行实名认证，这里就是要填写一些个人信息然后认证，通常一天内绝对可以完成。
域名备案
这一步必要但十分繁琐，我上文也说了，一般要一周左右。
阿里云等云服务厂商有 IPC 备案的代理，因此你可以在这里进行，也是免费的，而且入口更好找一些。
这里要说明的是，你可能需要额外购买一个云服务器，例如阿里云基础的 99元/年的，当然你也可以选择其他服务商的，通常会便宜一些，例如腾讯是 79元/年，购买之后，你在备案提交的信息中，才可以选择备案类型，因为这一项必填，但你没有服务器就没法填写，使用服务器的形式是 ECS 备案。
备案彻底完成后，阿里云以及政府部门都会给你发送邮件和短信通知你已经完成备案，该信息需要一定的时间同步，我自己发现几小时后就可以彻底同步状态为已备案。
这时候你会获得一个重要的信息，网站备案号，就是你在每一个国内网站的页脚会看到的，例如下图字节跳动官网页脚：
国家规定这个信息必须要在网站上展示，否则是违法的。这时候你需要把你的这个备案号交给你的 AI 让他帮你添加即可，不过要注意这个并不是必须要在页脚，任何位置只要放置了即可。
公安备案
这一步如果你只是一个静态的作品展示网站，不存在广告、营收等等，是可以不做的。反之，你是必须要做的，特别是如果你是以一个企业的形式，而非个人，否则依然是违法的。其实就是字节跳动官网下方的 IPC 备案号左侧的这个，如果你有，也需要添加到网站上。
这个其实十分麻烦，等待时间更久（30 个工作日以内），而且需要你先把网站部署才可以，因为他要做的事情是审核你的网站的安全性。
这里如何操作阿里云官方提供了非常详细的教程，这边我就不再过多赘述了，我把教程链接放在这里。
教程链接：https://help.aliyun.com/zh/icp-filing/basic-icp-service/the-public-security-network-for-the-record-information-fill-in-the-guide?spm=a2c4g.11186623.0.0.3f9c4b7cmNMWxT
我使用的是阿里云的 OSS 服务，你当然也可以选择其他的云服务商。我这里拿阿里云的进行演示，其他服务商基本也是类似的。
配置 OSS
首先你需要搜索“阿里云OSS”打开 OSS 控制台，如果你是第一次进入，你会没有任何的数据，这时候你需要创建一个 Bucket，你需要按照如下图的形式操作。
创建 Bucket 的时候，其余的信息如果你看不懂保存默认即可，这里需要重点关注的是这个信息：
名称就是 Bucket 你自己用来分辨的名称，按照你的喜好取名即可。地域是指这个 bucket 创建在哪里，严格来说其实是无所谓，只要区分国内外即可，如果你在这里选择了国外的，其实域名是不需要备案的，只需要购买即可直接用，但是这样国内就无法直接访问了。
一切准备完毕，点击创建后即可。Bucket 同样需要设置，这里要配置的内容有一些多，我们一个一个地说，顺序不分先后。
首先是你需要上传你需要部署的文件，上文有说过 dist 文件，里面包含一个 favicon，一个 index.html 以及一个 asset 文件夹，就像下图，你需要把它们上传上去，但请注意的是，index.html文件一定要位于根目录（即不能处于一个文件夹中）。
然后把读写权限调整为共公共读，否则其他人无法查看你的网站。
接着，你要在这里配置静态页面，如下图。请按照我这里的内容做配置，千万不要修改，否则会出现各种问题，例如打不开网站，网站二级页面丢失等等。
最后一步，就是需要绑定域名了。如下图，这一步的域名必须已经完成备案并且没有绑定其他 Bucket。这里我建议搭建绑定 2个，一个是自己购买的域名，一个是前面加上 www. 的。
SSL 证书
这里看似已经结束了，其实还没有，如果你打开你的网站，会发现网站提示不安全，Google 警告网站没有安全证书。这是因为你还没有给域名绑定 SSL 证书导致的。
如何绑定呢，我这里介绍两个方法。一个是直接在阿里云购买证书，还有一个是利用第三方来购买。
4.3.2.1 阿里云直接购买
如果是阿里云购买的话，只需要证书管理那里点击如下图所示的按钮，前往SSL 证书管理页面进行购买即可。
这里只需要购买测试版本证书即可，当然如果你是企业或是你有更高的要求，也可以购买专业证书，但是比较贵，最便宜的个人版本也需要几百元一年。
购买完即可部署，然后再回到 OSS 控制台，找到你要部署的 Bucket。如下图，你要选择你的证书，即可完成全部的内容。
这时候，再打开网站就不会再有不安全提示。
4.3.2.2 使用第三方方案
打开如下链接，这里可以直接购买证书，也是按照年来购买，一般来说只需要选择最便宜的即可。
https://trust.88sup.com/
网站配置了非常详细的教程，只需要按照教程操作即可，教程链接如下：
https://trust.88sup.com/article/detail?id=15
总结
如果你成功完成了上面的全部操作，那么你的网站就做好了！恭喜你！
其实说实话，整个过程并不复杂，但是需要你有耐心去研究、探索，找到如何解决一些我看不懂的提示和信息的解决方案。我这里找了不少 bilibili 的视频，最后成功地做到了，拥有了一个我梦寐以求的网站，也希望你也可以。
END
