vibe coder必备25个氛围编程资源 中文整理下载使用教程

如果你最近在用 AI 写网页、做产品原型,那这份「25个氛围编程资源」值得看一眼。它不是什么新软件,而是一份由 X 用户整理的资源合集,把设计提示词库、UI 灵感站、组件库、动效库、插画和图标资源打包在一起。我的总体判断是:它更像一张「AI 建站素材地图」,能帮你少走弯路,但别指望它替你解决所有问题。

它到底解决了什么问题

用 AI 写前端,最卡人的往往不是代码,而是「不知道要什么样子」。这份清单里的资源,大多在补这个缺口。比如设计提示词库提供 1200 多条现成提示词,VibePrompt 直接给仪表盘和落地页的提示词,DESIGNmd 把设计系统写成 markdown 让智能体(能自己读文件、调工具干活的 AI 程序)读取。说白了,它把「审美」和「规范」变成了 AI 能消化的原料。

提示词库是核心

1200 多条设计提示词,直接告诉 AI 要什么风格,省去反复描述。

灵感站补审美

Minimal Gallery、Refero Styles 提供真实网站和产品风格,喂给 AI 当参考。

实际用起来怎么样

清单里既有老牌选手,也有新面孔。shadcn/ui 被作者称为简洁可复用 UI 的黄金标准,Aceternity UI、Magic UI、Motion Primitives 主打动画组件,Uiverse 是社区共建的 UI 元素。偏视觉的还有 Kitbitz 的 2000 多张手绘插画、3Dicons 的免费 3D 图标、Anime.js 这个轻量动画库。做移动端可以看 AppShot Gallery 的真实截图,做地图有 mapcn。整体覆盖面广,但深度参差。

组件库选择多

从按钮到地图都有现成组件,但风格不统一,混用容易显得杂。

动效资源丰富

Kinetics 有 150 多个动效带 React 代码,适合想让页面动起来的人。

值不值得现在上手

适合谁?用 AI 做网站、落地页、小工具的人,尤其是设计底子薄、想快速出效果的新手。不适合谁?追求统一设计规范、需要长期维护的团队,因为资源太散,风格容易打架。另外清单里部分链接是短链,实际可用性需要自己验证。把它当灵感起点,而不是标准答案,才是正确用法。

推荐信息
Tanzil Chowdhury
Tanzil Chowdhury @iamtanzil_ 2026年10月08日 21:32

每个认真的氛围编程者都应该把它加入书签。

25个氛围编程资源,让你保持领先于竞争对手。

1. https://jiro.build/ 设计提示词库,包含1200多个AI就绪的设计提示词,帮助你用AI快速设计出漂亮的网站。

2. Minimal Gallery https://minimal.gallery 精选高端网站,为你的智能体提供灵感

3. Kage https://kage.design 真实UI灵感直接映射为提示词

4. Refero Styles https://styles.refero.design 2000多个真实产品风格及排版

5. Component Gallery https://component.gallery 2600多个示例,展示顶级设计系统如何解决同一元素

6. AppShot Gallery https://www.appshot.gallery 移动端真实应用截图

7. DESIGNmd https://designmd.ai 以markdown形式呈现设计系统,你的智能体可以读取

8. VibePrompt https://vibeprompts.dev 现成的仪表盘和落地页提示词

9. https://21st.dev 可通过MCP接入智能体的组件注册表

10. Kinetics https://kinetics.colorion.co 150多个动效,附带React代码和提示词

11. shadcn/ui https://ui.shadcn.com 依然是简洁、可复用UI的黄金标准

12. Aceternity UI https://ui.aceternity.com 200多个动画React/Tailwind组件

13. Magic UI https://magicui.design 为现代Web应用精心设计的组件

14. Motion Primitives https://motion-primitives.com 开箱即用的动画和交互组件

15. Uiverse https://uiverse.io 社区构建的UI元素和交互组件

16. UIAble https://uiable.com 开箱即用UI组件合集

17. mapcn https://www.mapcn.dev 地图组件、标记、路线、弹窗

18. MicroKit UI https://microkit.co 让界面显得精致的小型微交互

19. Liquid Glass https://glass.samasante.com 玻璃折射组件和效果

20. CSS Text Effects https://text-effects.colorion.co 创意CSS文字动画和效果

21. Circle Loaders https://circleloaders.dominikakissi.com 创意加载动画和加载器

22. Gradient Buttons https://gradientbuttons.colorion.co 渐变按钮样式和效果

23. Kitbitz https://kitbitz.art 2000多个手绘插画

24. 3Dicons https://3dicons.co 面向现代界面的免费3D图标库

25. Anime.js https://animejs.com 轻量级Web JavaScript动画库

如果你在用AI构建项目,这份清单会为你节省大量时间。

收藏它。🔖

vibe coder必备25个氛围编程资源 中文整理下载使用教程 哔哩哔哩视频封面