Nó làm gì
Bạn đưa vào một UI component, nó trả về một bản vẽ kỹ thuật một trang. Đó là toàn bộ ý tưởng của dimensional-drawing, gọn trong một câu.
Cụ thể hơn: Apple công bố bản vẽ dimensional cho từng thiết bị để bên làm phụ kiện biết chính xác ốp lưng cần dày bao nhiêu, khoét lỗ ở đâu. Bản vẽ kiểu đó có đặc điểm rất riêng: một tờ giấy, vài góc nhìn, mấy vòng tròn detail phóng to chỗ góc bo, số đo chi chít. Repo này dạy agent (Claude, Cursor, Codex…) vẽ component của bạn theo đúng ngôn ngữ thị giác đó.
Một cái card hay dialog biến thành spec sheet mà đưa cho ai cũng dựng lại được kiến trúc của nó: padding, gap, corner radius, thứ tự layer, cách nó nằm trong viewport. Nội dung chữ và copy bị bỏ ra ngoài có chủ đích, nên bản vẽ vẫn đúng khi text thay đổi. Nghe hợp lý: padding của cái card không đổi chỉ vì bạn sửa tiêu đề.
Trong repo có hai skill. Một cái vẽ bản tĩnh. Một cái biến bản tĩnh thành phim khoảng 10 giây, kiểu bút vẽ từng nét trong khi camera lia qua tờ giấy.
Vì sao 469 sao trong hai ngày
Repo tạo ngày 23/10/2026, cập nhật ngày 24/10/2026. Tức là nó mới ra lò, và 469 sao gần như dồn hết vào một hai ngày đầu. Con số này nói về độ tò mò, không nói gì về độ chín của code.
Điểm khác biệt nằm ở chỗ nó không phải một thư viện vẽ chart hay một tool design-to-code. Nó là một bộ SKILL.md, tức định dạng skill cho agent, đóng gói kèm ví dụ HTML thật. Bạn không cài package, không import gì vào codebase. Bạn copy thư mục vào chỗ agent đọc skill rồi ra lệnh.
Và cái làm tôi dừng lại lâu nhất là bộ “house rules” trong README. Nó ép bản vẽ theo kỷ luật khá gắt:
- Đơn sắc, chỉ dùng xám, phân biệt các thành phần bằng độ dày nét, nét đứt và hatch
- Vẽ kiến trúc chứ không vẽ nội dung, nhãn kiểu
TITLE SLOT · FLEX,ACTION · HUG,CONTENT SLOT · FILL - Dùng biến thay vì số cứng:
S1,R2,H1 = 2·S1 + H3,R2 = R1 − B − S6 - Không mang thương hiệu, tên trung tính kiểu
UI-CARD-001 - Không được bịa giá trị, chỗ chưa biết để nguyên
[TBD]
Riêng cái luật cuối là thứ nhiều tool sinh tài liệu tự động nên học. Agent rất giỏi đoán bừa một con số trông hợp lý. Ở đây nó bị cấm.
Cài và chạy thử
Với Claude Code, clone repo rồi copy skill vào thư mục skill của Claude:
git clone https://github.com/enesozturk/dimensional-drawing
cp -r dimensional-drawing/skills/* ~/.claude/skills/
Với claude.ai hoặc Claude desktop: zip một thư mục skill (ví dụ skills/dimensional-drawing) rồi thêm trong Settings → Capabilities → Skills.
Với agent khác (Codex, Cursor, Gemini CLI…), README chỉ hai đường: dùng CLI skills, hoặc trỏ thẳng agent vào các file SKILL.md.
npx skills add enesozturk/dimensional-drawing
Sau đó chỉ cần nói và chỉ nguồn. Nguồn có thể là file trong repo, một story Storybook, một URL, hay ảnh chụp màn hình:
Make a dimensional drawing of the `Card` component in `src/components/Card.tsx`
Draw the anatomy of our settings dialog, same style as the examples
Kết quả là một title block ghi các biến chính ở trên, rồi tới tờ giấy dày đặc: notes, plan view, exploded layers, các detail view (góc lồng nhau, bán kính bo, thân), và bảng biến. README nói nó vẽ được cả đồ vật thật, theo góc nhìn thứ ba, đơn vị mm, chỉ dùng spec đã công bố. Ví dụ họ đưa ra là cái bình giữ nhiệt.
Phần motion thì có hai đường. Có Claude thì bảo “animate this drawing”, Claude dựng trong Motion artifact rồi bạn export MP4. Không có Claude thì dùng adapter headless:
cd skills/dimensional-drawing-motion/adapters/headless && npm install
node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4
Cần Node 18+ và ffmpeg. README ghi rõ transcript gồm bốn nhịp: close-up phần header khi nét đang vẽ, lùi ra plan view, các layer nhấc khỏi plan thành exploded view (nét trước, fill sau để không bị flash), rồi lùi ra toàn tờ khi các view còn lại vẽ nốt.
Ai nên dùng
Team đang maintain một design system và mệt vì mấy trang “anatomy” trong Figma hoặc Storybook lúc nào cũng lệch so với code thật. Bạn có component với spacing scale, radius scale, và muốn một tờ spec sinh thẳng từ source file để nhét vào PR hoặc tài liệu handoff. Đó là use case rõ nhất.
Một trường hợp khác: làm việc với dev mới hoặc team outsource, cần giải thích “cái dialog này cấu trúc thế nào” mà không phải mở Figma share link. Một tờ giấy monochrome, có nhãn biến, dễ đọc hơn nhiều so với ảnh chụp màn hình có đầy chữ.
Còn nếu bạn chỉ cần xuất spec ra JSON để tool khác đọc, cái này không dành cho bạn. Nó xuất ra bản vẽ để người nhìn.
So với mấy hướng khác
Tôi không dám so trực tiếp vì đây là định dạng skill cho agent, không phải thư viện có API để benchmark. Nhưng có thể nói thế này: hướng “sinh tài liệu từ code” thường đi qua Storybook addon hoặc tool extract prop types rồi render bảng. Chúng mạnh ở chỗ chính xác tuyệt đối vì đọc AST, nhưng đầu ra là bảng chứ không phải bản vẽ, và gần như không diễn đạt được quan hệ hình học kiểu “cái này hug, cái kia fill”. dimensional-drawing đi ngược: đầu ra là hình, còn độ chính xác phụ thuộc agent đọc code đúng tới đâu. Đánh đổi rõ ràng.
Với phần motion, README tự ghi là tối ưu cho Claude Motion, và các thư viện animation khác (Remotion, Motion Canvas, GSAP, Lottie) chưa được test. Đừng đọc repo rồi tưởng cắm được vào pipeline Remotion sẵn có.
Ưu điểm và mấy chỗ cần biết
Ưu điểm thật: bộ house rules rõ ràng và có triết lý, không phải prompt chung chung. Có ví dụ HTML chạy được ngay trong skills/dimensional-drawing/examples, mở lên là thấy chuẩn đầu ra trông thế nào. License MIT, thoải mái dùng. Và ý tưởng “giữ nguyên biến, cấm bịa số” là thứ đáng copy sang các tool sinh tài liệu khác.
Mấy chỗ cần lưu ý. Repo một ngày tuổi tính đến lúc viết, 469 sao đến từ một đợt lan truyền chứ chưa qua thử thách thời gian. Tài liệu nằm gần hết trong README, không có docs site. Ngôn ngữ chính ghi là HTML, hợp lý vì sản phẩm là file HTML một trang, nhưng nghĩa là bạn đừng chờ một codebase TypeScript có type đầy đủ. Phần motion phụ thuộc khá chặt vào Claude Motion, đường headless có test với Playwright (Chromium) và ffmpeg thôi. Còn một điều nhỏ: repo không có mô tả, không có topics, nên tìm trên GitHub khá khó nếu không biết tên.
Tôi thấy tò mò nhất là chuyện skill này hoạt động ra sao khi component của bạn có spacing không theo scale, kiểu padding: 13px ở đâu đó. Luật “không bịa giá trị” sẽ đẩy nó về [TBD] hay nó tự sinh biến mới, chưa rõ. Cái đó phải thử mới biết.
Nếu bạn đang có sẵn Claude Code và một design system, clone về, copy hai thư mục skill, rồi thử vẽ đúng một component khó nhất trong hệ thống. Mất khoảng 5 phút để biết nó có ích với bạn hay không. Repo ở đây: enesozturk/dimensional-drawing.
Câu hỏi thường gặp
dimensional-drawing là gì và dùng để làm gì?
Đây là một bộ SKILL.md dạy agent (Claude, Cursor, Codex…) vẽ bản vẽ kỹ thuật một trang cho UI component, theo đúng ngôn ngữ thị giác của bản vẽ dimensional kiểu Apple công bố cho phụ kiện. Đầu ra là spec sheet để người nhìn, không phải JSON hay bảng prop types.
Cài dimensional-drawing cho Claude Code thế nào?
Clone repo rồi copy skill vào thư mục skill của Claude bằng lệnh git clone https://github.com/enesozturk/dimensional-drawing và cp -r dimensional-drawing/skills/* ~/.claude/skills/. Với claude.ai hoặc Claude desktop thì zip thư mục skill rồi thêm trong Settings → Capabilities → Skills. Với agent khác có thể dùng npx skills add enesozturk/dimensional-drawing.
Bản vẽ có bịa số đo khi thiếu thông tin không?
Không. Một trong các house rules trong README là không được bịa giá trị, chỗ chưa biết để nguyên [TBD]. Bản vẽ cũng dùng biến thay vì số cứng như S1, R2, H1 = 2·S1 + H3, nên vẫn đúng khi spacing scale thay đổi.
