AI Personal Website Tutorial: Feishu Doc Draft Plus a List of Nearly 70 UI Design Sites
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 translation
I'm sharing this excellent hands-on tutorial on building a personal website with AI. If you're someone who wants to build an impressive personal website or product landing page from 0 to 1, just save this freshly made list of 8 major categories and nearly 70 UI design and AI website-building resources, and you're all set.
The core is a two-step website-building workflow. The author not only lays out component libraries, 3D motion effects, whole-site inspiration, and design Skills clearly by stage, but also shares a very clever Feishu document syncing approach.
The first step is not opening a coding tool and writing prompts at all—it's first creating a Feishu document as a single source of truth, putting your personal introduction, project case studies, and service list all into it, and letting AI read this draft directly through the Feishu command-line tool. From then on, when you change the text, you only change the document, and the webpage will automatically sync along with it.
She has listed all nearly 70 reference-finding websites she usually keeps in reserve, organized by 8 stages, so you can start using them today: → Find ready-made skeletons and component libraries (15): shadcn/ui, Aceternity UI, Magic UI, React Bits, https://t.co/j0NLCpfGvS, and directly pull component code → Copy silky-smooth motion effects and 3D (9): Motion, GSAP, Three.js examples, Spline, Rive, specifically to cure stiff pages → Look at whole-site aesthetics and typography (12): Godly, Land-book, Awwwards, One Page Love, to find top-tier landing page compositions → Copy mature product flows (5): Mobbin, Page Flows, Refero, to see interface flows in real commercial products → Extract local micro-interactions and color assets (18): CodePen and Codrops for micro-interactions, Coolors, Realtime Colors, and Lucide for colors and icons → Choose AI website-building and design Skills (11): v0, Lovable, https://t.co/UR6Fty0P8s, Google Stitch (migrated from Galileo AI), paired with 4 design Skills including Anthropic's frontend-design.
Put plainly, this is not just a copy-the-homework list for building a personal website; it's also a universal starting move for all ordinary people doing projects with AI. Don't spend your energy gambling on luck with a chat box—first maintain a clean business draft, then build your own high-aesthetic reference library. However, when copying designs according to this list, you also need to stay clear-headed: referencing interaction styles and calling open-source components is completely fine, but never copy someone else's whole-site visual originals, brand images, and copy verbatim. Before commercial use, be sure to check the license terms of each library.
Also, Tailwind Plus (formerly Tailwind UI) and the full version of Mobbin in the list are paid subscriptions, so just use them as needed.
The complete categorized usage of the 8 major categories and nearly 70 websites, along with naming and pitfall-avoidance notes, are all in the quoted original long post, and I've also organized a quick-reference index in the first floor.