AI Personal Website Tutorial: Feishu Doc Draft Plus a List of Nearly 70 UI Design Sites
English text is being prepared.
A hands-on tutorial on building a personal website with AI presents a two-step workflow: first create a Feishu document as the content draft and let AI read it through the Feishu command-line tool, so that editing the document syncs the page; then pull components, animations, and layouts from existing design sites and feed them to AI for assembly. The author organizes nearly 70 sites by 8 tasks, including component libraries such as shadcn/ui, Aceternity UI, and Magic UI; animation tools such as Motion, GSAP, Three.js, and Spline; whole-site inspiration sites such as Godly, Land-book, and Awwwards; AI website-building tools such as v0, Lovable, and Google Stitch; and 4 design Skills including Anthropic's frontend-design. The article notes that referencing interaction styles and using open-source components is fine, but do not copy entire sites' visual assets and copy; check the license agreements before commercial use, and Tailwind Plus and the full version of Mobbin are paid subscriptions.
Why read this
AI score 53
The original breaks website building into two steps: first prepare a content draft, then find design references according to each task, and provides a categorized list of nearly 70 sites that can serve as a reusable AI website-building workflow.
Topics
View original postWhen building a personal website from scratch, the most common stumbling block is: not knowing where to start. My own approach is two steps— First prepare a Feishu document as the content draft (edit the document, hand it to AI, and the page syncs easily); Then copy UI design from good-looking webpages: components, animations, Landing, mobile, color schemes, AI website building, 60+ sites sorted by category. Take what you need directly ↓ https://t.co/XzTz07Uc2c
View original
从0开始搭个人网站，最容易卡在：不知道从哪开始。 我自己的做法是两步—— 先备一份飞书文档当内容底稿（改文档、丢给AI，页面也好同步）； 再对着好看的网页抄UI设计：组件、动效、Landing、移动端、配色、AI建站，60+个站按类放好了。 需要的直接拿走 ↓ https://t.co/XzTz07Uc2c
Body
这篇优质的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 个网站的完整分类用法和改名避坑说明都在引用的原帖长文里，一楼我也整理了速查索引。