/show-me: การแสดงผลเชิงภาพแบบกะทัดรัดสำหรับ AI ช่วยเขียนโค้ด

tl;dr ทำให้เอเจนต์ของคุณสื่อสารด้วยภาพ แทนที่จะเป็นข้อความยาวเหยียด

1npx skills add humanlayer/skills --skill show-me

เบากว่าและเร็วกว่า HTML ดีพอสำหรับปัญหาในงานพัฒนาโดยทั่วไป

เอเจนต์เขียนโค้ดแทบจะอ่านไม่รู้เรื่อง

อดีตซีอีโอของ reddit:

https://x.com/yishan/status/2086534431075098628

Mario Zechner ผู้สร้าง pi:

https://x.com/badlogicgames/status/2087068077309542889

Connor จาก Replicas:

https://x.com/connortbot/status/2081881377147109413

Dillon Mulroy ถึงกับ สร้างสกิล ทำให้สกิลจาก [@backnotprop](https://x.com/@backnotprop) เป็นที่นิยม เพื่อขอให้โมเดลทำให้ภาษาง่ายขึ้น

https://x.com/dillon_mulroy/status/2079238358358778142

เนื้อหามีดังนี้:

พูดข้อความล่าสุดของคุณใหม่ หยุดใช้ศัพท์เฉพาะแล้วพูดให้ฟังรู้เรื่อง พูดให้เรียบง่ายและกระชับขึ้น เหมือนคนทั่วไปคุยกัน

ฉันเบื่อสิ่งนี้เต็มทีแล้ว

เอเจนต์ฉลาดขึ้นในทางทฤษฎี แต่ประสบการณ์การใช้งานกลับแย่ลงอย่างเห็นได้ชัดในมิตินี้

สิ่งที่ผู้คนเคยรักเกี่ยวกับ claude - น้ำเสียง บุคลิก "จิตวิญญาณ" ของมัน ถูกชะล้างหายไปใน RL dungeon

sol ดูจะอินน้อยลงหน่อย แต่ก็ยังยิงกำแพงศัพท์เทคนิคใส่เราเป็นประจำจนอ่านแล้วตาลาย

นี่คือคำตอบที่ฉันเพิ่งได้รับมา เรื่องแบบนี้เกิดขึ้นหลายครั้งต่อวัน

ข้อเสนอของฉัน: show me

เราได้ลองเล่นกับเครื่องมือภายในเพื่อปรับปรุงเรื่องนี้ โดยเฉพาะสำหรับการเขียนโค้ด และนำมาเผยแพร่เป็นสกิลที่เราเรียกว่า show-me

ตอนนี้มันใช้งานได้จริงใน humanlayer แล้ว และถ้าอยากใช้มันในเอเจนต์เขียนโค้ดตัวอื่น - รับได้ที่นี่:

1npx skills add humanlayer/skills --skill show-me

หรือจะใช้เวอร์ชันในตัวของ humanlayer ที่รองรับ inline html และไดอะแกรมเต็มรูปแบบ:

1brew trust humanlayer/humanlayer
2brew tap humanlayer/humanlayer
3brew install humanlayer

ถ้าคุณเคยดู ทอล์กของ coda hale เรื่อง intuition ปะทะ attention ในระบบโครงสร้างพื้นฐาน นี่ก็ได้แรงบันดาลใจมาจากตรงนั้น:

• การวิเคราะห์ข้อมูลเป็นเรื่องยากและเหนื่อยล้า
• คอร์เทกซ์การมองเห็นของคุณถูกฝึกมาหลายล้านปีเพื่อประมวลผลข้อมูลภาพอันอุดมได้อย่างง่ายดาย
• ปรับเครื่องมือให้สอดคล้องกับตรงนั้น

เช่นเดียวกับขวานที่ต้องพอดีกับมือมนุษย์จึงจะใช้งานได้ ซอฟต์แวร์ก็ต้องพอดีกับจิตใจมนุษย์จึงจะมีประโยชน์

/show-me กระตุ้นให้เอเจนต์ใช้ภาพที่กระชับเพื่ออธิบายสิ่งที่เกิดขึ้น แทนที่จะเป็นข้อความยาวเหยียด

สิ่งนี้ดีมากสำหรับ การออกแบบโปรแกรม - ช่วงที่หลายคนข้ามไปในช่วงนี้ แต่ฉันคิดว่าจำเป็นมาก คุณควรพูดคุยถึงรูปร่างของโค้ด (types, signatures, call stacks) ก่อนที่เอเจนต์จะลงมือเขียนมัน

เทคนิคเดียวกันนี้ยังใช้สำรวจ diff ก้อนใหญ่ย้อนหลังเพื่อทำความเข้าใจว่าควรลงลึกเรื่องไหนระหว่างรีวิว

มีอะไรอยู่ข้างใน

component trees

แนวคิดเดียวกันบนฝั่ง frontend โดยเก็บ state hooks และขอบเขตของโมดูลที่สำคัญไว้ และตัดส่วนอื่นทิ้ง

ฉันแชร์อันนี้บน twitter เมื่อเดือนธันวาคม 2025:

https://x.com/dexhorthy/status/1998968236617199803

call stacks

สำหรับงาน orchestration หรือ control-flow หรือปัญหาแนว backend ทั่วไป dillon ให้ "call stack" รูปแบบนี้กับเรา

https://x.com/dillon_mulroy/status/2059985696148849025

Tanishq ถึงกับเขียนเครื่องมือเพื่อคำนวณมันโดยตรงจาก AST

https://x.com/tanishqk/status/2085800689129935342

ไดอะแกรม

คลาสสิกเลย ถ้าอินเทอร์เฟซแชทของคุณรองรับ inline mermaid อันนี้ช่วยได้เยอะ (บางทีก็ยังไม่ได้เรื่อง แต่ก็ยังดีกว่าอ่านตัวหนังสือ)

มีตัวเลือกเยอะมาก เราชอบ state diagrams และ sequence diagrams มากที่สุด

โครงสร้างไฟล์

แผนผังไฟล์แบบตื้น ๆ หนึ่งบรรทัดต่อความรับผิดชอบหนึ่งอย่าง ดีสำหรับตอบคำถาม "มันอยู่ตรงไหน" และสำหรับกำหนดขอบเขตการรีแฟกเตอร์

pseudocode

โดยเฉพาะเรื่องอัลกอริทึม pseudocode จะกระชับกว่า

types และ signatures

รูปร่างของโค้ดก่อนที่โค้ดจะถูกเขียนขึ้นจริง - สิ่งที่ละเอียดเกินไปสำหรับเอกสารสถาปัตยกรรม แต่เอเจนต์ก็ยังทำพลาดได้

1interface Item {
2  id: ItemId
3  parentId: ItemId | null
4  // ...
5}
6
7interface Cursor {
8  position: ItemId
9  direction: 'up' | 'down'
10  // ...
11}
12
13resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

diff syntax

คุณยังใช้ diff syntax สำหรับเรื่องนี้ได้ ถ้าเนื้อหาส่วนใหญ่ไม่มีการเปลี่ยนแปลง:

สำหรับการเปลี่ยนคอมโพเนนต์:

สำหรับการเปลี่ยน call tree:

สำหรับการเปลี่ยนโครงสร้างไฟล์:

และสำหรับการเปลี่ยน state หรือ control-flow ซึ่งรูปร่างเป็น pseudocode มากกว่าโค้ดจริง:

html mockups

HTML เข้ามาแทนที่ figma สำหรับงาน prototyping ส่วนใหญ่ของเรา (พูดตรงๆ ฉันไม่เคยถนัด figma สักเท่าไหร่อยู่แล้ว)

html ไดอะแกรม

บางครั้งสิ่งที่คุณต้องการก็คือไดอะแกรมหรือคำอธิบาย

ใน humanlayer เราให้เอเจนต์รวม HTML ลงในคำตอบของผู้ช่วยโดยตรง

แต่คุณแค่เปิดมันในเบราว์เซอร์ก็ได้

แรงบันดาลใจอื่น ๆ

ฉันอยากยกเครดิตให้ @mattpocockuk สำหรับ html explainers ที่สร้างโดยสกิล /teach ของเขา - ดีมาก

ลองไปใช้ดู

1npx skills add humanlayer/skills --skill show-me

หลังจากติดตั้งสกิลแล้ว เรียกใช้ /show-me หรือบอกให้เอเจนต์ใช้สกิล show-me ชี้ไปที่ route, service, feature, pull request หรือหัวข้อปัจจุบัน หรือจะใช้มันเพื่อขอให้โมเดลพูดคำถามหรือข้อความใหม่ก็ได้

เนื้อหาเยอะเกินไป show me

หรือ

/show-me เป็น html explainer

บอกให้เรารู้ด้วยว่าคุณคิดยังไง! แท็ก @humanlayer_dev หรือ @dexhorthy พร้อมผลลัพธ์ของคุณ หรือสิ่งที่คุณปรับแต่ง/เพิ่มเติม แล้วมาแตกไอเดียกัน!

GIF