Vibe Skills Hub · 2026-11-10
B · 纯 UI 设计
B 块：纯 UI——布局、信息层级、组件态。现代 SaaS / 消费级；禁工业 neon。
灵感站（优先真产品截图）
| 站 | 擅长 | 备注 | URL |
|---|---|---|---|
| Mobbin | 真 App/Web 屏与流程 | 已核 200；付费档更全 | mobbin.com |
| Refero | SaaS/Web 组件与屏 | 已核 200 | refero.design |
| Refero Styles | DESIGN.md / token | 已核 200 | styles.refero.design |
| Dribbble | 趋势与概念 | 202；当 mood，别当规范 | dribbble.com |
| Behance | 完整案例 | 爬虫常 403，站仍在 | behance.net |
| Land-book | 落地页结构 | 200 | land-book.com |
| Collect UI | 按任务扫组件 | 200；偏概念 | collectui.com |
| UI Sources | 注释流 | 200 | uisources.com |
| Pttrns | 移动模式 | 200 | pttrns.com |
| Nicely Done | SaaS 设置/用量等难页 | 200 | nicelydone.club |
| UI Design Daily | 日更组件 | 200 | uidesigndaily.com |
| Screenlane → Page Flows | 录制流程 | 爬虫可能拦；产品仍在 | pageflows.com |
| SaaSFrame / SaaSpo / Godly | SaaS 页 / 高工艺站 | 部分爬虫 403 | 保留书签，浏览器开 |
组件 / 设计系统（标清免费/付费）
| 系统 | 费用 | 用途 | URL |
|---|---|---|---|
| shadcn/ui | 免费（拷代码） | 产品壳默认首选 | ui.shadcn.com |
| Radix Themes | 免费 | 无障碍原语 + 主题 | radix-ui.com/themes |
| Untitled UI | Freemium / 付费包 | 高完成度 SaaS 组件与页面 | untitledui.com |
| Tailwind UI | 付费 | 官方示例页与营销块 | tailwindui.com |
| DESIGN.md / getdesign.md | 免费 spec | 给 agent 读的视觉文档 | getdesign.md |
落地建议（侧重 B，不写工业配色）
- 先 IA 后皮肤：Mobbin/Refero 找「列表 / 筛选 / 空态 / 详情」结构，再套风格热榜里的主风格。
- 字阶 > 装饰：标题 / 正文 / 辅助 / 数字 四级固定；精致感多半来自字距与留白。
- 状态完整：loading / empty / error / success / 权限不足五态都要有；比多一个渐变更有用。
- 浅色默认 + 精致深色可选：深色用深灰与低饱和强调色，避免纯黑+霓虹。
- 组件有来源：shadcn/Radix 打底；动效只在反馈点用 React Bits/Micro，不整页粒子。
短视频站上的 UI / 开站安利：质量优先；低粉「inspiration dump」若制作精良可入，标小作坊大制作；纯 meme 刷屏仍不收。完整四端见 platforms/。网站类条目需配截图或演示短视频。
小作坊大制作 独立开站样本（配图）
| 预览 | 站 | 为何收 | URL |
|---|---|---|---|
 | Mike Fernandez Portfolio | Three.js/R3F/GLSL 独立作品集 · GSAP SOTW | mike-fernandez.dev |
 | Rainform 数据成雨 | 中文独立 Three.js 粒子雨数据站 | rainform.pages.dev |
 | CK Studio | 3万粒子变形个人站 | chuankangkk.top |
| Lusion | 创意站标杆 | lusion.co |
知识库沉淀 · 参考≠照搬 · Prompt 只是起点 · 禁工业 neon/SCADA 色风 · Asia/Shanghai