本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
作者在推特上分享了一套多领国（Duolingo）风格的 shadcn 组件库，其特点是游戏卡通风格。作者推荐喜欢这种设计风格的开发者不要错过，并附上了组件库的链接和展示图片。这是一条简短的前端 UI 组件资源分享内容，适合正在寻找特色设计组件库的前端开发者参考使用。
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
作者作为探索 AI 与设计工程化的设计师，复盘了三次搭建自有设计组件库的尝试：第一次直接基于 shadcn/ui 纯 vibe 开发，因现成视觉规范黑盒与覆盖负担而放弃；第二次回到 Figma 定义颜色、变量与基础组件，通过 Figma MCP 交给 AI 批量转换代码，并按视觉骨架将组件分类，但自搭预览环境成为维护包袱；第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路，一天完成组件库开发。文章总结出关键经验：把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路，为后续 Design Harness 打下稳固基石。
作者以设计师视角分享独立开发者搞定 UI 设计的三个实用工具：找参考用 Mobbin，收录上千款优秀 iOS、Android 和 Web 产品的完整流程截图，可直接参考交互和排版；定框架用 shadcn/ui，开源组件库颜值高、代码可控，配合主题生成器可快速搭建高级感界面；抠细节用 Lucide Icons，极简统一的开源矢量图标集，避免图标风格不一致。作者还附上了自己整理的图标库网站，并与网友互动讨论独立项目中最难的设计环节。
文章指出程序员最缺的往往不是代码能力而是审美，提出将优秀 UI 组件当作乐高，直接交给 AI Agent 挑选并整合进项目的方法。作者推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，只需把链接发给 Claude Code、Codex 这类 Agent，让它们自动查找组件、获取代码、修改样式并整合进项目。核心观点是：你不需要成为设计师，只需要知道去哪里找好设计。
工程师 Matt Dailey 分享如何避免 AI 生成的设计沦为千篇一律的“slop”。他提出七个实践方法：1) 从整体约束出发进行设计，借鉴 Christopher Alexander 的《Notes on the Synthesis of Form》，避免打地鼠式修补；2) 主动删除 Agent 过度添加的冗余元素；3) 在 Figma 等专业设计工具中迭代，避免代码库中的原型引力；4) 使用组件库保持视觉一致性；5) 利用 preview deploy 用真实数据验证设计；6) 收集优秀产品截图作为参考与上下文；7) 通过反复实践和反思培养个人设计品味。文章强调用 AI 做设计需保持人的判断力与整体思维。
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
本文探讨了如何解决 AI 生成落地页缺乏设计感和转化率的问题。作者提出了三步走的策略：首先掌握高转化落地页的结构原则，利用 Pinterest 等网站提升审美；其次通过安装 taste-skill 和动效 Skill 提升 AI 的设计水平；最后利用模板和组件库，通过“喂”参考图或源码让 AI 高质量复刻。文章强调通过提供结构、设计规范和组件库，让 AI 从“能用”进阶到“能转化”。
文章推荐了多个优质网站，如Landing Love、Land-book、Awwwards等，帮助开发者提升网页审美和动效设计，解决界面丑陋问题，适合前端开发者和设计师参考。
