tl;dr: hãy để agent của bạn giao tiếp bằng hình ảnh thay vì những bức tường chữ nghĩa.
1npx skills add humanlayer/skills --skill show-me
Nhẹ và nhanh hơn HTML, đủ tốt cho hầu hết các bài toán kiểu dev.
Coding agent thì gần như không thể đọc nổi
Cựu CEO của Reddit:
https://x.com/yishan/status/2086534431075098628
Mario Zechner, tác giả của pi:
https://x.com/badlogicgames/status/2087068077309542889
Connor từ Replicas:
https://x.com/connortbot/status/2081881377147109413
Dillon Mulroy thậm chí tạo một skill phổ biến một skill từ [@backnotprop](https://x.com/@backnotprop) để yêu cầu model đơn giản hóa ngôn ngữ.
https://x.com/dillon_mulroy/status/2079238358358778142
Nội dung như sau:
Hãy diễn đạt lại tin nhắn cuối cùng của bạn. Ngừng dùng thuật ngữ chuyên môn và nói một cách mạch lạc. Hãy nói đơn giản và ngắn gọn hơn, như một người đang trò chuyện với người khác.
mình phát ngán cảnh này rồi
Các agent thông minh hơn trên lý thuyết, nhưng trải nghiệm sử dụng chúng lại tệ đi rõ rệt theo chiều hướng này.
Điều mà mọi người từng yêu thích ở Claude - giọng nói, tính cách, "linh hồn" của nó - đã bị rửa trôi trong hầm RL.
Sol thì đỡ cringe hơn một chút, nhưng vẫn thường xuyên dội vào mặt chúng ta những bức tường thuật ngữ khiến người đọc đờ đẫn.
Đây là một phản hồi mình nhận được gần đây. Chuyện này xảy ra nhiều lần mỗi ngày.
đề xuất của mình: show me
Tụi mình đã mày mò với các công cụ nội bộ để cải thiện điều này, cụ thể là cho coding, và đăng tải chúng trong một skill tên là show-me.
Nó đã có mặt trên humanlayer ngay hôm nay, và nếu bạn muốn dùng nó trong bất kỳ coding agent nào khác - bạn có thể tải nó ở đây:
1npx skills add humanlayer/skills --skill show-me
Hoặc, lấy bản tích hợp sẵn trong humanlayer có html inline và diagrams được hỗ trợ đầy đủ:
1brew trust humanlayer/humanlayer2brew tap humanlayer/humanlayer3brew install humanlayer
Nếu bạn từng xem bài nói của Coda Hale về trực giác và sự chú ý trong hệ thống hạ tầng, thì điều này có phần được lấy cảm hứng từ đó:
- phân tích thông tin rất khó và tốn sức
- vỏ não thị giác của bạn đã được rèn luyện qua hàng triệu năm để xử lý thông tin hình ảnh phong phú một cách dễ dàng
- hãy tối ưu công cụ cho phù hợp
Cũng như chiếc rìu phải vừa với bàn tay con người mới hữu dụng, phần mềm phải vừa với tâm trí con người mới hữu dụng
/show-me nhắc agent dùng hình ảnh trực quan ngắn gọn để giải thích điều đang xảy ra, thay vì những bức tường chữ nghĩa.
Điều này thực sự rất tốt cho thiết kế chương trình - giai đoạn mà nhiều người hiện nay bỏ qua, nhưng mình nghĩ là vô cùng cần thiết. Bạn nên thảo luận về hình dạng của code (các type, signature, call stack) trước khi các agent bắt tay vào viết.
Các kỹ thuật tương tự cũng có thể dùng để khám phá các diff lớn sau đó, nhằm hiểu nên đào sâu vào đâu trong lúc review.
Bên trong có gì
Cây component
Ý tưởng tương tự ở phía frontend, giữ lại các state hook và ranh giới module quan trọng, loại bỏ mọi thứ khác.
Mình đã chia sẻ cái này trên Twitter hồi tháng 12/2025:
https://x.com/dexhorthy/status/1998968236617199803
Call stack
Cho công việc orchestration hoặc control-flow, hoặc bất kỳ bài toán backend nào, Dillon đã cho chúng ta kiểu "call stack" này.
https://x.com/dillon_mulroy/status/2059985696148849025
Tanishq còn viết một công cụ để tính toán các call stack trực tiếp từ AST
https://x.com/tanishqk/status/2085800689129935342
Biểu đồ
Một kiểu kinh điển. Nếu giao diện chat của bạn hỗ trợ mermaid inline, những thứ này có thể giúp ích rất nhiều. (Đôi khi chúng vẫn là rác, nhưng thường thì vẫn tốt hơn đọc chữ)
Có rất nhiều lựa chọn ở đây. Tụi mình thích biểu đồ trạng thái và biểu đồ tuần tự nhất.
Bố cục file
Một cây thư mục nông, mỗi mục một dòng mô tả trách nhiệm. Hữu ích để biết "thứ này nằm ở đâu" và để xác định phạm vi khi refactor.
Pseudocode
Đặc biệt với mấy thứ mang tính thuật toán, pseudocode có thể ngắn gọn hơn.
Types và signatures
Hình dạng của code trước khi bất kỳ dòng code nào tồn tại - thứ quá nội bộ để viết vào tài liệu kiến trúc, nhưng agent vẫn có thể làm sai.
1interface Item {2 id: ItemId3 parentId: ItemId | null4 // ...5}67interface Cursor {8 position: ItemId9 direction: 'up' | 'down'10 // ...11}1213resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null
Cú pháp diff
Bạn cũng có thể dùng cú pháp diff cho việc này, nếu phần lớn nội dung không thay đổi:
Cho một thay đổi component:
Cho một thay đổi call-tree:
Cho một thay đổi file-layout:
Và cho một thay đổi state hoặc control-flow, khi hình dạng là pseudocode thay vì code thật:
Mockup HTML
HTML đã thay thế Figma trong phần lớn công việc prototyping của tụi mình. (thật ra mình chưa bao giờ giỏi Figma lắm)
Biểu đồ HTML
Đôi khi thứ bạn cần là một biểu đồ hoặc một bản giải thích.
Trong humanlayer, tụi mình cho phép agent đính kèm HTML trực tiếp trong các phản hồi của trợ lý.
Nhưng bạn cũng có thể chỉ cần mở nó trong trình duyệt của mình.
Nguồn cảm hứng khác
Mình cũng muốn gửi lời khen tới @mattpocockuk vì các bản giải thích html được tạo ra bởi skill /teach của anh ấy - rất hay.
thử ngay đi
1npx skills add humanlayer/skills --skill show-me
Sau khi cài skill, hãy gọi /show-me hoặc yêu cầu agent dùng skill show-me. Hướng nó vào một route, service, feature, pull request, hoặc chủ đề hiện tại, hoặc chỉ cần dùng nó để yêu cầu model diễn đạt lại một câu hỏi hay câu khẳng định.
nội dung này nhiều quá. show me.
hoặc
/show-me như một bản giải thích html
Hãy cho tụi mình biết bạn nghĩ gì! Tag @humanlayer_dev hoặc @dexhorthy kèm kết quả của bạn hoặc những gì bạn đã tùy chỉnh/thêm vào và cùng nhau bàn luận nhé!
GIF
