从 0 搭建个人网站：8 大类 60+ UI 设计必备清单

让 AI 从零「给我做个个人网站」，产出大概率平庸：模型没有你的审美，只能交出它的默认样式。Pamela 在 X 上给出的工作流是把「生成」换成「整合」——先找到好看的网站，让 AI 抓取代码、截图与风格关键词，再拼装成自己的站。为了让「找好看的网站」这一步有的放矢，她整理了 8 大类资源：组件、动效与 3D、整站灵感、产品界面、局部微交互、配色与素材、AI 建站、设计 Skill。原文口径 60 多个，逐项清点是 70 个入口，其中 8 个带改名或迁移线索（Godly 转 Recent、Galileo AI 并入 Google Stitch、screenlane 并入 Page Flows 等）。本文按类重排这份清单，每个工具一行：定位是什么，怎么上手。

先把内容理清楚，再让 AI 动手

原文的第一步不打开任何设计工具，而是把内容写清楚：个人介绍、项目案例、作品素材、服务内容，全部整理进一份飞书文档，再让 AI 通过飞书 CLI 读取。这个方法她学自「飞书绝活大会」上王大仙的分享。好处有两个：内容集中在一处，不必在多个页面间反复同步；文档同时充当资源库与链接源，后续改动直接改文档，把链接发给 AI 就能近乎实时地反映到网站上。

组件：选好部件再拼成网页

按钮、表单、导航、卡片这类小部件不必手写，先找现成的，再交给 AI 拼接成适配自己网站的样子。这一类里 shadcn 生态占了近三分之一，从单组件到整段区块都有。

接入前把安装说明交给 AI，检查与现有项目的兼容性——这类组件各自支持的开发环境并不一致。

动效与 3D：让页面里的元素动起来

想自己控制动画的节奏与顺序，或者加入可互动的 3D 内容，看这一类。

整站灵感：先看网站可以长什么样

找整体风格、内容结构与排版参考。选中案例后，最好点进实际网站完整看一遍。

产品界面与流程：参考真实产品怎么用

网站里如果有注册、登录、搜索、订阅、付款，借鉴真实产品的处理方式。

局部灵感与微交互：把小细节做好

一个按钮、一个菜单、一段加载动画，也可以单独找参考。

配色、图标与素材：把整站风格统一起来

主色、字体、图标、插画和照片放在一起考虑，做出来的网站更容易保持一致。

AI 生成界面与建站：先把第一版做出来

准备好用途、内容和参考材料后，用这些工具起步，再一轮轮修改。

设计 Skill 与提示词：让 AI 按一套要求做事

Skill 是给 AI 编程助手的工作说明，写着设计原则、检查项与操作方法。这一类也收了查找 Skill 的目录和帮助表达需求的提示词资料。

不必一次用完

清单越长，越容易收藏了事。原文的收尾建议是把范围收窄到三样：一个建站工具、一个参考站、一套配色，先把第一页做出来，剩下的交给迭代。工具决定的是起步速度，参考决定下限，迭代决定上限。