React Bits：适合作品集和视觉官网的动画组件库
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
相关文档
Remotion小白裁缝秘诀Ⅰ：组件和案例演示
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
如何 Vibe 一个自己的设计组件库，作为设计 Harness 的第一步
作者作为探索 AI 与设计工程化的设计师，复盘了三次搭建自有设计组件库的尝试：第一次直接基于 shadcn/ui 纯 vibe 开发，因现成视觉规范黑盒与覆盖负担而放弃；第二次回到 Figma 定义颜色、变量与基础组件，通过 Figma MCP 交给 AI 批量转换代码，并按视觉骨架将组件分类，但自搭预览环境成为维护包袱；第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路，一天完成组件库开发。文章总结出关键经验：把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路，为后续 Design Harness 打下稳固基石。
从0搭建个人网站：8大类60+UI设计必备清单
本文介绍用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，适合从零搭建或迭代优化个人网站时收藏使用。
写代码这关程序员大多都能趟过去，真正把人卡住的难道是审美
作者认为写代码对程序员来说不是难题，真正卡住人的是审美——界面丑到连自己都不想打开。他分享了偷懒招数：把顺眼的 UI 组件当积木，丢给 AI Agent 自己翻、挑并塞进项目。文章推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，链接可直接扔给 Claude Code、Codex 等编码 Agent，让它们自动扒组件、抠代码、调样式并集成到项目中。作者强调不需要懂设计，只要知道在哪里能淘到好看的组件就够了。
多领国风格 shadcn 组件库推荐
作者在推特上分享了一套多领国（Duolingo）风格的 shadcn 组件库，其特点是游戏卡通风格。作者推荐喜欢这种设计风格的开发者不要错过，并附上了组件库的链接和展示图片。这是一条简短的前端 UI 组件资源分享内容，适合正在寻找特色设计组件库的前端开发者参考使用。
不会前端设计没关系会抄作业就行
文章指出程序员最缺的往往不是代码能力而是审美，提出将优秀 UI 组件当作乐高，直接交给 AI Agent 挑选并整合进项目的方法。作者推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，只需把链接发给 Claude Code、Codex 这类 Agent，让它们自动查找组件、获取代码、修改样式并整合进项目。核心观点是：你不需要成为设计师，只需要知道去哪里找好设计。
How I Design with AI
工程师 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 设计：一套从灵感到落地的资源地图
作者整理了自己收藏的大量前端 UI/UX 设计资源，并借助 Codex 分类归纳，形成一张面向实际工作的资源地图。文章将设计资源分为五类：真实产品案例（UXSnaps、Mobbin、SaaSFrame）、设计模式与拆解（Design Spells、Component Gallery）、设计系统与 Design Token、组件实现（Base UI、React Aria、shadcn/ui 等）以及质量验收（WCAG 无障碍、性能测试）。作者强调有效的使用顺序是：真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收，帮助读者从'抄视觉'升级为'有理由的设计'。
The First 10 Rules I Give To Every AI Agent: How I Stopped AI Agents From Breaking My Codebase
AI coding agents can introduce bugs and break codebases without clear constraints. This article presents ten practical rules to guide AI agents, such as reading before writing, avoiding unnecessary dependencies, matching existing style, handling loading/error/empty states, and requiring explanations for changes. These rules help channel agent capabilities safely, reducing breakage and improving reliability.
1分钟认识13类常见Motion动效名称
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
在 Luffa SuperBox 上做一本「互动书」保姆级操作指南
这是一份关于如何将书籍转化为小程序互动书的实战指南。文章以《金融周期》为例，详细拆解了从内容设计（核心数学框架、反预期事件）到技术实现（Luffa 注册、数学验证、页面开发、数据代理）的全流程。作者强调AI负责代码实现，人类负责内容把关，并特别指出API密钥安全、数学公式验证及模拟器设计的关键点，旨在帮助非技术人员或AI Coder用户快速上线高质量的互动学习产品。
HyperFrames vs Remotion - a detailed rundown
文章详细对比了 HyperFrames 和 Remotion 两个代码驱动视频渲染工具的差异。作者指出，尽管 Remotion 是成熟的 React 方案，但 HyperFrames 从零构建，选择了 HTML 路线。这主要出于两个考量：一是 Agent 原生工作流，HTML 更符合 LLM 的训练数据，能激发更佳的创意输出；二是人类编辑工作流，HTML 作为渲染层和数据源，使得构建可视化编辑器更加健壮。文章还分析了两者在动画库兼容性（如 GSAP）、原生 HTML 支持以及渲染模式上的技术区别。
