Vibe Design Tips

《999 个小技巧，让你 Vibe 的产品更有质感》

每期一个界面效果或交互细节，附带可交互的演示，以及可以直接复制给 AI 的 Prompt。

Small design details for products built with AI. Each tip comes with a live demo and a prompt you can paste into your coding agent.

  1. 014 Card Delete 卡片删除的四种消失效果
  2. 013 Prompt Halo 冲击波光环效果
  3. 012 Message Bubbles 消息气泡的材质与动效
  4. 011 Easing Curves 按场景选择缓动曲线
  5. 009 Overlays 浮层组件的选择规则
  6. 008 Wiki Layout 兼顾PC和移动端的Wiki布局
  7. 007 Type Switches 中英文排版的CSS设置
  8. 006 Book Cards 悬停时像书一样翻开的卡片
  9. 005 Drag Ripple 带避让动效的拖拽排序
  10. 004 Continuous Corners 递进式圆角与连续曲率圆角
  11. 003 ASCII and Dither ASCII与像素抖色效果
  12. 002 Cascade Menu 级联菜单的安全区域与延时
  13. 001 Skeuomorphic Buttons 有按压反馈的拟物按钮