返回AI 入门教程
AI 入门教程
Vibe Coding 必备三个宝藏网站 + 18 个设计工具
阅读时间：10 分钟
🔥 抖音热门视频整理。Vibe Coding = 用 AI 写代码时，靠设计参考网站来提升审美。这三个工具 + 配套资源，让你的 AI 输出不再「一眼 AI」。
🎨 三大核心工具（视频重点）
🏆
Godly
godly.website
每日更新全球最顶级网站设计。风格前卫，适合刷审美。每天花10分钟浏览，建立审美库存。
打开网站 →📱Mobbin
mobbin.com
海量真实 App 截图库。按功能/行业筛选，看竞品怎么做的。Vibe Coding 设计师人手一个。
打开网站 →🧩Uiverse
uiverse.io
开源免费 UI 组件库。按钮/表单/卡片/导航，Tailwind+CSS+React 全支持。复制即用。
打开网站 →🎨 配色方案（5 个免费工具）
📐 UI 组件库（直接复制用）
Uiverse
开源组件，Tailwind/React
ReactBits
React动效组件+动画代码
21st.dev
模糊想法→精准UI提示词
Bento Grids
便当盒式网格布局灵感
GSAP
专业JS动画，100+Demo
Motion
React首选动画库
🖼️ 灵感来源
⚡ Vibe Coding 工作流
1
刷审美（10分钟）
打开 Godly + Mobbin，看10个顶级网站和App截图。建立今天的审美基准。
2
定配色（5分钟）
在 Coolors 或 ColorHunt 选一套配色方案。只选 3 个颜色：主色、强调色、背景色。
3
找组件（5分钟）
在 Uiverse 找 2-3 个需要的组件（按钮/卡片/导航），直接复制代码改颜色。
4
给 AI 截图
把喜欢的 UI 截图上传给 Claude/Cursor，说「参考这个风格，帮我做 XXX」。AI 看到图比看到 Prompt 理解得更准。