SpyBara
Go Premium

plugins/mods/gallery.md 2026-10-01 23:59 UTC to 2026-10-02 20:57 UTC

This page contains 435 additions and 0 deletions.

2026
Fri 2 22:00

Galleria dell'interfaccia per i mod

Scopri gli elementi dell'interfaccia che un mod di Claude Code può disegnare, come testo, pulsanti, campi, Markdown, codice e diff, con codice di esempio e screenshot del terminale.

Un mod disegna la sua interfaccia a partire da elementi: testo, riquadri, pulsanti, campi e alcuni elementi che formattano il contenuto al posto tuo. Gli esempi qui mostrano il codice che disegna un elemento, e la maggior parte è accompagnata da uno screenshot del risultato in un riquadro del terminale, così puoi scegliere un elemento in base al suo aspetto.

Per capire come funziona il disegno, inizia da Disegnare nell'interfaccia. Per le prop principali e per sapere quali app disegnano ciascun elemento, consulta il riferimento degli elementi. Le dichiarazioni dei tipi elencano tutte le prop.

Prova un esempio

Gli esempi in questa pagina sono frammenti, non mod completi. Ognuno è il codice di un elemento e di tutto ciò che è annidato al suo interno.

Per vedere un esempio nel tuo terminale, crea il piccolo mod seguendo questi passaggi e incollaci l'esempio. Il mod aggiunge un comando /gallery che apre un riquadro e vi disegna l'esempio. Un riquadro è una barra laterale accanto alla trascrizione in un terminale a schermo intero sufficientemente largo, oppure, negli altri casi, un'area delimitata sopra il prompt.

1

Crea il mod

Crea una directory chiamata gallery con le directory .claude-plugin e hooks al suo interno. Crea un mod spiega i file.

Salva il manifest come gallery/.claude-plugin/plugin.json:

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

Indica il tuo punto di ingresso in gallery/hooks/hooks.json:

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

Salva il codice come gallery/hooks/register.js. Aggiunge un comando /gallery che apre un riquadro e disegna Plain text in quel riquadro:

// 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

Esegui il mod

Nella tua shell, avvia Claude Code dalla directory che contiene gallery:

claude --plugin-dir ./gallery

Al prompt di Claude Code, esegui /gallery. Si apre un riquadro con Plain text al suo interno.

3

Sostituisci con un esempio

Copia un esempio da questa pagina. In register.js, incollalo al posto di Text({ children: ['Plain text'] }), in modo che segua return, e salva il file. Claude Code ricarica il modulo ogni volta che salvi, quindi esegui di nuovo /gallery per vedere il nuovo esempio.

Scegli un elemento

Gli esempi sono raggruppati in base a ciò che vuoi mostrare sullo schermo:

Mostrare testo

Tre elementi mettono parole sullo schermo: Text per uno stile personalizzato, Markdown per contenuti già formattati e Link per un URL.

`Text`

Text disegna una stringa con gli stili che gli assegni. Questo esempio mostra una riga per ogni stile:

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'"] }),
  ],
})
Un riquadro con nove righe di testo, ciascuna chiamata con il nome del proprio stile: plain, bold, italic, underline, strikethrough, dimColor in grigio, inverse, color red e backgroundColor blue. Un riquadro con nove righe di testo, ciascuna chiamata con il nome del proprio stile: plain, bold, italic, underline, strikethrough, dimColor in grigio, inverse, color red e backgroundColor blue.

dimColor disegna il testo in grigio. backgroundColor riempie solo la larghezza del testo.

`Markdown`

Markdown formatta il testo nello stesso modo in cui vengono formattate le risposte di Claude. Passa il contenuto in text, non 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',
})
Un riquadro con un titolo in grassetto, Release notes, seguito da una frase con una parola in grassetto e una parola di codice colorata, un elenco di due voci e una citazione in corsivo con una barra alla sua sinistra. Un riquadro con un titolo in grassetto, Release notes, seguito da una frase con una parola in grassetto e una parola di codice colorata, un elenco di due voci e una citazione in corsivo con una barra alla sua sinistra.

Un titolo viene disegnato in grassetto senza i simboli #. Il codice inline viene disegnato a colori senza i backtick. Una citazione viene disegnata in corsivo con una barra alla sua sinistra.

Link disegna un'etichetta seguita dal suo URL:

Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })
Un riquadro con una riga: l'etichetta Claude Code docs, seguita dall'URL in grigio. Un riquadro con una riga: l'etichetta Claude Code docs, seguita dall'URL in grigio.

Il terminale disegna l'URL come testo dopo l'etichetta. Il fatto che un clic lo apra dipende dal terminale dell'utente.

Mostrare codice e modifiche

Code disegna il testo sorgente con i colori di sintassi propri di Claude Code, oppure un diff.

`Code`

Specifica il language, oppure passa un path da cui Claude Code possa dedurlo. Con startLine, le righe vengono numerate a partire da quel numero:

Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})
Un riquadro con due righe numerate di JavaScript con i colori di sintassi. Un riquadro con due righe numerate di JavaScript con i colori di sintassi.

I colori provengono dal tema dell'utente.

`Code` come diff

Con format: 'diff', source è costituito da uno o più hunk di diff unificato:

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.',
})
Un riquadro con un diff di quattro righe. La riga rimossa è ombreggiata in rosso e quella aggiunta in verde, ciascuna con il proprio numero di riga. Nella riga aggiunta, le parole that runs code hanno un'ombreggiatura più intensa. Un riquadro con un diff di quattro righe. La riga rimossa è ombreggiata in rosso e quella aggiunta in verde, ciascuna con il proprio numero di riga. Nella riga aggiunta, le parole that runs code hanno un'ombreggiatura più intensa.

Claude Code disegna i numeri di riga al posto della riga @@. Quando una riga rimossa e una riga aggiunta sono simili, le parole modificate ricevono un'ombreggiatura più intensa.

Disporre gli elementi

`Box`

Box dispone ciò che contiene in una riga o in una colonna e può disegnare un bordo. Questo esempio posiziona una riga di parole sopra un riquadro con bordo:

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'"] })],
    }),
  ],
})
Un pannello con tre parole in una riga, distanziate di quattro colonne, poi una riga vuota, poi un bordo arrotondato attorno a una riga di testo. Il bordo si estende per l'intera larghezza del pannello. Un pannello con tre parole in una riga, distanziate di quattro colonne, poi una riga vuota, poi un bordo arrotondato attorno a una riga di testo. Il bordo si estende per l'intera larghezza del pannello.

Il bordo si estende fino alla larghezza del pannello.

Ricevere input

Button, Input e Select sono controlli: l'utente si sposta tra di essi con Tab e usa quello che ha il focus. Focus della tastiera e tasti di scelta rapida spiega quali tasti li raggiungono.

Aprire un pannello con focus: true assegna al pannello il focus della tastiera. Le lettere digitate raggiungono un Input una volta che ha il focus, quindi aggiungi autoFocus: true a un campo che deve ricevere la digitazione non appena il pannello si apre.

`Button`

Un pulsante esegue onPress. Questo esempio mostra la forma predefinita, un pulsante plain con un tasto di scelta rapida e uno attenuato:

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 }),
  ],
})
Un pannello con tre pulsanti, uno per riga: Save tra parentesi quadre, n: Next senza parentesi e con la n colorata, e Skip tra parentesi quadre in grigio. Un pannello con tre pulsanti, uno per riga: Save tra parentesi quadre, n: Next senza parentesi e con la n colorata, e Skip tra parentesi quadre in grigio.

Un pulsante che ha il focus viene disegnato in video inverso. Qui l'utente ha premuto Tab due volte:

Gli stessi tre pulsanti, con il secondo, n: Next, disegnato in video inverso. Gli stessi tre pulsanti, con il secondo, n: Next, disegnato in video inverso.

`Input`

Un Input è un campo di testo su una riga che esegue onSubmit quando l'utente preme Invio:

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

Senza il focus, il campo mostra la sua etichetta e il suo placeholder:

Un pannello con una riga: l'etichetta Title, poi il placeholder Type a title and press Enter in grigio. Un pannello con una riga: l'etichetta Title, poi il placeholder Type a title and press Enter in grigio.

Con il focus, l'etichetta diventa in grassetto, compare un cursore e il submitLabel viene mostrato dopo ⏎:

Lo stesso campo con l'etichetta in grassetto, un cursore a blocco sulla prima lettera del placeholder e un simbolo di invio seguito dalla parola save. Lo stesso campo con l'etichetta in grassetto, un cursore a blocco sulla prima lettera del placeholder e un simbolo di invio seguito dalla parola save.

La digitazione sostituisce il placeholder:

Lo stesso campo contenente le lettere digitate Rel, seguite dal simbolo di invio e dalla parola save. Lo stesso campo contenente le lettere digitate Rel, seguite dal simbolo di invio e dalla parola save.

`Select`

Un Select consente all'utente di scegliere una tra diverse opzioni ed esegue onSelect con il value dell'opzione:

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
  },
})

Da chiuso, mostra la sua etichetta e l'opzione corrente:

Un pannello con una riga: l'etichetta Format, l'opzione corrente Markdown e una piccola freccia verso il basso. Un pannello con una riga: l'etichetta Format, l'opzione corrente Markdown e una piccola freccia verso il basso.

Da aperto, elenca le sue opzioni e ne evidenzia una:

Il selettore aperto, con le sue tre opzioni elencate sotto l'etichetta. La seconda opzione, HTML, è disegnata in video inverso. Il selettore aperto, con le sue tre opzioni elencate sotto l'etichetta. La seconda opzione, HTML, è disegnata in video inverso.

Dopo che l'utente ha scelto un'opzione, l'elenco si chiude:

Il selettore di nuovo chiuso, che ora mostra HTML come opzione corrente. Il selettore di nuovo chiuso, che ora mostra HTML come opzione corrente.

Disegnare immagini

`Raster`

Un Raster è una griglia di celle di caratteri colorate, per una mappa di calore, una sparkline o una plancia di gioco. Lo disegna il terminale. Questo esempio usa la funzione cellsOf del modulo iniziale, che comprime le celle nella stringa accettata da un Raster. Disegnare una griglia di celle colorate la spiega:

Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})
Un riquadro con una piccola griglia di blocchi colorati, due righe da tre: verde, ambra e rosso, poi verde, verde e ambra. Un riquadro con una piccola griglia di blocchi colorati, due righe da tre: verde, ambra e rosso, poi verde, verde e ambra.

Un Raster arrotonda ogni colore a una tavolozza più ridotta, quindi 0x2e7d32 viene disegnato come #337733.

`Svg`

Un Svg disegna un documento SVG nell'app Desktop:

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>',
})

Nel terminale, un riquadro che restituisce solo un Svg si apre vuoto. Per disegnare qualcos'altro lì, controlla e.surface e restituisci un albero diverso.

`Image` e `Client`

Altri due elementi non hanno un esempio qui. Image disegna un PNG o pixel grezzi nel terminale. Client è una regione disegnata da un tuo secondo file, per animazioni e input del puntatore. Il riferimento degli elementi elenca le loro prop.

Scopri dove un mod può disegnare

Gli esempi disegnano tutti in un pannello. Un mod può anche disegnare in altri punti e chiamare Claude Code perché mostri qualcosa al posto suo:

Passaggi successivi