Drawably:让 UI 控件像手绘草图般生动

Drawably: Hand-Drawn UI Controls

Drawably 是一个轻量级库,能将按钮、输入框等 UI 控件转化为手绘风格的草图。每次挂载时,它都会基于随机种子生成全新的笔触,并让线条像涂鸦一样微微颤动,充满生命力。整个库零依赖,压缩后仅约 9 KB,却支持按钮、复选框、文本装饰等多种控件,且完全兼容键盘操作和屏幕阅读器。无论是原生 JavaScript 还是 React,开发者都能轻松集成,为界面增添独特的艺术感。

每次挂载都会基于随机种子生成全新的笔触草图,线条如同动画涂鸦般微微颤动。
  1. voidUpdate

    也许我有点老派,但通常当某样东西标榜“手绘”时,我期待它真的是手绘的,而不是机器画的。

  2. BariumBlue

    这些看起来墨迹斑斑——就像是一个连笔都拿不稳的人画的,每画一条线都在中间停顿,然后反复重描以修正错误。看起来像小学生的作品。

    我个人更喜欢 Excalidraw 的风格和感觉——每条线由几笔流畅且基本笔直的线条组成,看起来更像是用一种快速但不完美的工具所展现出的刻意为之的熟练感。

  3. RamblingCTO

    > 笔触微微颤动:同一草图的三帧画面,围绕共享基线进行微幅抖动,由纯 CSS 以 1200ms 的周期循环播放。

    哈哈。我本来还挺兴奋想用这个来做 AI 生成的线框图,但这简直让人倒胃口。

同日更多故事

2026-09-14