AI 建个人网站教程：飞书文档底稿加近 70 个 UI 设计站点清单
这篇优质的AI 建个人网站的实战教程分享给大家，想从0-1搭一个拿得出手的个人网站或产品落地页的铁汁，把这份刚出炉的 8 大类近 70 个 UI 设计与 AI 建站清单存好就够了，
一份 AI 建个人网站的实战教程给出两步工作流：先建飞书文档作为内容底稿，让 AI 通过飞书命令行工具读取，改文档即可同步页面；再从现成设计站扒组件、动效和排版喂给 AI 组装。作者按 8 个工序整理了近 70 个站点，包括 shadcn/ui、Aceternity UI、Magic UI 等组件库，Motion、GSAP、Three.js、Spline 等动效工具，Godly、Land-book、Awwwards 等整站灵感站，以及 v0、Lovable、Google Stitch 等 AI 建站工具和 Anthropic 的 frontend-design 等 4 个设计 Skill。文中提醒参考交互风格和调用开源组件可以，但不要整站搬运视觉原图和文案，商用前需看清授权协议，Tailwind Plus 和 Mobbin 完整版为付费订阅。
查看原帖从0开始搭个人网站，最容易卡在：不知道从哪开始。 我自己的做法是两步—— 先备一份飞书文档当内容底稿（改文档、丢给AI，页面也好同步）； 再对着好看的网页抄UI设计：组件、动效、Landing、移动端、配色、AI建站，60+个站按类放好了。 需要的直接拿走 ↓ https://t.co/XzTz07Uc2c
查看原文
从0开始搭个人网站，最容易卡在：不知道从哪开始。 我自己的做法是两步—— 先备一份飞书文档当内容底稿（改文档、丢给AI，页面也好同步）； 再对着好看的网页抄UI设计：组件、动效、Landing、移动端、配色、AI建站，60+个站按类放好了。 需要的直接拿走 ↓ https://t.co/XzTz07Uc2c
正文
这篇优质的AI 建个人网站的实战教程分享给大家，想从0-1搭一个拿得出手的个人网站或产品落地页的铁汁，把这份刚出炉的 8 大类近 70 个 UI 设计与 AI 建站清单存好就够了，
核心是两步建站的工作流，作者不仅把组件库、3D 动效、整站灵感和设计 Skill 按工序排得明明白白，还给了一套极聪明的飞书文档同步打法。
第一步根本不是打开编程工具写提示词，而是先建一份飞书文档当单一事实源，把你的个人介绍、项目案例和服务清单全装进去，让 AI 通过飞书命令行工具直接去读这份底稿，以后改文字只改文档，网页就能跟着自动同步。
她把平时压箱底的近 70 个找参照网站按 8 个工序全列齐了，今天就能直接照着抓： → 找现成骨架与组件库（15 个）：shadcn/ui、Aceternity UI、Magic UI、React Bits、https://t.co/j0NLCpfGvS，直接扒组件代码 → 抄丝滑动效与 3D（9 个）：Motion、GSAP、Three.js 示例、Spline、Rive，专治页面死板 → 看整站审美与排版（12 个）：Godly、Land-book、Awwwards、One Page Love，找顶级的 Landing Page 构图 → 抄成熟产品流程（5 个）：Mobbin、Page Flows、Refero，看真实商业产品的界面流转 → 抠局部微交互与配色素材（18 个）：CodePen、Codrops 看微交互，Coolors、Realtime Colors、Lucide 搞定配色与图标 → 选 AI 建站与设计 Skill（11 个）：v0、Lovable、https://t.co/UR6Fty0P8s、由 Galileo AI 迁入的 Google Stitch，配上 Anthropic 的 frontend-design 等 4 个设计 Skill，
说白了，这不只是搭个人网站的抄作业清单，更是所有普通人拿 AI 做项目的通用起手式，别把精力花在和对话框赌运气上，先维护好一份干净的业务底稿，再建一个自己的高审美参照库。 不过照着这份清单扒设计时也得留个清醒，参考交互风格和调用开源组件完全没问题，但千万别把别人整站的视觉原图、品牌配图和文案原封不动搬过来，商用前一定看清各个库的授权协议；
而且清单里的 Tailwind Plus（原 Tailwind UI）和 Mobbin 完整版都是付费订阅的，按需取用就行。
8 大类近 70 个网站的完整分类用法和改名避坑说明都在引用的原帖长文里，一楼我也整理了速查索引。