tl;dr lass deinen Agenten visuell kommunizieren statt in Textwänden.
1npx skills add humanlayer/skills --skill show-me
Leichter und schneller als HTML, gut genug für die meisten Probleme aus der Entwicklerarbeit.
Coding-Agenten sind praktisch unlesbar
Der ehemalige CEO von reddit:
https://x.com/yishan/status/2086534431075098628
Mario Zechner, Entwickler von pi:
https://x.com/badlogicgames/status/2087068077309542889
Connor von Replicas:
https://x.com/connortbot/status/2081881377147109413
Dillon Mulroy hat sogar einen Skill erstellt *einen Skill von @backnotprop populär gemacht, der das Modell darum bittet, die Sprache zu vereinfachen.
https://x.com/dillon_mulroy/status/2079238358358778142
Der Inhalt ist:
Formuliere deine letzte Nachricht neu. Hör auf, Jargon zu verwenden, und sprich verständlich. Sag es einfacher und knapper, wie ein Mensch, der mit einem anderen spricht.
ich hab das so satt
Agenten sind auf dem Papier intelligenter geworden, aber die Erfahrung, sie zu nutzen, hat sich in dieser Hinsicht deutlich verschlechtert
die Sache, die die Leute an Claude geliebt haben – seine Stimme, seine Persönlichkeit, seine „Seele“ – wurde im RL-Dungeon ausgespült
Sol ist zwar etwas weniger cringe, aber er knallt uns trotzdem regelmäßig Jargon-Wände um die Ohren, bei denen einem die Augen übergehen
hier ist eine Antwort, die ich neulich bekommen habe. das passiert mehrfach am Tag
mein Vorschlag: show me
Wir haben mit internen Tools gespielt, um das besser zu machen, speziell fürs Coding, und veröffentlichen sie in einem Skill namens show-me.
Er ist ab heute in humanlayer live, und wenn du ihn in einem anderen Coding-Agenten haben willst – du bekommst ihn hier:
1npx skills add humanlayer/skills --skill show-me
Oder hol dir die eingebaute humanlayer-Version, die Inline-HTML und Diagramme als First-Class-Feature unterstützt:
1brew trust humanlayer/humanlayer2brew tap humanlayer/humanlayer3brew install humanlayer
Falls du dir je den Talk von Coda Hale über Intuition vs. Aufmerksamkeit in Infrastruktursystemen angesehen hast – das ist davon etwas inspiriert:
- Informationen zu analysieren ist hart und anstrengend
- dein visueller Kortex wurde über Millionen von Jahren darauf trainiert, reichhaltige visuelle Informationen mühelos zu verarbeiten
- optimiere Tools entsprechend
So wie eine Axt in die menschliche Hand passen muss, um nützlich zu sein, muss Software in den menschlichen Geist passen, um nützlich zu sein
/show-me fordert den Agenten auf, prägnante Visualisierungen zu verwenden, um zu erklären, was passiert – statt Textwänden.
Das ist wirklich gut fürs Programmdesign – die Phase, die viele heutzutage überspringen, die ich aber für essenziell halte. Du solltest die Form des Codes besprechen (die Typen, die Signaturen, die Call-Stacks), bevor die Agenten ans Schreiben gehen.
Dieselben Techniken kannst du auch nutzen, um große Diffs im Nachhinein zu untersuchen und herauszufinden, worauf du dich beim Review stürzen solltest.
Was drinsteckt
Komponentenbäume
Dieselbe Idee im Frontend, mit den State-Hooks und Modulgrenzen, die wichtig sind – und alles andere weggelassen.
Das habe ich damals im Dezember 2025 auf Twitter geteilt:
https://x.com/dexhorthy/status/1998968236617199803
Call-Stacks
Für Orchestrierungs- oder Control-Flow-Arbeit – oder einfach für jedes backendförmige Problem – hat Dillon uns diese „Call-Stack“-Form gegeben.
https://x.com/dillon_mulroy/status/2059985696148849025
Tanishq hat sogar ein Tool geschrieben, das sie direkt aus dem AST berechnet
https://x.com/tanishqk/status/2085800689129935342
Diagramme
Ein Klassiker. Wenn dein Chat-Interface Inline-Mermaid unterstützt, können die sehr helfen. (Manchmal sind sie trotzdem Müll, aber es ist meistens besser, als Wörter zu lesen)
Viele Optionen hier. Am liebsten mögen wir State-Diagramme und Sequenzdiagramme.
Datei-Layouts
Ein flacher Dateibaum, eine Zeile Verantwortlichkeit pro Eintrag. Gut für „Wo lebt das hier?“ und zum Eingrenzen eines Refactors.
Pseudocode
Gerade bei algorithmischem Kram kann Pseudocode prägnanter sein.
Typen und Signaturen
Die Form des Codes, bevor irgendetwas davon existiert – das Zeug, das für ein Architektur-Dokument zu intern ist, das ein Agent aber trotzdem falsch hinbekommt.
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
Diff-Syntax
Du kannst dafür auch Diff-Syntax verwenden, wenn der Großteil des Inhalts unverändert ist:
Für eine Komponentenänderung:
Für eine Call-Tree-Änderung:
Für eine Datei-Layout-Änderung:
Und für eine State- oder Control-Flow-Änderung, wenn die Form eher Pseudocode als echter Code ist:
HTML-Mockups
HTML hat Figma bei einem Großteil unserer Prototyping-Arbeit ersetzt. (tbh ich war mit Figma eh nie wirklich super geschickt)
HTML-Diagramme
Manchmal brauchst du einfach ein Diagramm oder einen Explainer.
In humanlayer lassen wir den Agenten HTML direkt in Assistant-Antworten einbauen.
Du kannst es aber auch einfach in deinem Browser öffnen.
weitere Inspiration
Ich möchte auch @mattpocockuk meinen Hut ziehen für die HTML-Explainer, die sein /teach-Skill generiert – sehr gut.
probier es aus
1npx skills add humanlayer/skills --skill show-me
Nach der Installation des Skills rufst du /show-me auf oder bittest den Agenten, den show-me-Skill zu verwenden. Richte ihn auf eine Route, einen Service, ein Feature, einen Pull-Request oder ein aktuelles Thema aus – oder nutze ihn einfach, um das Modell zu bitten, eine Frage oder Aussage neu zu formulieren.
das ist zu viel Inhalt. show me.
oder
/show-me als HTML-Explainer
Lass uns wissen, was du denkst! Taggt @humanlayer_dev oder @dexhorthy mit euren Ergebnissen oder dem, was ihr angepasst/ergänzt habt – und lasst uns gemeinsam weiterspinnen!
GIF
