NameThatUI
UI 视觉词典：用大白话描述想要的效果，得到准确术语 + 可直接粘贴给 AI 编程助手的 prompt。站内有 Bento Grid、轮播、骨架屏、Toast 等上百个模式，每个都带 prompt。
● 一、说清需求：UI 术语词典
vibe coding 做设计的核心瓶颈是“说不清想要什么”。把“那种图片参差不齐往下流的布局”说成“瀑布流 / Masonry”，AI 一次做对的概率大很多。这类网站就是帮你做“翻译”的，这一类最值得先看。
沉思波 Vibe Coding 学习中心 · 术语图鉴
中文 26 条术语，教你把“鼠标放上去有个小提示”说成“给按钮加 Tooltip”。另有需求四要素方法论，适合第一次用 AI 做东西的人。
● 二、系统学 Vibe Coding
从提示词、上下文管理到完整工程闭环，选一条路径走一遍。
vibe-coding-cn
中文从入门到精通教程：Prompt、Skill、上下文管理、Quality Gate、从想法到产品的完整工程闭环。
Where to Learn Vibe Coding for Free
免费学习路径指南：The Vibecoder's Handbook（免费章节）+ DeepLearning.AI 的 Vibe Coding 101 + Codecademy 入门课，组合成一套免费课程表。
7 Best Vibe Coding Courses
7 家课程横评：Coursera（最适合新手）、Udemy（自学做项目）、Codecademy（交互练习）、freeCodeCamp（免费）等。
Best Vibe Coding Courses for Non-Technical Founders
面向非技术背景的课程对比，DataCamp 的 Replit 实战课约 3 小时能做出可部署应用。
Stop Typing Vague Prompts
专治“提示词太模糊”：一次只改一件事、给窄范围修正指令，并附可直接套用的 prompt 模板（角色 / 目标 / 约束 / 不要做清单 / 验收标准）。
● 三、设计灵感库：找参照
先有参照再让 AI 写，返工少一半。按“真实产品截图”（学 UX 决策、抄布局逻辑）和“创意概念”（定视觉方向）两类分。
Mobbin
真实 App（Airbnb、Spotify、Duolingo 等）的截图与完整用户流程，按登录、结算、空状态等场景分类。免费版有限，Pro 约 $10/月。
Refero
网页版 Mobbin：11 万+ 真实 SaaS 网页按定价页、文档页、用户评价等组件分类，有免费档。
Collect UI
把 Dribbble 作品按登录表单、404 页、个人主页等组件分类聚合，免费、每日更新，找某个具体组件看 20 种做法最快。
Dribbble
设计师社区，看排版、配色、动效趋势。
Behance
完整项目案例，看设计师怎么做整套方案。
Awwwards
全球顶尖网页设计评选，找前沿交互灵感。
Lapa Ninja
落地页专项灵感库，收录大量真实落地页设计。
Land-book
落地页专项灵感库，按风格与行业筛选网站首页设计。
15 Best Web Design Inspiration Sites (2026)
上面这些站的横向对比表：按需求选站（要 App 模式看 Mobbin、要 SaaS 组件看 Refero、要落地页看 Lapa Ninja 等）。
● 四、AI 直接可用的组件与模板：抄作业
赶时间直接生成，白拿 prompt 和组件，解决“空白画布”问题。
v0.app
Vercel 出品：文字描述直接生成 React + Tailwind + shadcn/ui 的生产级组件。
21st.dev
开源 React 组件市场：每个组件都附“一键复制 prompt”，粘贴到 Cursor / v0 就能生成适配你项目的代码；还支持 MCP 接入。
shadcn/ui
复制粘贴式 React 组件库（v0 生成代码用的就是这套），代码拿来即归你，可随意改。
10 种 Vibe Coding 网站设计灵感
10 个完整网站创意（热成像风格首页、音频可视化等），每个都带可直接使用的 prompt 和实现小提醒（繁体中文）。
● 五、前端实现教程：想自己动手时看
AI 生成之后想微调样式时，这些教程帮你理解底层是怎么实现的。
CSS 三行代码实现瀑布流
讲 CSS 新特性 Grid Lanes：display: grid-lanes 三行搞定瀑布流，不用 JS 算位置，附报纸式复杂版式等进阶玩法。（注：Grid Lanes 目前仍是实验性 CSS 特性）
建议的学习顺序
- 先看 NameThatUI（术语词典），建立“效果→术语”的映射，这是 vibe coding 设计的最小可用技能；
- 挑一个系统教程走一遍完整流程；
- 做东西时去灵感库找 2–3 个参照，截图或描述丢给 AI；
- 赶时间直接用 v0 / 21st.dev 生成，白拿 prompt 和组件。