<- all tokdocs
2026.10.26@github.signals

The video calls dimensional-drawing an "open source tool"; the repository is two Markdown skill files, two example HTML sheets and a 4 KB Node renderer, and the drawing is produced by your agent

AI
Watch on TikTok

View on TikTok ->

The artifact is a 40.93 s portrait clip, 720x1280, QuickTime/MP4 container (mov,mp4,m4a,3gp,3g2,mj2), HEVC Main video at 30/1 fps and 209,141 bps over 1,228 frames, HE-AACv2 audio at 44,100 Hz stereo and 64,279 bps running 40.87 s, 1,433,941 bytes total at an overall 280,249 bps, format id bytevc1_720p_280244-1; posted at epoch 1792988956, which is 2026-10-26T04:29:16Z, by handle github.signals (uploader id 7614639676569895957, channel nickname "Github Signals"), credited to the account's own "original sound" by artist "Github Signals", with an 848-character description that ends in the link https://github.com/enesozturk/dimensional-drawing and the tags #UIDesign #DesignTools #DesignSystems #CodingAgents #ClaudeCode; at the capture time recorded by the mtime of metadata.json, 2026-10-26T23:22:39Z, the counts read 42,800 views, 2,358 likes, 2 comments and 363 reposts. I read frames 001, 003, 005, 007, 009, 011, 012, 013, 015, 017, 019 and 020 from the 20 frames sampled at 2 s intervals, against a transcript of 108 words in 6 segments. Every frame from 001 through 019 shows the same thing: a simulated desktop browser window floating over a blurred backdrop, tab title "GitHub - enesozturk/dimensional-drawing · GitHub", address bar reading github.com/enesozturk/dimensional-drawing, a file row reading "README.md | Dimensional drawing + motion skills | 2 days ago", and the README itself scrolling slowly while a separate hero image pans above it. The README text visible verbatim across those frames is "Give it a UI component, get back a one-page technical drawing of it.", "Paddings, gaps, corner radii, layers and viewport placement, measured and labeled like Apple's dimensional drawings.", the link row "Install · Use it · Make it move · Examples", the paragraph "Apple publishes dimensional drawings for every device so accessory makers can build cases that fit. They are calm, dense and beautiful: one sheet, a few views, tiny detail circles, numbers everywhere.", the paragraph beginning "This repo teaches your agent to draw your components the same way", the heading "What's inside", a code block listing skills/, dimensional-drawing/, SKILL.md, examples/, dimensional-drawing-motion/, templates/, adapters/, claude-motion.md and headless/, and the "The house rules" table rows "Monochrome: grays only; things are told apart by line weight, dashes and hatches", "Architecture, not content: TITLE SLOT · FLEX, ACTION · HUG, CONTENT SLOT · FILL", "Variables, not numbers: S1, R2, H1 = 2·S1 + H3, R2 = R1 − B − S6", "Unbranded: neutral names like UI-CARD-001" and "Never invent values: unknowns stay [TBD]"; burned-in yellow-and-white caption words track the voiceover ("IS THE", "OPEN-SOURCE TOOL", "INTO A PRECISE", "IT GENERATES A SINGLE", "USING VARIABLE CODES.", "DRAWINGS TO CREATE", "TO WATCH THE LINES", "AND THE LAYERS EXPLODE", "GUIDE THAT STAYS", "WAY TO DOCUMENT"), and frame 020 at roughly 38 s cuts to a black end card with the account avatar and the text "Follow for more open-source projects / @GithubSignals". No terminal, no editor, no agent session, no prompt and no freshly generated sheet appears in any frame I read; every drawing shown is one of the static images already embedded in the README. The spoken argument is that an open source tool converts any UI component into a precise, single-sheet, monochrome, Apple-style technical blueprint using variable codes, that the sheet can be animated into an exploded three-dimensional view, and that the result stays accurate when copy changes. The last transcript segment ends at 36.02 s against a 40.87 s audio stream, so the transcript stops 4.85 s short of the audio with no segment timestamped past the end; that trailing stretch matches the silent follow card, and nothing in the transcript is a past-the-end hallucination.

"Open source tool" overstates what is in the repository

At 0.00 s the video says "Dimensional Drawing is the open source tool that turns any user interface component into a precise technical blueprint." The repository is open source under MIT, and the GitHub REST API confirms license.spdx_id of MIT with Copyright (c) 2026 Enes Ozturk in the LICENSE file. The word "tool" is where the compression happens.

The full file tree at commit 5c45743 contains fifteen blobs. Three of them are instructions written in Markdown for a language model: skills/dimensional-drawing/SKILL.md at 8,684 bytes, skills/dimensional-drawing-motion/SKILL.md at 5,941 bytes, and skills/dimensional-drawing-motion/adapters/claude-motion.md at 2,248 bytes. Two are finished example outputs, examples/card-sheet.html at 23,067 bytes and examples/dialog-sheet.html at 25,651 bytes. The only executable code in the whole project is the headless rendering adapter: render.mjs at 4,033 bytes, player.html at 2,027 bytes, a package.json at 499 bytes whose single dependency is playwright: ^1.47.0, plus base.css at 1,982 bytes and scene-dialog.js at 23,949 bytes. The remaining four blobs are the README, a .gitignore, the LICENSE and roughly 17 MB of PNG, GIF and MP4 assets.

Nothing in that list parses a component or measures anything. The README says so directly: "This repo teaches your agent to draw your components the same way." The drawing is produced by whatever model reads SKILL.md. The repository supplies the house rules, a code system and two worked examples to copy from. Calling it a tool implies a program you run against a component and get a sheet back, and no such program exists in the repository.

The install path the video never mentions is an agent skill install, and it depends on which agent you run

The video gives no installation detail at all, and the description links only to the repository root. The README's Install section gives three paths. For Claude Code: git clone https://github.com/enesozturk/dimensional-drawing followed by cp -r dimensional-drawing/skills/* ~/.claude/skills/. For claude.ai and Claude desktop: zip a skill folder such as skills/dimensional-drawing and add it under Settings, Capabilities, Skills. For anything else, including Codex, Cursor and Gemini CLI, the README points at the skills CLI with npx skills add enesozturk/dimensional-drawing, or at pointing the agent directly at the SKILL.md files.

I fetched skills.sh to confirm that CLI is real. It is the Agent Skills Directory, it describes skills as "reusable capabilities for AI agents", and its install command is npx skills add <owner/repo> across a listed set of agents that includes Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini, Cline, Goose, OpenCode, Zed and others. So the video's "open source tool" is, in practice, an agent skill you install into a model's context, and the quality of the output depends on the model reading it. The TikTok description does carry the tag #ClaudeCode, which is the closest the post comes to saying this.

"A single dense sheet" is the repository's preference, not its promise, and "precise" is contradicted by house rule 5

At 6.62 s the video says the tool "generates a single dense sheet that maps out every padding, gap, and corner radius using variable codes." Two words in that sentence do not survive the primary source.

On "single": SKILL.md says "Prefer one sheet. Add a sheet only when one can't hold it legibly; every extra sheet keeps the identical structure, and notes cross-reference (SEE SHEET 2)." The title block the skill specifies even carries a SHEETS cell. One sheet is the target, not the guarantee.

On "every" and on "precise" from the opening line: house rule 5 in SKILL.md reads "Never invent values. Anything not in the source is [TBD] (e.g. viewport margin, overflow behavior, unpublished physical dims) and is drawn as a proportional schematic." The README's house rules table states the same thing in short form: "Never invent values: unknowns stay [TBD]". A sheet with [TBD] cells and proportionally sketched regions is a deliberate and honest output, and it is not a measurement of every padding, gap and radius. The precision the video promises is bounded by what the agent can read out of the source file, story or screenshot.

The one part of that sentence the repository backs line for line is the variable codes. House rule 3 reads "Variables, not numbers. Every dimension on the drawing is a code; tables give code, variable name, value. Derived values are formulas with the result: H1 header-min = 2·S1+H3 = 64, R2 r-inner = R1−B−S6 = 11, E1 = BL+SP−Y". SKILL.md publishes the full prefix table: S# for spacing, H#, Z# and I# for heights, square sizes and icon size, B and W for border and width, R# for radius with R4 pill = h ÷ 2, Y, BL, SP and E# for shadow offset, blur, spread and envelope, and T1, V1 and MH with MH = 100vh − 2·V1. Frame 019 shows that same table rendered on screen. Verified.

"Apple Accessory Drawings" is not Apple's name for them, and the repository credits a source the video drops

At 14.50 s the video says the sheet "mimics the style of Apple Accessory Drawings to create a neutral, monochrome spec that focuses purely on structure." Apple's own page, which the README links as its north star, is titled "Download Dimensional Drawings - Accessories - Apple Developer" and carries the heading "Dimensional Drawings" with the line "Download dimensional drawings and technical specifications." The documents are distributed as PDFs, filtered by Mac, iPad, iPhone, Watch, Vision, AirPods, TV and Home, and Accessories. Apple calls them dimensional drawings, published under Accessories for accessory makers. The README phrases it correctly as "Apple's accessory dimensional drawings". The video inverts the words into a product name Apple does not use, which is the kind of phrase that sends a viewer searching for the wrong thing.

The monochrome claim holds. House rule 1 reads "Monochrome. Black line on white paper, grays only. No accent color anywhere. Tell things apart by line weight, dash pattern, hatch and light gray fill. Single light theme by design (color-scheme: light, every color explicit)."

The video also drops both attributions the README makes. The README's Thanks section credits "Apple's accessory dimensional drawings, the north star" and "Andreas Storm, whose post started this". The video never names Enes Ozturk, the author, and never names Andreas Storm. I could not reach x.com/avstorm/status/2113545710469554310 to date that post; the fetch returned HTTP 402, so I am not citing a date for it. The repository's own timeline is dated and verifiable: the GitHub REST API reports created_at of 2026-10-23T12:20:16Z, a single commit on main, 5c45743, authored 2026-10-23T14:17:55Z with the message "Dimensional drawing + motion skills", and a pushed_at of 2026-10-24T09:41:54Z. The TikTok went up at 2026-10-26T04:29:16Z, about two and a half days after that commit, which is consistent with the "2 days ago" string visible on the README file row in frames 001 through 009.

"You can even animate the sheet" skips the two things the animation actually requires

At 21.08 s the video says "You can even animate the sheet to watch the lines draw themselves and the layers explode into a three-dimensional view." The feature exists, and the video understates what it costs to use.

The motion SKILL.md front matter describes it as turning a finished sheet into "a ~10 s Apple-style motion film", and the body gives the reference scene as "11 s, 1920×1080, 60 fps", closing with "Total ~11 s. Keep films 8–15 s." The choreography the video describes is accurate to the source. SKILL.md lists stage 1 at 0 to 2.3 s as a header close-up where "The outer border draws from the top-left corner", stage 2 at 2.3 to 4.2 s pulling back to the plan view, stage 3 at 4.2 to 7.2 s where "Copies of container → body → slots morph from the flat plan matrix to the axonometric matrix and rise to their z", and stage 4 at 7.2 to 9.2 s pulling back to the full sheet.

Two qualifications the video omits. First, the primary path is Claude-specific. The README's table says "With Claude ask 'animate this drawing'. Claude builds it in the Motion artifact and you export MP4. This is the primary target and where the timing was tuned." The motion SKILL.md repeats it: the claude.ai Motion artifact is "the primary, tuned target". Second, the non-Claude path is a local toolchain install, not a button. The README gives it as cd skills/dimensional-drawing-motion/adapters/headless && npm install, then node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4, and the adapter README states the requirements as "Node 18+" and "ffmpeg on your PATH". The postinstall script in that adapter's package.json runs playwright install chromium, so the install also pulls a browser binary. The README carries an explicit caveat the video has no equivalent of: "Optimized for Claude Motion. The headless renderer is tested with Playwright (Chromium) + ffmpeg. Other animation libraries (Remotion, Motion Canvas, GSAP, Lottie…) are not tested."

On "three-dimensional view": what the skill produces is an exploded axonometric, a flat drawing convention that reads as depth. The motion SKILL.md describes it as a matrix morph inside one SVG, "One SVG, one camera", with a .dw-cam wrapper applying translate(960 − cx·z, 540 − cy·z) scale(z). There is no 3D scene and nothing to orbit. The drawing SKILL.md calls the static version an "exploded axonometric of the layer stack with labels and leaders on the left (canvas → [scrim] → shadow → container → inset surfaces → slots & controls)".

"Stays true even when the text changes" is the claim that checks out exactly

At 26.40 s the video says "It gives developers a clear architectural guide that stays true even when the text changes." The README states the design intent in nearly the same words: "Copy and content are left out on purpose, so the drawing stays true when the text changes." House rule 2 in SKILL.md operationalizes it: "Architecture, not content. For UI, draw slots, never real copy: lead box with an X, TITLE SLOT · FLEX, TRAIL / ACTION (hug), CONTENT SLOT · FILL, META SLOT · FLEX · WRAPS, LABEL SLOT, VALUE SLOT. No text-width dimensions. Size words: HUG (sized by content), FLEX (takes remaining space), FILL (parent width)." Frames 005 and 011 show that convention rendered, with a circled X glyph next to the label TITLE SLOT · FLEX and the dimension codes S1, Z1, S5 and H1 called out around the header. This is the claim the video gets right without qualification.

The video shows the README, not the thing working

Every frame from 001 to 019 is the same browser window on the same README URL at a different scroll offset, with a separate hero image panning above the text. The sheets on screen are the repository's own committed assets, assets/card-sheet.png at 494,665 bytes, assets/dialog-sheet.png at 676,927 bytes and assets/dialog-motion.gif at 7,320,467 bytes. No frame shows a component being pointed at, a prompt being written, an agent running, or an HTML sheet being opened. The README's Use it section gives the real interaction as a prompt, "Make a dimensional drawing of the Card component in src/components/Card.tsx", and that step does not appear anywhere in the video. A viewer leaves with no idea that this is a prompt-driven skill whose output quality depends on the model, which is the single most useful fact about it.

The engagement is real: 42,800 views, 2,358 likes, 363 reposts and 2 comments at 2026-10-26T23:22:39Z. So is the repository's traction. The GitHub REST API reported 1,001 stars, 63 forks, 4 subscribers and 1 open issue when I queried it at roughly 2026-10-26T23:45Z, three days after the only commit.

Key Takeaways

  • Correction: The video says at 0.00 s that this is "the open source tool." The repository at commit 5c45743 contains no program that draws a component. It contains three Markdown instruction files (dimensional-drawing/SKILL.md, 8,684 bytes; dimensional-drawing-motion/SKILL.md, 5,941 bytes; adapters/claude-motion.md, 2,248 bytes), two example HTML sheets, and one 4,033-byte Node script that only renders an already-written animation scene. The README states the mechanism: "This repo teaches your agent to draw your components the same way."
  • Correction: The video calls the source "Apple Accessory Drawings" at 14.50 s. Apple's page is headed "Dimensional Drawings" and titled "Download Dimensional Drawings - Accessories - Apple Developer". The README uses the correct phrasing, "Apple's accessory dimensional drawings".
  • Partial correction: "A single dense sheet" at 6.62 s is the skill's preference, not its contract. SKILL.md reads "Prefer one sheet. Add a sheet only when one can't hold it legibly", and the title block it specifies includes a SHEETS cell.
  • Partial correction: "A precise technical blueprint" at 0.00 s overstates house rule 5, which reads "Never invent values. Anything not in the source is [TBD] ... and is drawn as a proportional schematic." Unknown dimensions are labeled and sketched, not measured.
  • Clarification: "You can even animate the sheet" at 21.08 s omits both delivery paths. The primary one is Claude's Motion artifact on claude.ai, described in the README as "the primary target and where the timing was tuned". The alternative is a local install of Node 18+, Playwright with Chromium, and ffmpeg, run via node render.mjs.
  • Clarification: The "three-dimensional view" at 21.08 s is an exploded axonometric drawn as a 2D matrix transform inside a single SVG with one simulated camera, per the motion SKILL.md. There is no 3D scene.
  • Verified: "Using variable codes" at 6.62 s is exact. House rule 3 reads "Variables, not numbers. Every dimension on the drawing is a code", with worked formulas H1 header-min = 2·S1+H3 = 64 and R2 r-inner = R1−B−S6 = 11, and a published prefix table covering S#, H#, Z#, I#, B, W, R#, Y, BL, SP, E#, T1, V1 and MH.
  • Verified: "Stays true even when the text changes" at 26.40 s matches the README's "Copy and content are left out on purpose, so the drawing stays true when the text changes" and house rule 2's slot notation (TITLE SLOT · FLEX, CONTENT SLOT · FILL, ACTION hug, "No text-width dimensions").
  • Verified: "Monochrome" at 14.50 s matches house rule 1: "Black line on white paper, grays only. No accent color anywhere."
  • Context: The repository is MIT licensed, copyright "Enes Ozturk", created 2026-10-23T12:20:16Z with a single commit on main at 2026-10-23T14:17:55Z. The TikTok posted 2026-10-26T04:29:16Z, consistent with the "2 days ago" string in the recorded README. The API showed 1,001 stars and 63 forks at roughly 2026-10-26T23:45Z.
  • Context: The video names neither the author nor the credited inspiration. The README thanks Apple's dimensional drawings as "the north star" and Andreas Storm, "whose post started this".
  • Unverified: The date of the Andreas Storm post the README credits. x.com/avstorm/status/2113545710469554310 returned HTTP 402 and I am not citing it.
  • Context: No frame in the clip shows the skill running. All 19 content frames are the GitHub README at different scroll offsets, and every drawing on screen is a committed asset in the repository.

Resources

Published October 26, 2026. Writeup generated from a favorited TikTok.