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

> 来源：flomo 笔记 | memo_id: `MjU5Mzk1MzU1` | 创建时间：2026-10-04 11:38
> 迁移处理：2026-10-05 | 原始链接已存档

## 一、笔记原文

收藏链接：[x.com/himanshubuildss/status/2106411655055974640](https://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 个资源实测。