X 收藏：40 个 Vibe Coding 设计资源清单

一、笔记原文#

收藏链接：x.com/himanshubuildss/status/2106411655055974640

笔记正文：仅链接收藏，无附加评论。

推文作者 Himanshu Hingorani（@himanshubuildss），2026-10-03 发布，10.5 万浏览、1374 收藏、3298 转发。

二、相关情报#

已抓取推文全文（存档于浏览器会话）。作者核心论点：「Your AI isn’t bad at design. It has just never seen good design.」（你的 AI 不是不会设计，只是它从没见过好设计。）作者今年测试了 100+ 个 vibe coding 资源，保留 40 个，按卡点分组。完整清单：

提示词/设计系统类

1. scrolltide.co 👑 — 600+ 获奖级网站提示词+完整源码，适配 Claude Code/Cursor/v0（作者强调只开一个链接就选它）
2. designmd.ai — 作为 Markdown 的设计系统，Agent 可直接读取
3. vibeprompts.dev — 现成仪表盘与落地页提示词

灵感画廊类 4. minimal.gallery — 高端网站精选 5. kage.design — 真实 UI 灵感映射到提示词 6. styles.refero.design — 2000+ 真实产品风格（含排版） 7. component.gallery — 2600+ 顶级设计系统对同一组件的不同解法 8. godly.website — 精美网站收藏 9. awwwards.com — 网页设计评奖权威 10. landing.love — 最佳动画网站 11. land-book.com — 落地页精选 12. mobbin.com — 移动设计模式库 13. hoverstat.es — 实验性网页设计 14. navbar.gallery — 导航模式 15. footer.design — 页脚布局 16. cta.gallery — 经转化测试的表单/弹窗/按钮 17. supahero.io — Hero 区精选 18. pricingpages.design — 定价页示例

组件库类 19. 21st.dev — 社区组件市场，可通过 MCP 插入 Agent 20. ui.shadcn.com — 仍是黄金标准 21. ui.aceternity.com — 200+ 动画 React/Tailwind 组件 22. magicui.design — 150+ 动画组件 23. motion-primitives.com — 高级交互 24. uiverse.io — 开源 UI 元素 25. smoothui.dev — Motion/GSAP 动画组件 26. shadcnblocks.com — 2000+ shadcn 预构建区块

动效/3D 类 27. kinetics.colorion.co — 150+ 运动效果（带 React 代码与提示词） 28. microkit.co — 微交互 29. glass.samasante.com — 玻璃折射组件 30. animejs.com — 轻量动画引擎 31. threejs.org — 最流行 Web 3D 库 32. shadertoy.com — 在线着色器社区 33. thebookofshaders.com — 免费交互式着色器入门 34. threejs-journey.com — Three.js 完整课程

素材类 35. kitbitz.art — 2000+ 手绘插图 36. 3dicons.co — 3D 图标

AI 编程工具类 37. claude.com/product/claude-code — 命令行 AI 编码代理 38. cursor.com — AI 优先代码编辑器 39. v0.dev — Vercel 提示词转组件 40. lovable.dev — 浏览器内 AI 应用构建器

三、深度解读#

1. 清单结构本身就是一张「AI 产出质量诊断图」。 四组资源对应 AI 编程产出不好的四种病因：没见过好设计（画廊）、没有好零件（组件库）、没有动效能力（动效库）、工具链不对（AI 工具）。排查顺序应该从诊断开始，而不是从换工具开始。

2. 首位推荐的 scrolltide 值得单独审视。 它的产品形态是「获奖级提示词 + 完整源码」的打包售卖——本质上卖的是「已被验证的设计上下文」。这印证了 2026 年的一个小型趋势：设计品味正在被资产化、商品化，成为独立开发者愿意付费的新品类（同类的还有 designmd.ai 的「设计系统即 Markdown」）。

3. 与本账号内容方向的关联。 用户在做 AI PM 垂直内容 + 接 vibe coding 相关的咨询陪跑。这份清单是现成的两个产出：① 一篇小红书科普帖（「AI 生成的界面丑，不是模型问题，是没喂好设计」——认知反差型选题）；② 陪跑学员的实操资源包（做 demo/作品集时按诊断图取用）。

4. 与自有项目的落地路径。 独立站（rechner.hunterfang.com）的迭代可按「诊断图」走：落地页转化问题 → cta.gallery/pricingpages.design；结果展示单调 → evilcharts 类图表（见 1142 笔记）；整体质感 → designmd.ai 思路把设计约束写成 AI 可读文档再生成。

四、标准化思路#

Vibe Coding 设计资源速查表（按问题分组）

你卡在哪	去哪找
AI 生成的页面没气质	minimal.gallery / godly.website / awwwards
组件丑且不一致	shadcn/ui（底座）+ 21st.dev / shadcnblocks（加速）
页面太静态、没生命感	kinetics / magicui / smoothui / anime.js
落地页不转化	cta.gallery / pricingpages.design / land-book
不会写设计提示词	scrolltide / designmd.ai / kage.design
需要 3D/着色器	threejs.org / shadertoy / thebookofshaders

动作项：① 本周内用「AI 生成界面丑」角度产出 1 篇科普帖；② 陪跑资源包加入速查表；③ 独立站下次迭代取 2 个资源实测。