一条推 35 万人看见:抢在 Google 开源 DESIGN.md 前一周上架的小插件,两个月 4 万人,然后停了
它是什么 一个免费开源的 Chrome 插件,点一下就把当前网站的字体、颜色、间距抽成一份 DESIGN.md 或 SKILL.md,给 Claude Code、Cursor、Google Stitch 照着写界面。
为什么火了 Google 3 月在 Stitch 里引入 DESIGN.md、4 月宣布开源,它是商店里第一个名字带这个词的插件;创始人上架当天的推 34.8 万展示,4 天后 50 万粉的开发者网红跨平台推了一次。
C你可以怎么跟 别再做 DESIGN.md 提取器了;学它的打法:下一个新文件格式发布的一周内,上架一个免费开源、名字就是「格式名 + 动作」的小工具,当天自己发演示视频,再找开发者工具号推,把人领去你的付费产品。
40,000 用户 · 评分 5.0(14)
DESIGN.md Style Extractor 是一个免费、开源、只有 47KB 的 Chrome 插件:打开任何网站,点一下,把它的字体、颜色、间距、圆角、阴影抽成一份 DESIGN.md,丢给 Claude Code、Codex、Cursor 或 Google Stitch,让 AI 照这个风格写界面。它 4 月 15 日上架,一个月 2 万用户,9 月前到 4 万,之后一个用户都没再多。它跑出来不是因为做得好,是因为早:Google 刚把「DESIGN.md」变成开发者圈的热词,它是商店里第一个把这个词放进名字的插件。下面讲它怎么抢到那一周、人从哪来、为什么停住、钱在哪,以及现在还值不值得跟。
4 月 15 日的一条推
2026 年 4 月 15 日,罗马尼亚开发者 Zoltán Szőgyényi 在 X 上发了一条带演示视频的推:
I built a Chrome extension that helps you extract styles from any website and generate DESIGN(.)md or SKILL(.)md files. Works with Google Stitch, Claude Code, Codex etc ... and it's free! ——我做了个 Chrome 插件,能从任何网站抽出样式,生成 DESIGN.md 或 SKILL.md。能配 Google Stitch、Claude Code、Codex 用……而且免费。
他当时只有不到 4,000 个关注者。这条推到 11-08 是 34.8 万次展示、2,473 个赞、4,060 次收藏(X,11-08)。收藏比赞还多,是开发者工具推文的典型样子:先存着,回头装。半小时后他补了一条「而且是开源的」,附上 GitHub 地址;第二天发 v0.3.0,加了「一键装进 Claude / Codex / Cursor」的按钮。商店里 4 月 16 日的一条五星评价只有一句:
Saw this on X/Twitter. Tried it and loved the outcome. ——在 X 上看到的,试了,结果很喜欢。
四天后(04-19),自称全平台 50 万粉的印度开发者网红 Ram Maheshwari(@rammcodes)在 LinkedIn、Instagram、Facebook 同时发了一条视频,开头一句「Turn any webpage into a DESIGN.md file instantly 🤯」,Zoltán 在评论区回了句谢谢。是不是付费推广,没查到。
用户数(Chrome 商店页及其网页存档;9 月以后来自插件统计站 extops 和商店页):
| 日期 | 用户 | 评分数 |
|---|---|---|
| 04-15 | 上架 | 0 |
| 04-30 | 9,000 | 9 |
| 05-15 | 20,000 | 11 |
| 09-01 | 40,000 | — |
| 11-08 | 40,000 | 14(5.0 分) |
两周 9,000,一个月 2 万。之后就平了。
它是什么,为什么偏偏是这个时候
插件做的事很简单:读当前页面上最多 280 个可见元素的计算样式,整理成一份 Markdown 设计规范(品牌、配色、字体、间距、该做和不该做的),可以存成 DESIGN.md,也可以存成给 AI 编程工具用的 SKILL.md。不用注册,不连服务器,不申请「读取所有网站」的权限,在登录后的页面也能用。
需求是 Google 一手造出来的,一个月里三件事叠在一起:
- 03-18:Google Labs 给 Stitch 大改版,引入 DESIGN.md——一份写给 AI 看的设计规范文件。
- 03-31:有人建了 awesome-design-md,收集各大品牌的 DESIGN.md,现在 12.6 万星(GitHub,11-08)。
- 04-21:Google 官方博客宣布 DESIGN.md 格式开源。
开发者马上会问的一句话是:「我喜欢的那个网站,它的 DESIGN.md 怎么拿?」这个插件 04-15 上架,比 Google 开源早 6 天,比第一个跟风的同名插件早 2 天。
它能这么快,是因为作者早就在这个话题里。Zoltán 是 Flowbite(开源 UI 组件库)和 Themesberg 的创始人,2 月就和合伙人在做 TypeUI——给 AI 编程工具用的设计规范和技能文件,有现成的模板和命令行工具。插件只是给它加了个浏览器入口,两三天的活。
人从哪来
| 渠道 | 看到的 |
|---|---|
| 创始人自己的推 | 04-15,不到 4,000 粉,34.8 万展示、4,060 收藏;第一波用户从这来 |
| 开发者网红 rammcodes | 04-19,LinkedIn / Instagram / Facebook 同一条视频;LinkedIn 那条 369 个赞 |
| 「开源项目速递」类账号 | GitHub Awesome 05-01 的 TikTok 2.5 万播放、YouTube Shorts 816 赞 |
| 长尾短视频 | TikTok @tylermommsen 09-22 一条 1 万播放;还有一批「一键复制任何网站设计」的视频,推的不全是它 |
| 收录和搜索 | daily.dev、ToKnow.ai 等写过;搜「DESIGN.md chrome extension」它排第一 |
| 商店里的名字 | 第一个名字里带「DESIGN.md」的插件,简介把 Stitch、Claude、Codex、Cursor 全写上了;商店内搜索带来多少量,看不到 |
没找到买量的痕迹。4 万用户只有 14 个评分,看着扎眼,但同类都这样:DESIGN.md Inspector 7,000 用户 2 个评分,UIDrop 1 万用户 7 个(Chrome 商店,11-08)。这种工具装上、抽一次、就不再打开,没人回来打分。
为什么停在 4 万
插件的版本一直是 4 月 18 日的 0.4.0,开源仓库最后一次提交是 5 月 25 日。增长全落在 4 月中到 5 月中那一个月的话题窗口里,之后没有新的大号推,曲线就平了。
这也说明 4 万是装过的人数,不是天天在用的人数。抽一份设计规范,一个项目只要一次。用户留下的评价说的也是这个:
Working on multiple projects during the week and not being design-savvy myself, this little Chrome extension has found its place in my regular toolbelt… ——我一周在好几个项目之间转,自己又不懂设计,这个小插件成了我的常用工具……(Chrome 商店,04-27)
这是 14 条评价里最长的一条,也是少数说自己会反复用的。
钱在哪:插件不收钱,作者的付费产品在后面
插件没有内购,也不打算收钱。钱在 TypeUI 那边:官网卖设计技能库和设计系统,按年订阅。TypeUI 在 TrustMRR(用支付平台数据校验收入的公开榜)上的月收入:
| 月份 | 收入 |
|---|---|
| 2026-04 | $1,164 |
| 05 | $2,453 |
| 06 | $4,153 |
| 07 | $4,646 |
| 09 | $2,667 |
| 10 | $3,454 |
插件冲量的 4 到 7 月,TypeUI 的收入涨了四倍;插件不涨以后,收入也回落了。时间对得上,但插件到底带来多少付费,没有直接数据(推断)。现在 TypeUI 公开的月收入约 $3,500,161 个订阅(TrustMRR,11-07)。
所以这个插件的正确读法是:一个免费的钩子,用来在话题最热的那几周,把人领到作者真正卖东西的地方。插件本身不赚钱,也没打算赚钱。
谁在抢
功能谁都能做——47KB,MIT 开源,342 个 fork。两天后就有了几乎同名的跟风者。11 月,商店里名字带「DESIGN.md」的插件至少 12 个,还在上新。
| 产品 | 规模(11-08) | 和它比 |
|---|---|---|
| DESIGN.md Inspector | 7,000 用户,一周前是 6,000 | 04-27 上架,简介几乎照抄;靠一条 4.6 万播放的 TikTok 现在还在涨 |
| DESIGN.md Generator | 6,000 | 晚两天的匿名同款,不更新 |
| UIDrop | 1 万 | 收费,按组件抽取 |
| Woblo | 1 万,46 个评分 | 收费,导出 Tailwind / shadcn,偏「复制网站样式」 |
| design-extractor.com | 未核实 | 按积分收费,严格按 Google 的格式出,专门写了一页「TypeUI 替代品」来截它的用户 |
| awesome-design-md | 12.6 万星 | 现成的品牌 DESIGN.md 合集,不用自己抽 |
| CSS Peeper、Site Palette 等老工具 | 8 万到 40 万 | 给人看样式,不出给 AI 用的文件 |
竞品攻击它的点很具体:它出的是 TypeUI 自己的模板,不是 Google 规定的格式;半年没更新。这两处是它没做好的部分,但补上它们的付费竞品也只有一万量级。
如果是你
C
能学到东西,跟进不太划算。DESIGN.md 这个窗口已经关了:话题在 5 月就过去了,同名插件十几个,头名自己都停在 4 万,付费的竞品也就一万人。照着做,最好的结果是在几千人的位置上和 Inspector 们抢一条 TikTok。值得拿走的是打法,不是这个产品。
适合谁:已经在某个开发者话题里、手上有付费产品的人,把这一套当获客手段用。Zoltán 能两三天上架,是因为 TypeUI 的模板和命令行早就做好了;能吃到 34.8 万展示,是因为他在 X 上长期写 UI 和开发者工具,发出去有人转。
不适合谁:想靠插件本身赚钱的(这类一次性工具没人付费,也没人留下);手上没有后续产品可以导流的(4 万装机换不来任何东西);现在才想做「网站转 DESIGN.md」的(位置全被占了)。
怎么做:盯住大厂和主流 AI 编程工具新推的文件格式或规范——一个新格式出来,开发者第一个问题总是「怎么从我已有的东西生成它」。在格式发布后一周内,上架一个免费、开源、不要账号、名字就是「格式名 + 动作」的小工具;第二天就迭代一版,给关注的人一个再看一眼的理由;工具里留一个回到你付费产品的链接。
怎么获客:上架当天自己发一条带 30 秒演示视频的推,第一句写它能做什么,最后一句写「免费」,回复里补开源地址;然后把视频私信给几个做「开发者工具推荐」的跨平台账号和开源速递号。整个窗口只有两到四周,过了就没人再推了。
死线:新格式发布后一周内上架,两周内要有大号推过。晚一个月,就是 DESIGN.md Inspector 和 Generator 的结局——停在几千。
算看错:① DESIGN.md Inspector 这类后来者靠持续的短视频追到 2 万以上,说明这个品类的需求不是一次性话题,而是长期在涨,值得认真做一个更好的版本;② TypeUI 在插件不涨之后收入继续涨回并超过 7 月的 $4,646,说明插件引流的作用比看上去小,真正的生意在设计技能库本身;③ 11 月以后新上架的同类插件里,有一个不靠新事件、一个月内涨过 1 万用户,说明位置还没占满,跟进可以上调到 B。
研究底稿:竞品表、获客证据、完整研究报告
- 竞品
名字 在哪 上线 规模 它和这家不同在哪 VoltAgent/awesome-design-md + getdesign.md 开源 2026-03-31 12.6 万星 现成的品牌 DESIGN.md 合集加付费定制,不是现场从任意网站抽 Google Stitch DESIGN.md 大厂功能 2026-03-18 Google Labs 产品 只管 Stitch 自己项目的规则导入导出,不抽任意网站 DESIGN.md Inspector Chrome 2026-04-27 7,000 用户 / 2 评分 功能和措辞几乎一样,靠 TikTok 达人(4.6 万播放)还在涨 DESIGN.md Generator(claude_skill) Chrome 2026-04-17 6,000 用户 / 3 评分 晚两天的匿名同款,不更新 UIDrop Chrome 2026-05-27 10,000 用户 / 7 评分 收费(内购 + 官网定价),组件级抽取 Woblo Chrome 2026-04-21 10,000 用户 / 46 评分 收费,导出 Tailwind / shadcn,偏复制样式 design-extractor.com 网页 2026 未核实 按积分收费,服务端渲染,严格按 Google 规范,出组件配方并做像素校验,有 MCP CSS Peeper / Site Palette / html.to.design Chrome 2016–2022 8 万到 70 万用户 给人看样式或转 Figma,不出给 AI 用的 Markdown - 用户从哪来
- 查实 开发者网红 rammcodes(LinkedIn / IG / FB / X):04-19 发「Turn any webpage into a DESIGN.md file instantly」视频,自称全平台 50 万+粉,创始人在评论区道谢
- 查实 GitHub Awesome 等开源速递账号:05-01 TikTok 2.5 万播放、YouTube Shorts 816 赞
- 查实 长尾 TikTok / FB 达人:@tylermommsen 09-22 视频 1 万播放;Dilip 等 FB 视频
- 查实 技术媒体和收录站:daily.dev、ToKnow.ai、Nic's notes、creatorstoolbox;Jina 搜索排第一
- 推断 商店搜索词卡位:第一个名字带「DESIGN.md」的扩展,简介带 Stitch、Claude、Codex、Cursor;有 Established publisher 徽章
- 查实 创始人自有生态(GitHub / Flowbite / TypeUI):扩展库 3.1k 星,awesome-design-skills 3.6k 星;Flowbite 文档有 TypeUI 页面;@flowbite_ui 发过帖
- 推断 付费买量:没找到;评分率 0.035% 低,但同品类都在 0.03% 到 0.07%
DESIGN.md Style Extractor - TypeUI:为什么能跑出来
Chrome 扩展 · id ogpdnchdjiibhobphelbbkemnnemkfma · 研究日期 2026-11-08
一句话
这是一个免费、MIT 开源、47KB 的小扩展:在当前标签页读出网页的字体、颜色、间距、圆角、阴影、动效,生成 DESIGN.md 或 SKILL.md,丢给 Claude Code、Codex、Cursor、Google Stitch 用。它能起来,靠的是踩准了一个平台事件的时间点。Google 在 2026-03-18 给 Stitch 推出 DESIGN.md,3 月底 awesome-design-md 爆到 12.6 万星,04-21 Google 又把格式开源。TypeUI 团队 04-14 建库,04-15 上架,是 Chrome 商店里第一个名字里带「DESIGN.md」的扩展。4 天后,50 万粉的开发者网红 Ram Maheshwari(rammcodes)在 LinkedIn、Instagram、Facebook、X 上一起推了它,GitHub Awesome 等账号跟着推。两周 9,000 用户,一个月 2 万,9 月前到 4 万。之后它就没再更新(版本一直是 04-18 的 0.4.0),用户数也停在 4 万。对作者来说,它是付费产品 TypeUI(TrustMRR 公开 MRR 约 $3.5k)的免费引流钩子。
1. 基本数据
- 商店(2026-11-08):40,000 用户,5.0 分,14 个评分。首次发布 2026-04-15,最后更新 2026-04-18,版本 0.4.0,47.06KiB。权限 activeTab / downloads / scripting / storage,不申请全站访问。开发者 Bergside SRL(罗马尼亚蒂米什瓦拉),有 Established publisher 徽章,EU trader,有 D-U-N-S。没有内购。(Chrome 商店页;chromestore.item)
- 用户曲线(Wayback 存档的商店页):04-16、04-17 还是 0 评分;04-30 是 9,000 用户 / 9 评分;05-15 和 05-17 是 20,000 / 11;extops 从 09-01 到 11-08 都是 40,000;我们的 chromestore.item_snap 11-01 到 11-08 也是 40,000 / 14,没变。
- 开源库 bergside/design-md-chrome:3,152 星,342 fork,04-14 建库,最后一次 push 是 2026-05-25,最后一个 release 是 04-17 的 v0.4.0。10-28 到 11-08 涨了 67 星(github.repo_day),现在每天还有 5 到 11 星的自然增长。
- Firefox 版(DESIGN.md Generator - TypeUI):251 用户,2 个评价(AMO 页面,11-08)。流量几乎都在 Chrome 上,因为达人视频里放的都是 Chrome 链接。
- 评分率:40,000 用户只有 14 个评分(0.035%),被召回规则标成 X1「疑似买量」。不过同品类都是这样:DESIGN.md Generator 6,000 / 3,DESIGN.md Inspector 7,000 / 2,UIDrop 10,000 / 7(chromestore,11-08)。这类工具多是「装上、抽一次、就不再打开」,没人回来评分。没找到买量证据,用户来路在下面第 4 节有清楚的达人链条。
2. 背景:为什么是现在
| 日期 | 事件 | 出处 |
|---|---|---|
| 2026-02 / 03-03 | Zoltán Szőgyényi(Flowbite、Themesberg 创始人)和合伙人 Robert Tanislav 开始做 TypeUI,03-03 建 bergside/typeui 库(CLI,给 AI 生成 SKILL.md 设计规范),r/webdev 发帖 | indie.md;GitHub;Reddit |
| 2026-03-18 | Google Labs 发布 Stitch 大改版「vibe design」,引入 DESIGN.md 文件 | blog.google |
| 2026-03-31 | VoltAgent/awesome-design-md 建库,现在 126,068 星 | GitHub API |
| 2026-04-10 | google-labs-code/design.md 规范库建库(现在 28,774 星) | GitHub API |
| 2026-04-14 / 04-15 | bergside/design-md-chrome 建库,扩展上架 | GitHub;商店 |
| 2026-04-17 | 跟风的「DESIGN.md Generator」(开发者 claude_skill)上架,简介措辞几乎一样 | chromestore |
| 2026-04-19 | Ram Maheshwari(@rammcodes,自称全平台 50 万+粉)在 LinkedIn / Instagram / Facebook 发视频「Turn any webpage into a DESIGN.md file instantly 🤯」,Zoltán 在评论区回「thanks for featuring it」 | LinkedIn post activity-7451526175241277440(雪花 ID 换算是 04-19);IG reel DXR2B2_iBe3 |
| 2026-04-21 | Google 官方博客宣布 Stitch 的 DESIGN.md 格式开源 | blog.google |
| 2026-04-30 | 商店 9,000 用户 | Wayback |
| 2026-05-01 | GitHub Awesome 发 TikTok / YouTube Shorts「design-md-chrome reverse-engineers any website's design system」,TikTok 2.5 万播放 / 1,062 赞,YouTube 816 赞 | TikHub;YouTube |
| 2026-05-02 | ToKnow.ai 等站写 design-md-chrome + Google Stitch 的文章;daily.dev 收录 | 网页 |
| 2026-05-15 | 商店 20,000 用户 | Wayback |
| 2026-05-25 | 开源库最后一次 push,之后不再维护 | GitHub |
| 2026-09-22 | TikTok @tylermommsen 发视频专门介绍「DESIGN.md Style Extractor」,1 万播放 | TikHub |
| 2026-09-01 至今 | 用户停在 40,000 | extops;chromestore |
结论:需求是 Google 一手造出来的。Stitch 引入 DESIGN.md、awesome-design-md 爆红、Google 宣布开源,这三件事在一个月里把「给 AI 一份设计规范文件」变成开发者圈的热词。大家马上会问:「我喜欢的那个网站,它的 DESIGN.md 怎么拿?」TypeUI 已经有 CLI 和 SKILL.md 模板,只差一个浏览器入口,所以 Google 开源前一周就把扩展推上了商店。
3. 竞品
| 名字 | 在哪 | 上线 | 规模 | 和 TypeUI 扩展不同在哪 |
|---|---|---|---|---|
| VoltAgent/awesome-design-md + getdesign.md | 开源 / 网页 | 2026-03-31 | 12.6 万星 | 现成的品牌 DESIGN.md 合集(Claude、Stripe 等几十上百家),可以付费定制;不是现场从任意网站抽 |
| Google Stitch 自带 DESIGN.md 导入导出 | 大厂功能 | 2026-03-18 | Google Labs 产品 | 只管 Stitch 自己项目的规则,不从任意网站抽取 |
| DESIGN.md Inspector(Agesilaus) | Chrome | 2026-04-27 | 7,000 用户 / 2 评分,11-01 到 11-08 从 6,000 涨到 7,000 | 简介几乎照抄 TypeUI;TikTok @felixcallahan.ai 10-01 的视频 4.6 万播放在推它,是现在还在涨的那个 |
| DESIGN.md Generator(claude_skill) | Chrome | 2026-04-17 | 6,000 / 3 | 晚两天上架,措辞相同,匿名开发者,不更新 |
| UIDrop — Design System Extractor for AI | Chrome | 2026-05-27 | 10,000 / 7 | 收费(商店标了内购,官网有定价,manifest 有付款域名);作者说 rammcodes 也在 X、FB 推过它 |
| Woblo | Chrome | 2026-04-21 | 10,000 / 46 | 收费;导出到 Tailwind / shadcn / AI,偏「复制网站样式」 |
| design-extractor.com | 网页 + Chrome + MCP | 2026 | 未核实 | 按次收积分($5 / 50 积分,Pro 一次 10 积分),服务端渲染,严格按 Google 规范,给每个组件出 HTML/CSS 配方并和真站做像素比对;专门写了「TypeUI Alternative」对比页挖它的用户 |
| getdesignsystem.io 扩展 | Chrome / 网页 | 2026-07-19 | 650 | 网页 + 扩展,出 DESIGN.md 和 Tailwind 配置 |
| 其他小扩展:DESIGN.md Extractor(603)、DESIGN.md Style Generator(558)、PikSpec(749)、shadcn design.md(122)、Designrail、DesignMD、Specto(11 月还在上新) | Chrome | 2026-04 到 11 | 几到几百 | 基本是同一件事 |
| 老一代样式查看器:CSS Peeper(40 万)、Site Palette(8 万)、html.to.design(70 万) | Chrome | 2016–2022 | 大 | 给人看样式或转 Figma,不出给 AI 用的 Markdown |
| 早于 DESIGN.md 的 token 抽取器:Yoink(327,2025-11)、Design Token Extractor(553,2025-12)、VisualDNA(236,2026-03) | Chrome | 2025-11 到 2026-03 | 几百 | 功能接近,但名字里没有「DESIGN.md」,没赶上这个搜索词和这波话题 |
格局:4 万用户的 TypeUI 是这个品类在 Chrome 上的第一名,是第二名(UIDrop、Woblo 各 1 万)的 4 倍。功能上谁都能做(它本身 47KB、MIT 开源、342 个 fork)。
4. 增长手段(用户从哪来)
| 渠道 | 证据 | 是否确认 |
|---|---|---|
| 开发者网红 Ram Maheshwari(rammcodes)跨平台推荐 | 04-19 在 LinkedIn、Instagram reel、Facebook 视频发同一条「Turn any webpage into a DESIGN.md file instantly」,X 简介写着全平台 50 万+粉;创始人在评论区道谢。是不是付费推广,未核实 | 是 |
| GitHub Awesome 等「开源库速递」账号 | 05-01 TikTok 2.5 万播放、YouTube Shorts 816 赞 | 是 |
| 长尾 TikTok / IG / FB 达人 | @tylermommsen(09-22,1 万播放)、Dilip「DESIGN.md Style」(FB)、FB 越南开发者转发,还有若干印尼「copy any website design」视频(推的扩展不一定都是它) | 是 |
| 搜索与技术媒体 | daily.dev、ToKnow.ai、Nic's notes、creatorstoolbox、softonic 收录;Jina 搜「DESIGN.md chrome extension」它排第一 | 是 |
| 商店搜索词卡位 | 第一个把「DESIGN.md」放进名字的扩展,名字 + 简介同时带 Google Stitch、Claude、Codex、Cursor;Established publisher 徽章 | 机制确认,商店内搜索带来多少量未核实 |
| 开源库 + 创始人自有生态 | design-md-chrome 3.1k 星;TypeUI 主库 2.2k 星、awesome-design-skills 3.6k 星;Flowbite 文档(npm 3,000 万+下载)里有 TypeUI 页面;@flowbite_ui 发过「I built a Chrome extension…」 | 是(Flowbite X 只有 396 粉,创始人 X 约 4k 粉,量不大) |
| 付费广告 / 买量 | 没找到;评分率低是这个品类的通病 | 没有证据 |
5. 为什么跑出来
- 时间点:Google 03-18 引入 DESIGN.md、04-21 宣布开源,中间 awesome-design-md 爆到 12.6 万星。它 04-15 上架,比 Google 开源早 6 天,比第一个跟风者早 2 天。上线后两周到 9,000 用户,一个月到 2 万(Wayback)。
- 大号在第 4 天推了它:rammcodes 的多平台视频是 04-19,GitHub Awesome 是 05-01。增长全落在这两周的窗口里,之后没有新的大推,曲线就平了。
- 作者早就在这个话题里:TypeUI 2 月就在做「给 AI 的设计技能文件」,有现成的 SKILL.md 模板和 CLI,扩展只是加了个浏览器入口,两三天就能做完。Flowbite / Themesberg 做了多年 UI 资产,懂开发者分发,也有 Established publisher 的商店信用。
- 零门槛:免费、不用注册、不调服务端、47KB、不申请全站权限,在已登录的页面也能用。付费竞品(UIDrop、Woblo、design-extractor.com)都要账号或积分。
- 这类工具一次性用完的属性,让「4 万用户 / 14 评分 / 半年不更新」同时成立:大家来是因为话题,装上抽一次就够了,没有留存要经营。这也说明 4 万是装机数,不是活跃用户数。
6. 差异化
- 和同类比:第一个、免费、开源、纯本地、能直接出 SKILL.md,还有「Quick install」把 SKILL.md 写进 Claude Code / Codex / Cursor 项目的 skills 目录(design-extractor.com 对比页,10-20 核对)。输出用 TypeUI 自己的模板(Mission / Brand / Style Foundations / Do / Don't / Quality Gates),不是 Google 规范的 YAML front matter,竞品正拿这点攻击它。
- 技术上没有壁垒:只读当前页面最多 280 个可见元素的 computed style。代码 MIT 开源,后来者照抄很容易,两天后就有了几乎同名的 DESIGN.md Generator。
- 是不是跑出来的原因:不是功能差异,是「最早 + 名字卡位 + 达人推」。差异化只是让它在达人视频里看起来干净可信(免费、开源、不要账号)。要是晚一个月上架,大概就和 DESIGN.md Inspector、Generator 一样停在几千。
- 对作者真正的价值在漏斗上:TypeUI 收入 2026-04 是 $1,164,05 月 $2,453,06 月 $4,153,07 月 $4,646(最高),正好和扩展冲量的时间对上;扩展不涨后,09 月掉到 $2,667,10 月 $3,454(indie 库,TrustMRR 验证)。这只是相关,扩展带来多少付费没有直接数据。
7. 现在有多少人看见了
- 收入已公开:TypeUI 在 TrustMRR 上,MRR $3,510,161 个订阅,近 30 天 $3,538,累计 $23,726(indie 库,11-07 同步)。indie.md 有创始人专访,写着「TypeUI 现在每月约 $4–6k」。
- 被大号写过(rammcodes 50 万+粉,GitHub Awesome),Google 话题也带过一波。这个品类已经挤满了:Chrome 上至少 12 个名字带 DESIGN.md 的扩展,11 月还在上新;网页端有 getdesign.md、designmd.app、design-extractor.com、designmd.me、getdesignsystem.io;design-extractor.com 专门写了 TypeUI 对比页来截流。
- x-radar 本地语料里 typeui、DESIGN.md 没有命中(语料覆盖有限,不代表 X 上没讨论)。
8. 能借鉴的
- 大厂发了新文件格式或新标准,第一周就占住「格式名 + 工具形态」这个名字(DESIGN.md Extractor 这类),再找一两个跨平台的开发者网红推,两周就能吃到大部分流量。
- 免费开源的小工具当付费产品的入口:扩展里放「Explain」链接回 typeui.sh,README 里推设计技能库和赞助位。
- 风险也很清楚:一次性工具的装机数很快就平了,这种增长只是话题红利,护城河要靠后面的付费内容(设计技能库、MCP、分析)。
9. 不确定的
- rammcodes 等达人推广是不是付费的,未核实。
- 05-15 的 2 万到 09-01 的 4 万之间,具体是哪天跨的档,没拍到(Wayback 07-06、08-24 两个存档被限流,没取到用户数)。
- 商店内搜索「DESIGN.md」时它的排名和带来的量,未核实。
- 扩展到付费订阅的转化没有数据,收入和扩展的关系只是时间上对得上。
- 一部分 TikTok「copy any website design」视频推的是 Inspector、Generator 或 Woblo,不一定是它。
出处
- Chrome 商店页:chromewebstore.google.com/detail/designmd-style-extractor/og… ;Wayback 存档 20260416、20260417、20260430、20260515、20260517
- chromestore 库:item、item_snap(11-01 到 11-08);github 库:repo_day bergside/design-md-chrome;indie 库:typeui;traffic 库:typeui.sh(Tranco 11-06 第 719,546 名,10-26 是第 981,540 名)
- GitHub API:bergside/design-md-chrome、bergside/typeui、bergside/awesome-design-skills、VoltAgent/awesome-design-md、google-labs-code/design.md
- Google 博客:blog.google/innovation-and-ai/models-and-research/google-lab… (2026-04-21);blog.google/innovation-and-ai/models-and-research/google-lab… (2026-03-18)
- rammcodes:www.linkedin.com/posts/rammcodes_turn-any-webpage-into-a-des… ;www.instagram.com/reel/DXR2B2_iBe3/ ;x.com/rammcodes
- GitHub Awesome:www.youtube.com/shorts/uJpw1wDBPbk ;TikTok @github.awesome(TikHub 搜索)
- 竞品对比页:www.design-extractor.com/compare/typeui
- TrustMRR:trustmrr.com/startup/typeui ;indie.md:indie.md/people/zoltan/
- Firefox:addons.mozilla.org/en-US/firefox/addon/design-md/
- ToKnow.ai:toknow.ai/posts/design-md-chrome-google-stitch-ai-design-sys…