Looseleaf:把 shadcn 整套重画成手绘风,一周 544 颗 star,一大半是中文 X 搬来的
它是什么 把 shadcn/ui 整套组件重画成「笔记本纸上的钢笔手绘」风的 React 组件库,123 个组件加 61 个页面区块和一整套贴纸、图标、手写字体,参数和 shadcn 一致,一行命令装进项目。
为什么火了 作者 2.4 万粉的 AI 创意编程 X 号首发,引用当天 157 万浏览的 Stageshow 帖借势;真正的 star 峰值来自 RicoUI、泊舟、GitHubDaily 等中文 X 资源号接力搬运,而「整套能直接替换」让浏览能转成 star。
B你可以怎么跟 别再做手绘;挑一种还没人做成整套的强风格(水彩、黏土、蜡笔、报纸、中式线条等),用 AI 把 shadcn 全套组件、区块和美术一次做齐,配一段光标点过真实页面的演示视频首发,再主动递给中文前端和 AI 资源号。
- 数据(每天更新) · 建库 2026-11-01 · 538 星
GitHub · 星数 数据 2026-11-03 → 2026-11-08(6 天,6 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有
2026 年 11 月 1 日中午(北京时间),Kevin Ngo 在 X 上发了一段视频:一个光标在一整页「画在笔记本纸上」的按钮、表格、日历之间点来点去。配文就两句:「我做了一个看起来像手绘的 UI 库。Benji 的 Stageshow skill 帮我做了这段演示。」一小时后他在楼下补了一句「Open source.」和仓库链接。一周后,这个仓库 544 颗 star。手绘风组件库今年冒出来十来个,早它 11 天、定位几乎一模一样的那家只有 29 颗。这篇讲它多的那 500 颗是从哪来的,以及你要不要换一种风格再做一遍。
它是什么
一句话:shadcn/ui 的手绘皮。shadcn/ui 是现在 React 圈最常用的组件方案,它的特点是组件不装成依赖,而是用一行命令把源码拷进你的项目。Looseleaf 把这一整套重画了一遍:
- 123 个组件,shadcn 有的全有(按钮、侧边栏、图表……),另加纸片、贴纸、画板、聊天套件这类自己的东西;
- 61 个现成页面区块:登录、注册、仪表盘、定价、聊天、落地页;
- 160 个图标、48 个涂鸦、88 个贴纸和印章、一个叫 Stubby 的吉祥物(15 个姿势)、一套作者自己做的手写字体 Kevin Sans,全部用代码画;
- 组件名、参数、
data-slot和 shadcn 一致,README 第一段就写「换进来不用改你的 JSX」; - 键盘操作、焦点、AA 对比度、减弱动画、强制色、从右往左排版都做了。
装法是 shadcn 官方的「registry」机制:在配置里加一行地址,然后 npx shadcn add @looseleaf/button。MIT 协议,代码、美术、字体都免费。
做法上不神秘:每条手绘线是藏在真实元素后面的一张 SVG,由一个带随机种子的函数生成,所以服务器和浏览器画出来的是同一条线;悬停、按下的效果是提前画好、用 CSS 切换的。仓库 2,894 个文件、263 个测试文件,9 次提交全在 11 月 1 日一天里,之后再没更新过。作者的 X 简介写「Creative coding with AI」,别的作品都标「Made with Claude Opus 5.5」——这一整套基本可以认定是 AI 一天铺出来的(推断)。
先看曲线
| 日期 | star | 当天涨 |
|---|---|---|
| 11-03 | 93 | — |
| 11-04 | 282 | +189 |
| 11-05 | 377 | +95 |
| 11-06 | 481 | +104 |
| 11-07 | 518 | +37 |
| 11-08 | 538 | +20 |
(GitHub,每天记录;11-08 现查是 544 颗、31 个 fork。)
奇怪的地方在前两天:作者的发布帖 11-01 就有 5.5 万浏览,可到 11-03 仓库还不到 100 颗。真正的峰值在 11-04 到 11-06,那几天发生的事都在中文 X 上。
用户从哪来
第一步:作者自己的号。 @kevin_t_ngo 是今年 1 月才注册的 X 号,现在约 2.4 万粉。粉丝是这几个月一条条攒的:他几乎每天发「让 Claude 用代码画出来」的东西——讲解动画、贝利的数据图、一张奶茶店的状态图(24.8 万浏览)、他的个人网站(13 万浏览),好几条破千赞。所以发 Looseleaf 时,底下已经站着一批做设计和前端的人。发布帖 1,451 赞、5.5 万浏览;第二天的介绍帖 1.3 万浏览。
借了一股势。 发布帖引用的是设计师 Benji Taylor 当天凌晨发的 Stageshow——一个让 Agent 自动给产品录演示视频的 skill,那条帖子当天 157 万浏览、1.4 万赞。Looseleaf 的演示视频正是用它录的:脚本驱动 macOS 光标逐个点过真实组件,逐帧录下来。楼下有人专门说「脚本化的光标才是卖点」。之后好几条中文帖都把 Stageshow 和 Looseleaf 放在一起推。
真正带来 star 的:中文 X 资源号接力。
- 11-02 下午,前端号 RicoUI:「太新了,昨天才开源的手绘风格的 UI 库……123 个组件,质量非常高,构建任何你想要的项目绰绰有余了」,1.4 万浏览;
- 11-03 上午,AI 号泊舟:「这是我见过最好看的一个手绘风格UI,无论是用于做视频还是做网页,都可以让颜值大幅提升」,2.9 万浏览;
- 11-04,龙海把它和 Stageshow 打包成「3 个能让 Agent 做出好 UI 的产品」,7,400 浏览;
- 11-05,GitHubDaily:「组件名和参数跟 shadcn/ui 保持一致,换过来不用改页面代码……这种不太正经的风格放在个人项目里,很有记忆点」,1.1 万浏览。
时间和曲线对得上:RicoUI、泊舟发帖后第二天单日 +189,GitHubDaily 之后又续了两天各 +100。31 个 fork 里大约一半是拼音名或纯数字名的账号。GitHub 不让外人看每颗 star 是什么时候点的,所以这层对应是按时间推的(推断,把握大)。
没找到的:Hacker News、Reddit、Product Hunt、媒体报道、广告都没有;shadcn 本人没转。英文这边只有 Shadcn Weekly 收录和几个小资源号搬运。建库不满一周,也没上 GitHub Trending。
手绘这个点子早就有人做了
| 项目 | 上线 | star | 和 Looseleaf 比 |
|---|---|---|---|
| wired-elements | 2017 | 10,851 | Web Components 线框风,不是 React,多年不更新 |
| PaperCSS | 2017 | 4,196 | 纯 CSS,没有组件逻辑 |
| drawably | 2026-08 | 825 | 4KB 零依赖抖动笔画,控件少,不在 shadcn 生态 |
| sketchbook-ui | 2026-03 | 301 | 20 个组件,不对齐 shadcn |
| Inkra | 2026-10-21 | 53 | 铅笔加淡彩,同期 |
| PlopUI | 2026-10-21 | 29 | 手绘、贴纸、胶带、种子化笔画、AA 对比度,几乎一模一样,早 11 天,还进了 shadcn 官方目录 |
| sketchcn | 2026-08 | 18 | 也叫「手绘 shadcn」,没推广 |
| Scribble UI | 2026-01 | 2 | 12 个组件 |
(GitHub,11-08。)
PlopUI 是最好的对照:同样的点子、同样的技术路线、更早上线,29 颗。差别是两样——量(Looseleaf 是整套 shadcn 加 61 个区块加全套美术,别家是 12 到 20 个组件)和有人帮它说话(作者的号、Stageshow 的热度、中文资源号)。只有「手绘」这个点子,拿不到 star。
同一个作者也给了一个对照:那张奶茶店状态图浏览量是 Looseleaf 发布帖的 4 倍多,仓库只有 239 颗。浏览量高不等于 star 多;能直接装进项目、值得收藏的工具,star 转化率高得多。
「给 shadcn 换皮」这条路有多挤
给 shadcn 换一种强烈风格、用 registry 分发,不是 Looseleaf 发明的:像素风的 8bitcn 有 2,065 颗,新粗野主义风的 neobrutalism-components 有 5,643 颗。这说明需求是真的——大家用 AI 做出来的页面都长一个样,中文转发里反复出现的就是「AI 做的 UI 千篇一律」「vibe coding 想做出特色就用这些」。
但供给也在变多。GitHub 上搜 10 月下旬以后新建的 shadcn registry 仓库,一周就有十几个:抖动像素加 ASCII 风的 dotgrain、为中文界面打磨的 Yi UI(44 颗)、仪表盘风、玻璃风……大多数是 0 到 1 颗。11 月 1 日以后没看到有人直接仿 Looseleaf 做手绘。
如果是你
B。 模板清楚,而且换一种风格就能再跑一遍:挑一种还没人做成整套的强风格,用 AI 把 shadcn 全套组件、几十个区块、配套美术一次铺满,用 registry 一行装。但手绘这个格子已经被占了,每周都有新的换皮库冒出来,大多数停在个位数;决定成败的不是做出来,是演示好不好看、发出去有没有人接。
适合谁:做前端、对某种视觉风格有真感觉的开发者,能把一种风格画到 100 多个组件上不走样;最好自己在 X 上有一批做设计或前端的读者,或者认识中文 AI/前端资源号。
不适合谁:只做十几个组件、做个 demo 就发的(PlopUI、sketchcn、Scribble UI 都这么停在几十颗以下);想在手绘上再做一个的(Looseleaf 刚占住,没有理由让人换);图赚钱的——这一类基本不来钱,换来的是名气和关注者。
怎么做:先选风格。像素、新粗野主义、手绘已经有头部;还空着、又有辨识度的方向可以试:水彩、黏土、蜡笔、报纸排版、中式线条、老 Mac 系统界面。然后照它的清单做齐:shadcn 全套组件且参数一致、几十个现成页面区块、一套图标和装饰、一款配套字体、完整无障碍;README 第一屏写「换进来不用改代码」和一行安装命令;官网能直接点所有组件。
怎么获客:演示视频是第一位的——别放截图,录一段光标在真实页面里点过去的视频(Stageshow 这类工具就能做)。首发帖讲「我做了一个看起来像 X 的 UI 库」,最好引用当天正热的工具或作品借流量。然后别等,直接把仓库和视频递给中文 X 的前端和 AI 资源号(RicoUI、泊舟、GitHubDaily、龙海这一类),Looseleaf 一大半 star 是他们带来的;再投 Shadcn Weekly 和 shadcn 官方的 registry 目录。
死线:越早越好。这个月光是新建的 shadcn registry 仓库就以每周十几个的速度在冒,哪种风格先出一个像样的整套,那一格就被占了;最好在一个月内发出来。
算看错:① 你照这套做了、演示视频首发也有几万浏览、几个中文资源号也转了,30 天还不到 300 颗——说明 Looseleaf 吃的是作者的号加 Stageshow 那一天的运气,换皮这条路已经饱和;② shadcn 官方自己出多风格主题,或者 v0、Lovable 这类工具自带风格切换,第三方换皮的意义就小了;③ 反过来,如果一两个月里有别的风格(比如某个新换皮库)不靠大号也冲过 1,000 颗,说明这条路还很宽,要抓紧。
数据与出处
- GitHub:kevintngo/looseleaf 的 README、提交记录、fork 列表;star 和 fork 每天记录(11-03 起),11-08 现查 544 颗。
- X:@kevin_t_ngo 11-01 发布帖和 11-02 介绍帖;@benjitaylor 11-01 Stageshow 帖;@ricouii 11-02、@bozhou_ai 11-03、@longhaiqwe123 11-04、@GitHub_Daily 11-05 的原文与互动数;Shadcn Weekly #6。
- 竞品与同类 star 数:GitHub,11-08。
- 「这一套是 AI 一天写出来的」和「中文资源号带来了峰值」是推断,前者依据提交时间和作者自述,后者依据发帖时间、star 曲线和 fork 账号。
研究底稿:竞品表、获客证据、完整研究报告
- 竞品
名字 在哪 上线 规模 它和这家不同在哪 rough-stuff/wired-elements 开源 2017-08 10,851 star Web Components + rough.js 的线框图风控件,不是 React/shadcn,无整套区块,多年不活跃 papercss/papercss 开源 2017-08 4,196 star 纯 CSS 框架,无组件逻辑与无障碍体系 chr15m/DoodleCSS 开源 2021-12 1,211 star 单一 CSS 主题 danielwh2/drawably 开源 2026-08-15 825 star 零依赖 4KB 抖动笔画控件,数量少、不在 shadcn 生态 SarthakRawat-1/sketchbook-ui 开源 2026-03-04 301 star 20 个组件的 npm 包,不对齐 shadcn API PlopUI (Snorlark/plop-ui) 开源 2026-10-21 29 star;已进 shadcn registry 目录 定位与技术点几乎相同且早 11 天,但组件/资源量与演示弱,作者无 X 受众——最好的对照组 inkrajs/inkra 开源 2026-10-21 53 star 铅笔+淡彩风 React 库,同期并行 sketchcn (chuchuwiiii/sketchcn) 开源 2026-08-28 18 star 同叫「手绘 shadcn」,rough.js 实现,无推广 Scribble UI (MitchForest) 开源 2026-01-09 2 star rough.js + shadcn 式 registry,只有 12 个组件 8bitcn-ui / neobrutalism-components 等 shadcn 换皮库 开源 2023–2025 2,065 / 5,643 star 同一打法(给 shadcn 换强风格 + registry),风格不同 rough.js / Excalidraw / tldraw 开源 多年 21K / 135K / 51K star 手绘绘图库/白板,不是 UI 组件库 - 用户从哪来
- 查实 作者自有 X 号发布帖:@kevin_t_ngo 11-01 12:05(北京)发布帖 ❤1,451 🔁75 👁5.5 万;11-02 第二帖 ❤331 👁1.3 万;账号 2026-01 注册、23,919 粉,此前多条 AI 创意编程帖破千赞
- 查实 借势爆帖(引用 Benji Taylor 的 Stageshow 帖):发布帖引用 @benjitaylor 当天 02:08 的 Stageshow 帖(❤14,403 👁157 万),称演示视频用 Stageshow 做;龙海、溺心海中文帖把两者捆绑推荐
- 查实 中文 X 资源号搬运:RicoUI 11-02 ❤197 👁1.4 万;泊舟 11-03 ❤128 👁2.9 万;龙海 11-04 👁7.4K;GitHubDaily 11-05 ❤236 👁1.1 万;时间与 11-04~06 star 峰值吻合,31 个 fork 约一半为中文账号
- 查实 英文资源号/周刊:Ali Bey 👁1.8K、Shadcn Weekly #6 头条、Creators Toolbox、Rudra Satani、波斯语 negahUi
- 推断 HN / Reddit / Product Hunt / 媒体 / 广告 / trending:hackernews 库无;搜索未见;建库不满 60 天不上 trending
kevintngo/looseleaf(Looseleaf)为什么能跑出来
渠道:GitHub · 研究日 2026-11-07(库数据到 11-08)· 时间统一写北京时间(x CLI 输出),UTC 另注
一句话结论
Looseleaf 是「shadcn/ui 的手绘皮」:123 个组件,API、props、data-slot 和 shadcn 完全一致,用 shadcn registry 一行命令装进项目。它跑出来主要靠作者已有的 X 受众(2.4 万粉,账号靠每天发「Claude 写代码画出来的」作品攒起来),发布帖还引用了当天 157 万浏览的 Benji Taylor Stageshow 帖,蹭到了这股热度。这只起了个头;11-03~05 的 star 峰值来自中文 X 上 AI/前端资源号的接力搬运(RicoUI、泊舟、龙海、GitHubDaily)。手绘风组件库已经有十来家,它赢在「整套 shadcn 换皮、直接替换、量大、演示视频好看」,不赢在「手绘」这个点子。
1. 它是什么
- 简介原文:"shadcn/ui, drawn by hand: 123 accessible React components that look drawn on paper, with a shadcn registry."(GitHub README)
- 内容:123 个组件(shadcn 全套,另加 57 个自有的纸张物件、贴纸、画板、聊天套件)、61 个页面区块(登录、仪表盘、定价、聊天……)、160 个图标、48 个涂鸦、88 个贴纸/印章、吉祥物 Stubby 15 个姿势、自制手写字体 Kevin Sans;React 19 + Tailwind v4 + Radix,MIT。
- 做法:所有手绘线条是一个藏在真实 DOM 后面的
<svg data-ink>,由带种子的纯函数生成(服务端和浏览器画出同一条线);hover/press 状态用 CSS 切预先画好的图层;颜色、笔宽、密度全是--ll-*token,对齐 shadcn 的语义变量。 - 分发:在
components.json加@looseleafregistry,然后npx shadcn add @looseleaf/button,源码落进用户仓库。官网 kevintngo.github.io/looseleaf。 - 工程量:仓库 2,894 个文件、263 个测试文件、109 个
*-ink.ts绘制配方。9 个 commit 全部在 11-01 一天内提交(05:15–18:25 UTC),之后没再更新(gh api)。作者 X 简介写「Creative coding with AI」,别的帖都标「Made with Claude Opus 5.5」,所以基本可以认定是 AI 批量写出来的。
2. 增长数据
Star / fork 曲线(我们的 github 库 repo_day):
| 日期 | star | 当日增 | fork |
|---|---|---|---|
| 11-03 | 93 | — | 6 |
| 11-04 | 282 | +189 | 13 |
| 11-05 | 377 | +95 | 20 |
| 11-06 | 481 | +104 | 28 |
| 11-07 | 518 | +37 | 29 |
| 11-08 | 538 | +20 | 31 |
- GitHub 现查(11-08):544 star、31 fork、1 个 issue。stargazer 时间戳接口返回 404,拿不到。
- fork 的时间戳(gh api forks,UTC)可以当热度代理:11-01 2 个,11-02 4 个,11-03 8 个,11-04 6 个,11-05 8 个,11-06 起每天 1–2 个。31 个 fork 账号里约一半是中文拼音或数字名(xiaotiego、zhangtuansia、chinabjhzc、746964750、xiaokunrii……),可以看出第二波主要是中文用户。
- 建库才 7 天,不满 60 天,上不了 trending(github 库 SCHEMA 的实测规律);trending_days_any = 0。
- 增速已经明显降下来:单日 +189 → +20。
3. 用户从哪来(增长手段,按时间)
| 时间(北京) | 渠道 | 证据 | 数据 |
|---|---|---|---|
| 11-01 02:08 | Benji Taylor 发 Stageshow 技能(给 agent 做产品演示视频/静帧) | @benjitaylor 2116593247854453244 | ❤14,403 👁157 万 |
| 11-01 12:05 | 作者发布帖,引用 Benji 的帖:"I made a UI library that looks like it was drawn by hand. Benji's stageshow skill helped make this demo video…" | @kevin_t_ngo 2116743334735851819 | ❤1,451 🔁75 👁5.5 万 |
| 11-01 13:18 | 作者在楼下回复贴链接 "Open source." | 2116761857193381920 | ❤85 👁4,557 |
| 11-02 00:25 | 作者第二条帖(独立介绍,带官网链接) | 2116929610122395995 | ❤331 👁1.3 万 |
| 11-01~02 | 英文小号搬运:Creators Toolbox、Rudra Satani、Ali Bey("more like this on…"资源号) | x live | 👁200–1.8K |
| 11-02 16:20 | 中文前端号 RicoUI:"太新了,昨天才开源的手绘风格的 UI 库" | @ricouii 2117169896379551936 | ❤197 👁1.4 万 |
| 11-03 10:26 | 中文 AI 号 泊舟:"这是我见过最好看的一个手绘风格UI" | @bozhou_ai 2117443212692664696 | ❤128 🔁27 👁2.9 万 |
| 11-03 19:44 | Shadcn Weekly #6 头条 | @shadcnweekly | 👁165 |
| 11-04 14:23 | 龙海「3 个能让 Agent 做出好 UI 的产品」(和 Stageshow 捆在一起推) | @longhaiqwe123 2117865280504516729 | ❤59 👁7,409 |
| 11-05 13:30 | GitHubDaily(中文大号)"最近挺喜欢的一个前端组件库" | @GitHub_Daily 2118214250569371866 | ❤236 👁1.1 万 |
| 11-05~08 | 二次搬运:溺心海、XiaoAnLab、chandni、Justin3go「小众但很有特色的组件库」清单(❤72 👁3.4K)、波斯语 negahUi | x live | 👁100–3.4K |
结论:
- 冷启动靠作者自己的 X 号。@kevin_t_ngo 2026-01-24 才注册 X,现有 23,919 粉(TikHub 资料),之前 3 周几乎每天发「Claude Opus 5.5 用代码画出来」的动画、图表、小游戏,多条破千赞:Bend 讲解 ❤1,530、Pele 图表 ❤1,183、奶茶店状态图 ❤957 👁24.8 万、个人网站 ❤846 👁13 万。受众早就攒好了,而且偏设计和前端。
- 借势:发布帖引用的 Benji Taylor(中文帖称他是 X 和 SpaceX 的设计负责人)的 Stageshow 帖,当天正爆(157 万浏览)。作者讲的是「用 Stageshow 做的演示视频」,这样也蹭进了 Stageshow 的话题流。龙海、溺心海的中文帖都把 Stageshow 和 Looseleaf 放在一起推,能看出这层捆绑确实起了作用。
- star 峰值来自中文 X 资源号接力:11-03 快照才 93 star,发布帖的 5.5 万浏览只换来不到 100 star;RicoUI(11-02 下午)、泊舟(11-03 上午)发帖之后,11-04 快照 +189;GitHubDaily(11-05)又续了 +95/+104。fork 账号一半是中文用户,这条证据也对得上。
- 对照组:作者同期的 statechart-art(奶茶店状态图,发布帖 24.8 万浏览)只有 239 star。浏览量高不等于 star 多;Looseleaf 是「能装进项目、值得收藏的工具」,star 转化率高得多。
- 没找到:HN(我们的 hackernews 库搜不到)、Reddit 专帖、Product Hunt、媒体报道、广告。shadcn 本人没转发(from:shadcn 搜不到相关帖)。Benji 有没有转推看不到(x 搜索不含转推),作者 11-02 回了一句 "@benjitaylor Thank you!",说明 Benji 有过互动,形式不明。
4. 竞品
手绘风组件库不是新点子,今年冒出来好几个:
| 名字 | 位置 | 上线 | 规模 | 和 Looseleaf 的区别 |
|---|---|---|---|---|
| rough-stuff/wired-elements | 开源 | 2017-08 | 10,851 star | Web Components + rough.js,定位线框图/原型;不是 React、不对齐 shadcn,多年不活跃 |
| papercss/papercss | 开源 | 2017-08 | 4,196 star | 纯 CSS 框架,无组件逻辑、无无障碍体系 |
| chr15m/DoodleCSS | 开源 | 2021-12 | 1,211 star | 一个 CSS 主题 |
| danielwh2/drawably | 开源 | 2026-08-15 | 825 star | 零依赖 4KB 的控件,笔画会「抖动」;控件少、不是 shadcn 生态 |
| SarthakRawat-1/sketchbook-ui | 开源 | 2026-03-04 | 301 star | 20 个组件,笔记本风格,npm 包 |
| pablostanley/squig | 开源 | 2026-07-27 | 103 star | 线框图工具,不是给正式产品用的组件库 |
| PlopUI(Snorlark/plop-ui,plopui.com) | 开源/网页 | 2026-10-21 | 29 star;进了 shadcn registry 目录,r/shadcn 发过帖 | 定位几乎一样(手绘、贴纸、胶带、马克笔字体、种子化笔画、WCAG AA),早 11 天;组件数和演示质量不如它,也没有作者的 X 受众 |
| inkrajs/inkra | 开源 | 2026-10-21 | 53 star | 铅笔+淡彩风 React 库,同期并行 |
| sketchcn(chuchuwiiii/sketchcn) | 开源/网页 | 2026-08-28 | 18 star | 也叫「手绘 shadcn」,rough.js,有区块示例;没推广 |
| Scribble UI(MitchForest) | 开源 | 2026-01-09 | 2 star | rough.js、shadcn 式 registry,12 个组件 |
| 同类「shadcn 换皮」:8bitcn-ui / neobrutalism-components / shadcn-m3e / glassyui | 开源 | 2023–2026 | 2,065 / 5,643 / 63 / 164 star | 同一个打法(给 shadcn 换一种强风格 + registry),换的风格不同 |
| rough.js / Excalidraw / tldraw | 开源底层/大厂级产品 | 多年 | 21K / 135K / 51K star | 手绘绘图库或白板,不是 UI 组件库 |
来源:我们的 github 库 repo_profile、gh search、各官网(Jina)。
5. 它凭什么起来
- 分发:作者自带受众 + 借势 Stageshow。 2.4 万粉的「AI 创意编程」号,发布帖 ❤1,451、5.5 万浏览,引用的是当天 157 万浏览的爆帖。
- 中文 X 资源号接力。 RicoUI 1.4 万、泊舟 2.9 万、GitHubDaily 1.1 万、龙海 7.4K 浏览,和 11-04~06 的 star 峰值、中文 fork 账号同期。
- 产品是「能直接用」的完整一整套,不是 demo。 shadcn 全套组件 + 61 个区块 + 图标/贴纸/字体/吉祥物,props 一致,一行命令替换,资源号转发时都在强调「换过来不用改页面代码」。
- 演示视频好看。 用 Stageshow 技能脚本驱动 macOS 光标逐帧录制,楼下评论专门夸「the scripted cursor is what sells it」。
- 踩中了 vibe coding 的审美焦虑。 中文转发的话术都是「AI 做的 UI 千篇一律」「vibecoding 想做出特色就用这些」,手绘风正好给 AI 生成的 shadcn 页面提供了一个一眼就能认出来的差异。
6. 差异化
和老一代手绘库(wired-elements、PaperCSS)比:它是 React 19 + Radix + shadcn API 一一对应,能直接替换现有项目,而且无障碍做得完整(键盘、AA、强制色、RTL、减弱动画)。和同期的 PlopUI、Inkra、sketchcn、Scribble UI 比:点子和技术路线几乎一样(种子化笔画、手绘贴纸、registry 分发),它的不同在量和完成度(123 组件 + 61 区块 + 整套美术资源,别家是 12–20 个组件)和作者的分发能力。所以差异化只是跑出来的一半原因:「整套 shadcn 换皮、拿来就能用」让 star 转化率高,但决定它能被看见的是作者的 X 号和中文资源号。PlopUI 定位几乎一样、还早 11 天,只有 29 star,这就是对照。
7. 能见度
- 小圈子里在传:英文 X 的设计/前端圈(作者自己的帖)+ 中文 AI 开发者资源号圈;Shadcn Weekly 收录了。没有媒体、HN、Reddit,也没上 trending(建库不到 60 天)。开源免费,不涉及收入。
- 跟风者:暂时没有。11-01 之后没搜到新的仿制仓库;PlopUI、Inkra 都早于它,是并行而不是抄它。
8. 能借鉴的
- 「给成熟生态换皮」可以复制:shadcn 的 API 和 registry 是现成的「门」,只做皮(笔画配方 + token + 美术资源),AI 一天就能铺满 123 个组件和测试;换一种风格(水彩、黏土、像素、蜡笔、中国风……)就能再跑一遍。
- 作品要能用,才换得来 star:同一个作者,奶茶店状态图 24.8 万浏览只换来 239 star,组件库 5.5 万浏览起步拿到 540。
- 发布时引用当天的爆帖("made with X's tool"),能借上大号的流量,还会被资源号和那个工具捆在一起推。
- 中文 X 资源号(RicoUI、泊舟、GitHubDaily、龙海)是开源前端库实打实的 star 来源,而且会自发搬运。
- 反面:只靠「手绘」这个点子拿不到 star(PlopUI、sketchcn、Scribble UI 都没起来),要「完整 + 能直接替换 + 好看的演示 + 有分发」同时具备。
9. 还不确定的
- 拿不到 stargazer 时间戳(接口 404),每一波 star 和哪条帖对应,是按时间推出来的。
- Benji Taylor 有没有转推或引用,看不到。
- 真实使用量:registry 是从 github.io 拉 JSON,没有 npm 下载数可看。
- 作者 11-01 之后没再提交,会不会维护、会不会做付费版(Pro 贴纸包、模板),都不清楚。
- PlopUI 和 Looseleaf 的文案、技术点高度相似(都写「seeded,服务端和浏览器画同一条线」「WCAG AA」「贴纸/胶带」),可能是同一类 AI 提示词的产物,也可能有参考关系,没法判断。