SpyBara
Go Premium

plugins/mods/gallery.md 2026-10-19 23:58 UTC to 2026-10-20 23:00 UTC

This page contains 72 additions and 146 deletions.

2026
Fri 2 22:59 Thu 8 22:58 Thu 15 23:58 Fri 16 22:59 Tue 20 23:00 Wed 21 23:02 Thu 22 22:58 Fri 23 22:59 Sat 24 22:59 Mon 26 22:57 Tue 27 22:59 Wed 28 23:57

Oberflächengalerie für Mods

Sehen Sie sich die Oberflächenelemente an, die ein Claude Code-Mod zeichnen kann, etwa Text, Schaltflächen, Felder, Markdown, Code und Diffs, mit Beispielcode und Terminal-Screenshots.

Ein Mod zeichnet seine Oberfläche aus Elementen: Text, Boxen, Schaltflächen, Felder und einige Elemente, die Inhalte für Sie formatieren. Die Beispiele hier zeigen den Code, der ein Element zeichnet, und die meisten enthalten einen Screenshot des Ergebnisses in einem Terminal-Bereich, sodass Sie ein Element anhand seines Aussehens auswählen können.

Um zu erfahren, wie das Zeichnen funktioniert, beginnen Sie mit In der Oberfläche zeichnen. Die wichtigsten Props und welche Apps die einzelnen Elemente zeichnen, finden Sie in der Elementreferenz. Die Typdeklarationen führen alle Props auf.

Ein Beispiel ausprobieren

Die Beispiele auf dieser Seite sind Codeausschnitte, keine vollständigen Mods. Jedes Beispiel enthält den Code für ein Element und alles, was darin verschachtelt ist.

Um ein Beispiel in Ihrem eigenen Terminal zu sehen, erstellen Sie mit den folgenden Schritten den kleinen Mod und fügen das Beispiel darin ein. Der Mod fügt einen Befehl /gallery hinzu, der einen Bereich öffnet und das Beispiel dort zeichnet. Ein Bereich ist in einem breiten Vollbild-Terminal eine Seitenleiste neben dem Transkript, andernfalls ein umrahmter Bereich oberhalb des Prompts.

1. Den Mod erstellen

Erstellen Sie ein Verzeichnis namens gallery mit den Verzeichnissen .claude-plugin und hooks darin. Einen Mod erstellen erläutert die Dateien.

Speichern Sie das Manifest als gallery/.claude-plugin/plugin.json:

{
  "name": "gallery",
  "version": "0.1.0",
  "description": "Opens a pane that draws one sample",
  "author": { "name": "Your Name" }
}

Geben Sie Ihren Einstiegspunkt in gallery/hooks/hooks.json an:

{
  "modules": ["./register.js"]
}

Speichern Sie den Code als gallery/hooks/register.js. Er fügt einen Befehl /gallery hinzu, der einen Bereich öffnet, und zeichnet Plain text in diesem Bereich:

// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'

// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
  const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
  return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}

export function register(on) {
  on('session.start', async ($, e, next) => {
    await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
    return next(e)
  })

  on('command.run', { command: 'gallery' }, async ($) => {
    await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
    return {}
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== 'gallery') return next(e)
    const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
    // Replace the element after return with a sample
    return Text({ children: ['Plain text'] })
  })
}

2. Den Mod ausführen

Starten Sie Claude Code in Ihrer Shell aus dem Verzeichnis, das gallery enthält:

claude --plugin-dir ./gallery

Führen Sie am Prompt von Claude Code /gallery aus. Ein Bereich mit Plain text darin öffnet sich.

3. Ein Beispiel einsetzen

Kopieren Sie ein Beispiel von dieser Seite. Fügen Sie es in register.js anstelle von Text({ children: ['Plain text'] }) ein, sodass es auf return folgt, und speichern Sie die Datei. Claude Code lädt das Modul bei jedem Speichern neu. Führen Sie daher /gallery erneut aus, um das neue Beispiel zu sehen.

Ein Element auswählen

Die Beispiele sind danach gruppiert, was Sie auf dem Bildschirm darstellen möchten:

Text anzeigen

Drei Elemente bringen Wörter auf den Bildschirm: Text für Ihre eigene Formatierung, Markdown für Inhalte, die bereits formatiert sind, und Link für eine URL.

Text

Text zeichnet eine Zeichenkette mit den Stilen, die Sie angeben. Dieses Beispiel zeigt einfachen Text und acht Stile, jeweils einen pro Zeile:

Box({
  flexDirection: 'column',
  children: [
    Text({ children: ['Plain text'] }),
    Text({ bold: true, children: ['bold'] }),
    Text({ italic: true, children: ['italic'] }),
    Text({ underline: true, children: ['underline'] }),
    Text({ strikethrough: true, children: ['strikethrough'] }),
    Text({ dimColor: true, children: ['dimColor'] }),
    Text({ inverse: true, children: ['inverse'] }),
    Text({ color: 'red', children: ["color: 'red'"] }),
    Text({ backgroundColor: 'blue', children: ["backgroundColor: 'blue'"] }),
  ],
})

Ein Bereich mit neun Textzeilen, jeweils nach ihrem Stil benannt: plain, bold, italic, underline, strikethrough, dimColor in Grau, inverse, color red und backgroundColor blue.

dimColor zeichnet den Text in Grau. backgroundColor füllt nur so weit, wie der Text breit ist.

Markdown

Markdown formatiert Text so, wie die Antworten von Claude formatiert werden. Übergeben Sie den Inhalt in text, nicht in children:

Markdown({
  text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})

Ein Bereich mit einer fetten Überschrift, Release notes, dann ein Satz mit einem fetten Wort und einem farbigen Code-Wort, eine Liste mit zwei Einträgen und ein Zitat in Kursivschrift mit einem Balken auf der linken Seite.

Eine Überschrift wird fett ohne ihre #-Zeichen gezeichnet. Inline-Code wird farbig ohne seine Backticks gezeichnet. Ein Zitat wird kursiv mit einem Balken auf der linken Seite gezeichnet.

Link zeichnet eine Beschriftung, gefolgt von ihrer URL:

Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })

Ein Bereich mit einer Zeile: die Beschriftung Claude Code docs, dann die URL in Grau.

Das Terminal zeichnet die URL als Text nach der Beschriftung. Ob ein Klick sie öffnet, hängt vom Terminal des Benutzers ab.

Code und Änderungen anzeigen

Code stellt Quelltext mit den eigenen Syntaxfarben von Claude Code dar oder zeigt einen Diff an. In der VS Code-Erweiterung zeigt Code seine source als reinen Text an, ohne die Farben, Zeilennummern oder Diff-Schattierungen aus diesen Screenshots.

Code

Geben Sie die language an oder übergeben Sie einen path, aus dem Claude Code sie ableitet. Mit startLine werden die Zeilen ab dieser Zahl nummeriert:

Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})

Ein Bereich mit zwei nummerierten Zeilen JavaScript in Syntaxfarben.

Die Farben stammen aus dem Theme des Benutzers.

Code als Diff

Mit format: 'diff' besteht source aus einem oder mehreren Unified-Diff-Hunks:

Code({
  format: 'diff',
  source: '@@ -1,3 +1,3 @@\n # Mods\n-A mod is a plugin.\n+A mod is a plugin that runs code.\n Read on.',
})

Ein Bereich mit einem vierzeiligen Diff. Die entfernte Zeile ist rot und die hinzugefügte Zeile grün hinterlegt, jeweils mit ihrer Zeilennummer. In der hinzugefügten Zeile sind die Wörter that runs code stärker hervorgehoben.

Claude Code zeigt anstelle der @@-Zeile Zeilennummern an. Wo sich eine entfernte und eine hinzugefügte Zeile ähneln, werden die geänderten Wörter stärker hervorgehoben.

Elemente anordnen

Box

Box ordnet seinen Inhalt in einer Zeile oder einer Spalte an und kann einen Rahmen zeichnen. Dieses Beispiel platziert eine Reihe von Wörtern über einer umrandeten Box:

Box({
  flexDirection: 'column',
  gap: 1,
  children: [
    Box({
      flexDirection: 'row',
      columnGap: 4,
      children: [Text({ children: ['a row'] }), Text({ children: ['of three'] }), Text({ children: ['items'] })],
    }),
    Box({
      borderStyle: 'round',
      paddingX: 1,
      children: [Text({ children: ["borderStyle: 'round'"] })],
    }),
  ],
})

Ein Bereich mit drei Wörtern in einer Zeile, vier Spalten voneinander entfernt, dann eine leere Zeile, dann ein abgerundeter Rahmen um eine Textzeile. Der Rahmen erstreckt sich über die gesamte Breite des Bereichs.

Der Rahmen erstreckt sich über die Breite des Bereichs.

Eingaben entgegennehmen

Button, Input und Select sind Steuerelemente: Der Benutzer wechselt mit Tab zwischen ihnen und bedient dasjenige, das den Fokus hat. Unter Tastaturfokus und Hotkeys erfahren Sie, welche Tasten sie erreichen.

Öffnen Sie einen Bereich mit focus: true, um den Tastaturfokus für ihn anzufordern. Eingegebene Buchstaben erreichen ein Input, sobald es den Fokus hat. Wie Sie festlegen, welches Feld beim Öffnen des Bereichs den Fokus hat, erfahren Sie unter Einen Hotkey und den ersten Fokus festlegen.

Button

Ein Button führt onPress aus. Dieses Beispiel zeigt die Standardform, einen plain-Button mit einem Hotkey und einen abgeblendeten Button:

Box({
  flexDirection: 'column',
  children: [
    Button({ key: 'save', label: 'Save', onPress: noop }),
    Button({ key: 'next', label: 'Next', hotkey: 'n', plain: true, onPress: noop }),
    Button({ key: 'skip', label: 'Skip', dimColor: true, onPress: noop }),
  ],
})

Ein Bereich mit drei Buttons, einer pro Zeile: Save in eckigen Klammern, n: Next ohne Klammern und mit farbigem n sowie Skip in eckigen Klammern in Grau.

Ein Button, der den Fokus hat, wird invertiert dargestellt. Hier hat der Benutzer zweimal Tab gedrückt:

Dieselben drei Buttons, wobei der zweite, n: Next, invertiert dargestellt wird.

Input

Ein Input ist ein einzeiliges Textfeld, das onSubmit ausführt, wenn der Benutzer die Eingabetaste drückt:

Input({
  key: 'title',
  label: 'Title',
  placeholder: 'Type a title and press Enter',
  value: '',
  submitLabel: 'save',
  onSubmit: noop,
})

Ohne Fokus zeigt das Feld seine Beschriftung und seinen Platzhalter:

Ein Bereich mit einer Zeile: die Beschriftung Title, dann der Platzhalter Type a title and press Enter in Grau.

Mit Fokus wird die Beschriftung fett dargestellt, ein Cursor erscheint und das submitLabel wird nach ⏎ angezeigt:

Dasselbe Feld mit fett dargestellter Beschriftung, einem Block-Cursor auf dem ersten Buchstaben des Platzhalters und einem Return-Zeichen, gefolgt vom Wort save.

Durch Tippen wird der Platzhalter ersetzt:

Dasselbe Feld mit den eingegebenen Buchstaben Rel, gefolgt vom Return-Zeichen und dem Wort save.

Select

Mit einem Select kann der Benutzer eine von mehreren Optionen auswählen; es führt onSelect mit dem value der Option aus:

Select({
  key: 'format',
  label: 'Format',
  value: picked,
  options: [
    { value: 'md', label: 'Markdown' },
    { value: 'html', label: 'HTML' },
    { value: 'txt', label: 'Plain text' },
  ],
  onSelect: (value) => {
    picked = value
  },
})

Geschlossen zeigt es seine Beschriftung und die aktuelle Option:

Ein Bereich mit einer Zeile: die Beschriftung Format, die aktuelle Option Markdown und ein kleiner Pfeil nach unten.

Geöffnet listet es seine Optionen auf und markiert eine davon:

Die geöffnete Auswahl mit ihren drei Optionen, die unter der Beschriftung aufgelistet sind. Die zweite Option, HTML, wird invertiert dargestellt.

Nachdem der Benutzer eine Option ausgewählt hat, schließt sich die Liste:

Die wieder geschlossene Auswahl, die nun HTML als aktuelle Option anzeigt.

Bilder zeichnen

Raster

Ein Raster ist ein Gitter aus farbigen Zeichenzellen, etwa für eine Heatmap, eine Sparkline oder ein Spielbrett. Das Terminal zeichnet es. Dieses Beispiel verwendet die Funktion cellsOf im Startermodul, die die Zellen in den String packt, den ein Raster erwartet. Ein Gitter aus farbigen Zellen zeichnen erklärt sie:

Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})

Ein Bereich mit einem kleinen Gitter aus farbigen Blöcken, zwei Reihen zu je drei: Grün, Bernstein und Rot, dann Grün, Grün und Bernstein.

Ein Raster rundet jede Farbe auf eine kleinere Palette, sodass 0x2e7d32 als #337733 gezeichnet wird.

Svg

Ein Svg zeichnet ein SVG-Dokument in der Desktop-App und der VS Code-Erweiterung:

Svg({
  alt: 'Three bars of rising height',
  width: 120,
  height: 60,
  source:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="40" width="20" height="20" fill="#2e7d32"/><rect x="50" y="25" width="20" height="35" fill="#f9a825"/><rect x="90" y="5" width="20" height="55" fill="#c62828"/></svg>',
})

Im Terminal wird ein Bereich, der nur ein Svg zurückgibt, leer geöffnet. Um dort etwas anderes zu zeichnen, prüfen Sie e.surface und geben Sie einen anderen Baum zurück.

Image und Client

Zwei weitere Elemente haben hier kein Beispiel. Image zeichnet ein PNG oder Rohpixel im Terminal. Client ist ein Bereich, den eine zweite Datei von Ihnen zeichnet, für Animationen und Zeigereingaben. Die Elementreferenz listet ihre Props auf.

Sofern Claude Code nicht erkennt, dass das Terminal Bilder des kitty-Grafikprotokolls mit Unicode-Platzhaltern zeichnet, sieht der Benutzer anstelle des Bildes den alt-Text eines Image abgeblendet. Schreiben Sie alt-Text, der für sich allein verständlich ist. Die Erkennung läuft beim Start: Sie gelingt in kitty 0.28 oder höher und in Ghostty, sobald das Terminal auf die Grafikabfrage von Claude Code antwortet, und schlägt in diesen Fällen fehl:

  • Andere Terminals: jedes Terminal, das keines dieser beiden ist oder nicht auf die Abfrage antwortet.
  • tmux und screen: eine Sitzung, die innerhalb von tmux oder screen läuft, in jedem Terminal, kitty und Ghostty eingeschlossen.
  • Hintergrundsitzungen: jede Hintergrundsitzung, unabhängig davon, von welchem Terminal aus sie verbunden ist.

Wenn die Benutzer Ihres Mods den abgeblendeten Text in einem Terminal sehen, das diese Platzhalterbilder tatsächlich zeichnet, können sie CLAUDE_CODE_FORCE_TERMINAL_IMAGES auf 1 setzen, wodurch die Erkennung übersprungen wird. Innerhalb von tmux oder screen hilft das nicht: Der alt-Text verschwindet, und Claude Code sendet das Bild, ohne es für das Passthrough von tmux oder screen zu verpacken.

Sehen, wo ein Mod zeichnen kann

Die Beispiele zeichnen alle in einem Bereich. Ein Mod kann auch an anderen Stellen zeichnen und Claude Code aufrufen, damit es etwas für ihn anzeigt:

Nächste Schritte