什么值得做
enesozturk/dimensional-drawing · enesozturk

看到一条热帖,4 小时后建库:一个把 UI 组件画成苹果尺寸图的 agent 技能,两周 1,900 star

它是什么 一个免费的 agent 技能包,让 Claude、Codex、Cursor 把卡片、对话框这类 UI 组件画成苹果官方尺寸图那样的单色工程图纸,还能做成 10 秒的自画视频。

为什么火了 设计大号 @avstorm 夸苹果尺寸图的帖子刚热,作者 4 小时就做出工具,配一段图纸自己画出来的视频发帖拿到 14.3 万浏览、4,124 收藏,再被 HTML 语言榜第 1 和短视频搬运号放大。

B你可以怎么跟 别照着再做一个某某风图纸;学它的打法:盯 X 设计圈的审美热帖,24 小时内做成 agent 技能、配好看的短视频、致谢原帖作者;或者补它没做的整页、状态变化图纸。

B 级:打法清楚、可复制,但每次机会只开一两天、要赌下一条热帖;照着做的跟风者(system-drawings)只拿到 8 star,项目本身第 5 天起就不涨了。 小圈子里在传
数据(每天更新) · 建库 2026-10-23 · 1,921 星 · 7 天 +244
GitHub · 星数
01k2k10-2510-2911-0111-0411-081.9k
数据 2026-10-25 → 2026-11-08(15 天,15 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有

2026 年 10 月 23 日早上,一位设计师在 X 上夸了一句苹果的硬件尺寸图。4 小时后,土耳其工程师 Enes Ozturk 建了一个仓库,让 Claude、Codex、Cursor 这类 agent 把你的卡片、对话框也画成那种图纸,还能做成一段笔画自己画出来的视频。两周后它有 1,890 个 star。这篇讲它为什么起来、star 从哪来,以及你想拿到同样的 star,该照着学哪一部分、别学哪一部分。

一条帖子点火,另一条帖子接住

10-23 08:19(UTC),设计师 Andreas Storm(@avstorm,约 20 万关注,图标库 iconists 的联合创始人)发了一句话:「Apple has an incredible library of detailed hardware dimension drawings.」附上苹果给配件厂商的尺寸图页面。苹果给每台设备都出这种图,方便做手机壳的厂商照着开模:一张纸、几个视图、几个放大的细节圈,满纸数字。这条帖子到 11-06 有 13.9 万次浏览、3,007 个赞、1,813 次收藏。

当天 12:20,Enes Ozturk 建了 enesozturk/dimensional-drawing。第二天下午 16:45,他发帖:「Made a skill for dimensional drawings of UI components.」配了一段视频:一个对话框的图纸从标题栏开始一笔一笔画出来,镜头往后拉,图层一层层抬起来分开,最后停在整张图纸上。这条帖子到 11-06 有 14.3 万次浏览、3,316 个赞、4,124 次收藏(X,11-06)。

两件事值得注意。一是他的账号只有 4,211 个关注者,浏览量是粉丝数的 30 多倍,全靠推荐流。二是收藏比点赞还多,工具帖常见这样:先存起来,回头再装。

他在 README 的致谢里写的是 Andreas Storm,「whose post started this」(是他那条帖子开的头)。

它到底是什么

两个技能,MIT 协议,免费,输出是纯 HTML:

  • 画图:指着一个组件(代码文件、Storybook、网址或截图都行),agent 画出一张单页图纸:标题栏、俯视图、图层分解图、圆角和嵌套圆角的细节圈、变量表。实体产品也能画,README 里让你「试试画一个保温杯」。
  • 动效:把画好的图纸做成大约 10 秒的短片,在 Claude 的 Motion 里导出 MP4,或者用 Playwright 加 ffmpeg 在命令行里渲染。

装法就是复制一个文件夹到 ~/.claude/skills/,或者 npx skills add enesozturk/dimensional-drawing。

真正让它显得「有想法」的是 README 里那张「house rules」:

规矩意思
Monochrome只用灰色,靠线粗、虚线、斜线区分
Architecture, not content只画结构,写 TITLE SLOT · FLEX,不写具体文案
Variables, not numbers用 S1、R2、R2 = R1 − B − S6 这样的变量,不写死像素
Unbranded名字一律 UI-CARD-001 这种
Never invent values不知道的就标 [TBD],不编

一位写技能测评的博主(themenonlab,10-26)专门写长文夸这一条。有了这几条规矩,它就从「好看的玩具」变成了「一套画组件的方法」,也难怪收藏比点赞多。

star 从哪来

GitHub 每日 star(每天一次快照):

日期star当天新增
10-256—
10-26326+320
10-27848+522
10-281,282+434
10-291,418+136
10-30 到 11-061,542 → 1,828每天 +25 到 +124,越往后越少

(当天下午 GitHub 页面上已经是 1,890)

几处来源,按时间排:

  1. 作者自己那条 X 帖,是源头。帖子里那段自己画出来的视频是钩子。评论区有人说当天就拿它给客户的视频做了开场镜头,这个工具画出来的东西本身就能拿去发。
  2. GitHub 的语言小榜。仓库语言标的是 HTML,在 Trendshift 的 HTML 榜上 10-25 第 6、10-26 第 1、10-27 第 3。HTML 是个小榜,几百 star 就能登顶,登顶又带来第二波。
  3. 短视频搬运号。Instagram 上至少 4 条 Reel、Facebook 上 PHfreecoder 这类页面、YouTube 上两条 Shorts 和一条讲解视频,都在当「GitHub 好项目」搬。作者没花钱,视频好看,搬运号自己会来。
  4. 技能目录站和博客。skills.sh、ui-skills.com 收录了它,themenonlab 写了测评,Reddit 的 r/BestGitHubRepos 也有人发帖。

真正装了多少人:skills.sh 上两个技能合计 686 次安装(11-06),star 和安装大约 2.7 比 1。GitHub 上至少有十来个技能合集仓库原样收了它的 SKILL.md。所以大部分 star 是收藏,不是使用。

爆发也就几天。第 5 天起日增掉到几十,作者 10-24 之后再没提交过代码。

作者之前做过什么

Enes 在 WalletConnect 做工程师,GitHub 上最有名的是两个 React Native 动效库(react-native-hold-menu 约 1,500 star、rn-swipeable-panel 约 950 star)。两个月前他做过一个同样思路的 agent 技能 thinking-logos,只有 54 star。同一个人,同样做技能,差了 35 倍。所以这次起来不是靠老粉丝,靠的是题材和那条帖子的时机。

谁在做同样的事

「给组件标尺寸」这件事一点都不新:

项目在哪规模和它的区别
Specs(原 EightShapes Specs)Figma 插件设计系统圈的标杆,约 $8/人/月在 Figma 里自动标尺寸和结构,用来交付给开发
Figma Dev Mode、Redlines 插件Figma覆盖面最大像素级测量标注,功能性,画不出好看的成图
moguzbulbul/blueprint-animationGitHub,2026-09430 star最像的前辈:蓝图加尺寸线加动画,但讲的是改版前后对比
muthuishere/hand-drawn-diagramsGitHub,2026-0385 star单色手绘风的架构图、流程图
BubbleBrainBB/BB-VideoGitHub,2026-10138 star32 种风格做视频,蓝图只是其中一种
3xC1ibR/system-drawingsGitHub,10-27 建库8 star跟风者:IBM / NASA 七十年代文档风的三维技术图纸

(GitHub,11-06)

功能上它跟这些差不多,它比别人多的是借到了一个大家已经公认好看的东西,外加踩准了那条帖子的时间。blueprint-animation 做的事几乎一样,少了一个数量级。爆发第二天就有人照着做了 system-drawings,同样是 agent 技能、白纸黑线、标题栏,到今天 8 个 star。跟在爆款后面换个风格再来一遍,基本没人看。

如果是你

判断:B。可以试,但要学的是打法,不是这个项目本身。它证明了一件事:X 设计圈有人把某种大厂的图纸、文档或视觉风格转热的时候,谁在 24 小时内把它做成 agent 技能、配一段好看的视频,谁就能拿走这波 star。可这个机会每次只开一两天,而且你没法提前知道下一条热帖是什么;照着它再做一个「某某风图纸」,已经被 system-drawings 证明没用。

适合谁:每天刷 X 设计圈和 AI 圈、手快、一个晚上能写完一份 SKILL.md 再录好一段演示视频的人;本身有审美、能把一种风格拆成几条硬规矩的设计师兼工程师。

不适合谁:想做一个能持续涨 star、长期维护的项目的人(这种打法第 5 天就掉到十分之一);手里没有任何发帖渠道,也不会做视频的人,这个项目的 star 几乎全是帖子和视频带来的。

怎么做,按值得程度排:

  1. 盯热帖、抢时间:订阅一批设计大号,看到「某家公司的某种图、某种文档好美」这种帖子收藏数冲到上千,当天就把它做成技能。产出物一定要能直接拿去发:一张图,外加一段十秒左右的动效。
  2. 把风格写成规矩:学它的 house rules,单色、变量、不知道就标 [TBD]。规矩写得像方法论,别人才愿意收藏,测评博主也有东西可写。
  3. 补它没做的部分:它只管单个组件。整页布局、设计系统总览、组件状态变化(按下、展开、加载),这些图纸都还没有人做好;或者给 Remotion、Motion Canvas 写动效适配,它的 README 自己说这些没测过。这条路 star 会少,但不用赌时机。

怎么获客:建库当天就发 X,帖子里放会自己画出来的视频,公开致谢原帖作者,顺着同一批人传出去。README 第一屏放 GIF。仓库语言选一个小的(比如 HTML)冲语言榜。发完把视频丢给做「GitHub 好项目」的 Instagram、YouTube 号,再去 skills.sh、ui-skills.com 登记。

什么时候之前:没有固定日期,看热帖。热帖出来 24 小时内要发,超过 48 小时基本就没你的份了(推断,依据是它 4 小时建库、28 小时发帖,爆发也只持续了三四天)。

什么情况说明看错了:① 下一次某个审美热帖之后,有人照这个打法 24 小时内发了技能,结果没过几百 star,说明这次靠的是苹果尺寸图这个题材本身,打法不能复制;② agent 技能目录站流量下滑、各家 agent 自带了类似的画图能力,技能这个形态的红利就过去了;③ 反过来,如果 blueprint、图纸这一类技能接连有人做出上千 star,说明这个品类比这里估的宽,第 3 条路要更快动手。

数据与出处

GitHub:enesozturk/dimensional-drawing 仓库页、README 与每日 star(10-25 到 11-06,11-06 当天 1,890 star / 135 fork);同类仓库 star 数(11-06)。X:@avstorm 10-23 帖、@enesozturkdev 10-24 帖及评论(互动数 11-06)。Trendshift:HTML 语言榜(10-25 到 10-27)。skills.sh 安装数(11-06)、ui-skills.com 收录页。themenonlab.blog 测评(10-26)。Instagram、Facebook、YouTube 搬运视频;Reddit r/BestGitHubRepos 帖(正文未读到)。Specs 定价来自 Figma 插件周报。avstorm 本人有没有转发 Enes 的帖子未核实;搬运视频播放量未取。写「推断」「未核实」的地方是推断和未核实。

GitHub 仓库 ↗

研究底稿:竞品表、获客证据、完整研究报告
竞品
名字在哪上线规模它和这家不同在哪
Specs(原 EightShapes Specs)其他2022 前后设计系统圈标杆 Figma 插件,约 $8/人/月,zeroheight 2025 最佳插件提名Figma 内自动标尺寸/anatomy 用于交付;它从代码/截图出发由 agent 画,追求可发布的苹果图纸审美和变量化表达
Figma Dev Mode / Redlines 插件大厂功能2019 / 2023Figma 内置,覆盖最广像素级测量标注,功能性;没有单页图纸成品和动效
Figma Community skill redline-spec其他2026未核实在设计稿上叠尺寸线,无工程图版式和自画视频
moguzbulbul/blueprint-animation开源2026-09-27430 star同为蓝图+尺寸线+动画的设计技能,但讲改版 before→after,没借到苹果尺寸图这个公认审美标的
muthuishere/hand-drawn-diagrams开源2026-03-2185 star单色手绘架构/流程图,不针对 UI 组件
BubbleBrainBB/BB-Video开源2026-10-05138 star多风格代码做视频,blueprint 只是 32 种风格之一
phun-ky/speccer、component-anatomy开源2018 / 2026-0621 / 25 star在 DOM 上给组件画标注用于文档,不走 agent、不出图纸
用户从哪来
  • 查实 蹭热帖(X 设计大号 @avstorm 夸苹果尺寸图):avstorm 10-23 08:19 发帖 13.9 万浏览;Enes 10-23 12:20 建库,README 与 X 帖致谢其'whose post started this'
  • 查实 作者自己的 X 帖 + 自画视频:10-24 发帖,4,211 粉拿到 143K 浏览、3,316 赞、4,124 收藏;repo homepage 指向此帖;star 次日起爆
  • 查实 GitHub 站内榜(Trendshift HTML 语言榜):10-25 #6、10-26 #1、10-27 #3,10-26 单日 +540
  • 查实 短视频搬运号(Instagram/Facebook/YouTube):至少 4 条 IG reel、PHfreecoder 等 FB 视频、2 条 YouTube Shorts 和 1 条讲解视频
  • 查实 技能目录站与测评博客:skills.sh(686 安装)、ui-skills.com 收录;themenonlab.blog 10-26 长文;Reddit r/BestGitHubRepos 帖
  • 推断 大号转发 Enes 帖子:avstorm 等是否转发/引用未查到

enesozturk/dimensional-drawing 研究报告

渠道:GitHub | 调研日:2026-11-06 | 数据卡:cards/gh_enesozturk__dimensional-drawing.json

一句话

一个 Agent 技能包(SKILL.md):让 Claude / Codex / Cursor 等 agent 把一个 UI 组件(卡片、对话框……)或实体产品画成苹果官方配件尺寸图(Apple accessory dimensional drawings)那种单页、单色的工程图纸;另附一个"动效"技能,把图纸做成约 10 秒"笔画自己画出来 + 镜头推移"的短片(Claude Motion artifact 导出 MP4,或 Playwright + ffmpeg 无头渲染)。MIT,纯 HTML 输出,无收费。

结论

它跑出来,是因为踩准了一条 X 设计圈的热帖、用 4 小时把它做成能装进 agent 的技能,再配一段会自己画出来的视频去发帖。审美格式(苹果尺寸图)是借来的,自带传播力;作者自己的 X 帖(143K 浏览、4.1K 收藏)是主要源头;之后 Trendshift HTML 榜第 1、Instagram/Facebook/YouTube 短视频搬运号和技能目录站接力。star 曲线是典型的一次性爆款:第 2–4 天涨了约 1,300,之后每天 25–40。

时间线与增长数据

时间 (UTC)事件来源
2026-10-23 08:19设计师 Andreas Storm(@avstorm,20.4 万粉,iconists 联创)发帖"Apple has an incredible library of detailed hardware dimension drawings",附苹果尺寸图页面链接;13.9 万浏览、3,008 赞、1,813 收藏fxtwitter API 读 x.com/avstorm/status/2113545710469554310
2026-10-23 12:20约 4 小时后,Enes 建库GitHub API created_at
2026-10-24 09:41最后一次 push(之后再没更新)GitHub API
2026-10-24 16:45Enes(@enesozturkdev,4,211 粉,WalletConnect 工程师)发帖"Made a skill for dimensional drawings of UI components",附动效视频,自回复里致谢 @avstorm;14.3 万浏览、3,316 赞、168 转、4,124 收藏(收藏比赞还多,是"先存着回头装"的工具帖典型)fxtwitter API
10-25+156 star,Trendshift HTML 榜 #6trendshift.io/repositories/320109
10-26+540 star,Trendshift HTML 榜 #1;themenonlab 技能测评博客发长文Trendshift;themenonlab.blog
10-27+242(我们库 10-26→10-27 记录 +522,口径时差)Trendshift;github 库 repo_day
10-28 起日增从 +136 回落到 +25~40github 库 repo_day
11-061,888 star / 135 fork(GitHub API 当日);gain_7d=286GitHub API;数据卡
  • 我们库的 trending_days_any=0 是因为库只收建库满约 60 天的 trending,不代表它没上榜;Trendshift 显示它在 HTML 语言榜连续上榜(#6、#1、#3、#17、#11、#19)。
  • 实际使用量:skills.sh 显示两个技能合计 686 次安装(2026-11-06,skills.sh/enesozturk/dimensional-drawing);GitHub 代码搜索能看到至少 10 个仓库把它的 SKILL.md 原样收进自己的技能合集(forge-ui/forge、podo/design-agent-skills、2lab-ai/soma-work、CAFECA-IO/SinoBee、ain3sh/.agents、aktonay/skillz、ktg-one/goodai-mate 等)。star:安装 ≈ 2.7:1,大部分 star 是"收藏"。
  • 作者其他库:react-native-hold-menu 1.5K、rn-swipeable-panel 958 等 React Native 动效老作品;两个月前的同类 agent 技能 thinking-logos 只有 54 star——说明这次不是靠作者既有粉丝,而是题材 + 那条帖子。

用户从哪来(增长手段)

  1. 蹭热帖 / 借势(确认):@avstorm 的苹果尺寸图帖子 10-23 早上发,4 小时后建库,README 和 X 帖都公开致谢 avstorm"whose post started this"。avstorm 的帖子把"苹果尺寸图好美"这个审美情绪先在设计圈点燃了,Enes 提供了"在你自己的组件上复现"的出口。avstorm 本人是否转发/引用了 Enes 的帖子:未核实。
  2. 作者自己的 X 帖 + 自画视频(确认,主源头):4K 粉的账号拿到 14.3 万浏览,远超其粉丝量,靠的是推荐流;视频(对话框图纸自己画出来、图层爆炸分开)是主要钩子。repo homepage 直接指向这条帖子。评论区有人(@techduckyyy)说当天就用它给客户视频做了开场镜头——技能的产出物本身又是可以发的内容,形成二次传播。
  3. GitHub 站内榜单(确认):Trendshift HTML 榜 #1(10-26);HTML 是小语言榜,门槛低,几百 star 就能登顶,这对 star 第二波有贡献。
  4. 短视频搬运 / 内容农场(确认):Instagram reels(De8UoUAkURE、DfYupuZAvYN、De-fDa-gFYl、De7DBF8iR9p)、Facebook 页面视频(PHfreecoder 等)、YouTube Shorts(VjuHAIesm2A、VOMoUc4YpqU)和 YouTube 讲解视频(me8t4cndxIw)都在搬"GitHub 好项目"。这些是第三方"开源推荐号"自发搬运,作者没有投入。
  5. 技能目录与博客(确认):ui-skills.com、skills.sh 收录;themenonlab.blog 10-26 写了长文;Reddit r/BestGitHubRepos 有帖(标题写"943 stars",即 10-26/27 前后发的,正文被 403 拦截未读)。
  6. 广告、付费推广:未发现,开源免费项目,不涉及。

竞品

名称在哪上线规模和它不同在哪
Specs(原 EightShapes Specs,Nathan Curtis)Figma 插件2022 前后设计系统圈标杆插件,zeroheight 2025 最佳插件提名;约 $8/人/月在 Figma 里给组件自动标尺寸/间距/anatomy,面向设计系统交付;dimensional-drawing 面向 agent、从代码/截图出图,并且追求"苹果图纸"的审美和变量化表达
Redlines、Figma Dev Mode 标注Figma 插件 / 大厂功能2019 起 / 2023Figma 内置,覆盖面最大是像素级的测量标注,功能性工具;没有"可以发出去好看"的成图
Figma Community skill "redline-spec"Figma(技能)2026未核实同样是 agent 技能画尺寸线叠加层,但只是覆盖在设计稿上,没有单页工程图格式和动效
moguzbulbul/blueprint-animation开源(Claude Design 技能)2026-09-27430 star最接近的前辈:同样是"蓝图 + 尺寸线 + 动画"讲 UX 改版,同样受 X 设计师帖启发;但讲的是 before→after 改版,没有借苹果尺寸图这个公认的审美标的,star 少一个量级
muthuishere/hand-drawn-diagrams开源(Claude/Codex 技能)2026-0385 star单色手绘风的架构/流程图,不针对 UI 组件
BubbleBrainBB/BB-Video开源(技能)2026-10-05138 star32 种风格的代码做视频,"blueprint"只是其中一种
phun-ky/speccer、julien-deramond/component-anatomy开源(JS 库)2018 / 2026-0621 / 25 star在 DOM 上给组件画 anatomy 标注,给设计系统文档用;不走 agent,不出图纸
wheresryan22/anatomy-figures开源2026-10-0929 starClaude 画的等轴测"机器解剖图",审美相近但对象不是 UI 组件

结论:"给组件标尺寸"这件事有成熟的 Figma 插件和大厂功能,但都是交付工具;"把它做成一张漂亮、可以发出去的苹果式图纸 + 自画视频"的,在它之前没有。

跟风者

  • 3xC1ibR/system-drawings(2026-10-27 建库,即爆发后第二天):"把系统做成可探索的三维技术图纸,1970 年代 IBM/NASA 文档风格",同样是 agent 技能 + 白纸黑线 + 标题栏;8 star,跟风明显但没起来。
  • 大量技能合集仓库原样收录它的 SKILL.md(见上),属于搬运而非重做。

为什么是它跑出来

  1. 借来了一个自带共识的审美标的:"苹果官方配件尺寸图"本身就让设计师心动(avstorm 帖子 3K 赞 1.8K 收藏证明了这点),用户不需要被说服"这个好看"。
  2. 时机:4 小时跟进热帖。情绪还在峰值时就交付了"在你自己的组件上做一张"的工具,并公开致谢原帖作者,顺着同一波受众扩散。
  3. 产出物本身是可以发的内容:一张漂亮的单页图纸 + 10 秒自画视频,用户装了就能发帖、做客户视频开场——工具自己带传播。搬运号也愿意搬,因为视频本身好看。
  4. 规则写得好、显得"有想法":单色、"槽位而非内容"、"变量而非数字"(R2 = R1 − B − S6)、未知就标 [TBD] 不臆造。测评博客专门夸这一点——让它从"好看的玩具"变成"值得收藏的方法论",这是 4K 收藏 > 3.3K 赞的原因之一。
  5. 装起来零门槛、跨 agent:cp 一个文件夹,或 npx skills add;Claude Code / claude.ai / Codex / Cursor 都能用,赶上 2026 年 agent 技能目录站(skills.sh、ui-skills.com)的流量红利。
  6. 榜单杠杆:语言标成 HTML,在 Trendshift 小语言榜很容易登顶,给了第二波曝光。

差异化

差异化不在功能(测尺寸 Figma 早就有了),而在格式和审美:把"组件标注"重新包装成"苹果式工程图纸",并把它变成会自己画出来的视频。这个差异化正是它跑出来的原因——同类 blueprint/尺寸线技能(blueprint-animation 430、hand-drawn-diagrams 85、system-drawings 8)功能相近,但没有一个借到公认的审美标的,也没有踩上热帖的时间点。

能借鉴的

  • 盯 X 设计圈的"审美热帖"(某家大厂的某种文档/图形风格被大号转起来),24 小时内做成 agent 技能,公开致谢原帖作者,让流量顺着同一群人流过来。
  • 技能的产出物要能直接拿去发:有图、有短视频,用户和搬运号才会替你传播;README 第一屏就放会动的 GIF。
  • 把审美写成硬规则(单色、变量、[TBD]),让一个风格技能看起来像方法论,收藏率更高。
  • 选一个小语言标签(HTML)冲 Trendshift / GitHub 语言榜。
  • 局限:这种打法的 star 衰减很快(第 5 天起日增掉到 1/10),作者 10-24 之后再没更新;适合刷名气,不适合做持续的产品。

还不确定的

  • avstorm 或其他设计大号有没有转发/引用 Enes 的帖子(x-radar 本地语料对这些词 30 天内 0 条,没能查到转发链)。
  • Reddit r/BestGitHubRepos 帖子的互动量(403 未读到)。
  • 实际持续使用量:skills.sh 686 次安装只覆盖走 CLI 的那部分,git clone 和 claude.ai 上传的用户数不可知。
  • Instagram/Facebook 搬运视频的播放量未取。

出处

文章由 AI 根据公开数据和我们每天采集的数据写成,数字带出处,推断已标明