AI 建个人网站实战教程：飞书底稿加 8 类近 70 个设计参照清单

这篇优质的AI 建个人网站的实战教程分享给大家，想从0-1搭一个拿得出手的个人网站或产品落地页的铁汁，把这份刚出炉的 8 大类近 70 个 UI 设计与 AI 建站清单存好就够了， 核心是两步建站的工作流，作者不仅把组件库、3D 动效、整站灵感和设计 Skill 按工序排得明明白白，还给了一套极聪明的飞书文档同步打法。 而且她点破了一个特别实在的盲区，直接让 AI 凭空做设计，效果往往最差，真正好用的野路子是先喂底稿、再抄局部。 第一步根本不是打开编程工具写提示词，而是先建一份飞书文档当单一事实源，把你的个人介绍、项目案例和服务清单全装进去，让 AI 通过飞书命令行工具直接去读这份底稿，以后改文字只改文档，网页就能跟着自动同步。 第二步是拆零件式给参照，别让 AI…

展开完整原文

这篇优质的AI 建个人网站的实战教程分享给大家，想从0-1搭一个拿得出手的个人网站或产品落地页的铁汁，把这份刚出炉的 8 大类近 70 个 UI 设计与 AI 建站清单存好就够了， 核心是两步建站的工作流，作者不仅把组件库、3D 动效、整站灵感和设计 Skill 按工序排得明明白白，还给了一套极聪明的飞书文档同步打法。 而且她点破了一个特别实在的盲区，直接让 AI 凭空做设计，效果往往最差，真正好用的野路子是先喂底稿、再抄局部。 第一步根本不是打开编程工具写提示词，而是先建一份飞书文档当单一事实源，把你的个人介绍、项目案例和服务清单全装进去，让 AI 通过飞书命令行工具直接去读这份底稿，以后改文字只改文档，网页就能跟着自动同步。 第二步是拆零件式给参照，别让 AI 自己猜什么叫好看，去现成的顶级设计站里扒代码、截图或者提炼风格关键词，再喂给 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 是手脚极快的施工队，但你不能让包工头替你决定家里摆什么家具、刷什么墙漆，内容底稿和审美参照得由你这个业主亲自定。 说白了，这不只是搭个人网站的抄作业清单，更是所有普通人拿 AI 做项目的通用起手式，别把精力花在和对话框赌运气上，先维护好一份干净的业务底稿，再建一个自己的高审美参照库。 不过照着这份清单扒设计时也得留个清醒，参考交互风格和调用开源组件完全没问题，但千万别把别人整站的视觉原图、品牌配图和文案原封不动搬过来，商用前一定看清各个库的授权协议； 而且清单里的 Tailwind Plus（原 Tailwind UI）和 Mobbin 完整版都是付费订阅的，按需取用就行。 AI 从来不缺写代码的手艺，缺的是你喂给它的那份干净底稿和审美标尺。 8 大类近 70 个网站的完整分类用法和改名避坑说明都在引用的原帖长文里，一楼我也整理了速查索引。