Galerie der Oberflächenelemente für Mods

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-Pane, sodass Sie ein Element anhand seines Aussehens auswählen können. Wie das Zeichnen funktioniert, erfahren Sie zunächst unter In der Oberfläche zeichnen. Die wichtigsten Props und welche Apps die einzelnen Elemente zeichnen, finden Sie in der Elementreferenz. Die Typdeklarationen listen alle Props auf.

Ein Beispiel ausprobieren

Die Beispiele auf dieser Seite sind Codeausschnitte, keine vollständigen Mods. Jedes Beispiel ist der 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 Sie das Beispiel darin ein. Der Mod fügt einen Befehl /gallery hinzu, der ein Pane öffnet und das Beispiel dort zeichnet. Ein Pane ist in einem breiten Vollbild-Terminal eine Seitenleiste neben dem Transkript, andernfalls ein umrahmter Bereich über dem Prompt.

Den Mod erstellen

Erstellen Sie ein Verzeichnis namens gallery mit den Verzeichnissen .claude-plugin und hooks darin. Einen Mod erstellen erklärt die Dateien.Speichern Sie das Manifest als gallery/.claude-plugin/plugin.json:

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:

gallery/hooks/hooks.json

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

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

gallery/hooks/register.js

// 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'] })
  })
}

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 im Prompt von Claude Code /gallery aus. Ein Pane mit Plain text darin öffnet sich.

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 also /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: Text, Markdown und Link
Code und Änderungen anzeigen: Code
Elemente anordnen: Box
Eingaben entgegennehmen: Button, Input und Select
Bilder zeichnen: Raster, Svg, Image und Client

Text anzeigen

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

`Text`

Text zeichnet eine Zeichenkette mit den Stilen, die Sie angeben. Dieses Beispiel zeigt eine Zeile pro Stil:

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 Pane 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 die Breite des Texts aus.

`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 Pane mit einer fetten Überschrift, Release notes, dann ein Satz mit einem fetten Wort und einem farbigen Codewort, eine Liste mit zwei Einträgen und ein Zitat in Kursivschrift mit einem Balken links davon.

Eine Überschrift wird fett und ohne ihre #-Zeichen gezeichnet. Inline-Code wird farbig und ohne seine Backticks gezeichnet. Ein Zitat wird kursiv mit einem Balken links davon gezeichnet.

`Link`

Link zeichnet eine Beschriftung, gefolgt von ihrer URL:

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

Ein Pane 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 zeichnet Quelltext mit den eigenen Syntaxfarben von Claude Code oder einen Diff.

`Code`

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

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

Ein Pane 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 Pane 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 hinterlegt.

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

Elemente anordnen

`Box`

Box ordnet seinen Inhalt in einer Zeile oder Spalte an und kann einen Rahmen zeichnen. Dieses Beispiel setzt eine Reihe von Wörtern über eine umrahmte 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 Pane mit drei Wörtern in einer Reihe im Abstand von vier Spalten, dann eine leere Zeile, dann ein abgerundeter Rahmen um eine Textzeile. Der Rahmen erstreckt sich über die gesamte Breite des Panes.

Der Rahmen dehnt sich auf die Breite des Panes aus.

Eingaben entgegennehmen

Button, Input und Select sind Steuerelemente: Der Benutzer wechselt mit Tab zwischen ihnen und bedient dasjenige, das den Fokus hat. Tastaturfokus und Hotkeys beschreibt, welche Tasten sie erreichen. Wenn Sie ein Pane mit focus: true öffnen, erhält das Pane den Tastaturfokus. Getippte Buchstaben erreichen ein Input, sobald es den Fokus hat. Fügen Sie daher autoFocus: true zu einem Feld hinzu, das Eingaben annehmen soll, sobald sich das Pane öffnet.

`Button`

Eine Schaltfläche führt onPress aus. Dieses Beispiel zeigt die Standardform, eine plain-Schaltfläche mit einem Hotkey und eine abgeblendete Schaltfläche:

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 Pane mit drei Schaltflächen, eine pro Zeile: Save in Klammern, n: Next ohne Klammern und mit farbigem n sowie Skip in Klammern in Grau.

Eine Schaltfläche mit Fokus wird invertiert gezeichnet. Hier hat der Benutzer zweimal Tab gedrückt:

Dieselben drei Schaltflächen, wobei die zweite, n: Next, invertiert gezeichnet ist.

`Input`

Ein Input ist ein einzeiliges Textfeld, das onSubmit ausführt, wenn der Benutzer Enter 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 Pane mit einer Zeile: die Beschriftung Title, dann der Platzhalter Type a title and press Enter in Grau.

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

Dasselbe Feld mit fetter Beschriftung, einem Blockcursor auf dem ersten Buchstaben des Platzhalters und einem Eingabezeichen, gefolgt vom Wort save.

Durch Tippen wird der Platzhalter ersetzt:

Dasselbe Feld mit den getippten Buchstaben Rel, gefolgt vom Eingabezeichen 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 Pane 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 unter der Beschriftung. Die zweite Option, HTML, ist invertiert gezeichnet.

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

Die wieder geschlossene Auswahl, die jetzt 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 aus dem Startermodul, die die Zellen in die Zeichenkette packt, die 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 Pane mit einem kleinen Gitter aus farbigen Blöcken, zwei Reihen zu je drei: grün, bernsteinfarben und rot, dann grün, grün und bernsteinfarben.

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:

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 öffnet sich ein Pane, das nur ein Svg zurückgibt, leer. Um dort etwas anderes zu zeichnen, prüfen Sie e.surface und geben Sie einen anderen Baum zurück.

`Image` und `Client`

Für zwei weitere Elemente gibt es 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.

Sehen, wo ein Mod zeichnen kann

Alle Beispiele zeichnen in einem Pane. Ein Mod kann auch an anderen Stellen zeichnen und Claude Code aufrufen, um etwas für ihn anzuzeigen:

Pane und Band: Auswählen, wo gezeichnet wird
Die eigenen Zeilen von Claude Code, etwa der Spinner: Ändern, was Claude Code bereits zeichnet
Toast, Statuszeile und Log-Zeile: Etwas anzeigen, ohne einen Turn zu starten
Fragedialog: Einen Tool-Aufruf anhalten, bis der Benutzer entscheidet

Nächste Schritte

In der Oberfläche zeichnen: Schritt für Schritt ein Pane mit Tabs erstellen
Eine Zeichnung testen: Ihre Schaltflächen aus einem Test heraus drücken
Elementreferenz: die wichtigsten Props jedes Elements und die Apps, die es zeichnen

Plugins

Plugins verwenden

Plugins erstellen

Mods

Marketplace betreiben

Plugins für Ihre Organisation verwalten

Fehlerbehebung

Referenz

Galerie der Oberflächenelemente für Mods

Ein Beispiel ausprobieren

Ein Element auswählen

Text anzeigen

`Text`

`Markdown`

`Link`

Code und Änderungen anzeigen

`Code`

`Code` als Diff

Elemente anordnen

`Box`

Eingaben entgegennehmen

`Button`

`Input`

`Select`

Bilder zeichnen

`Raster`

`Svg`

`Image` und `Client`

Sehen, wo ein Mod zeichnen kann

Nächste Schritte

​Ein Beispiel ausprobieren

​Ein Element auswählen

​Text anzeigen

​Text

​Markdown

​Link

​Code und Änderungen anzeigen

​Code

​Code als Diff

​Elemente anordnen

​Box

​Eingaben entgegennehmen

​Button

​Input

​Select

​Bilder zeichnen

​Raster

​Svg

​Image und Client

​Sehen, wo ein Mod zeichnen kann

​Nächste Schritte

Ein Beispiel ausprobieren

Ein Element auswählen

Text anzeigen

`Text`

`Markdown`

`Link`

Code und Änderungen anzeigen

`Code`

`Code` als Diff

Elemente anordnen

`Box`

Eingaben entgegennehmen

`Button`

`Input`

`Select`

Bilder zeichnen

`Raster`

`Svg`

`Image` und `Client`

Sehen, wo ein Mod zeichnen kann

Nächste Schritte