Costruire plugin di risultati personalizzati con il codice Claude

Una guida passo-passo per estendere StrategyQuant X utilizzando lo sviluppo assistito dall'AI

Introduzione

A partire da StrategyQuant X build 144, i plugin dei risultati personalizzati possono essere costruiti attraverso l'assistenza dell'intelligenza artificiale. vibecodifica utilizzando il Applicazione desktop Claude Code. StrategyQuant X ha sempre supportato i plugin Risultati personalizzati come file HTML statici caricati nella scheda Risultati, ma costruirne uno era complicato e fuori portata per la maggior parte degli utenti, in quanto richiedeva solide conoscenze di JavaScript, dell'API PostMessage, del modello di dati SQX e della tematizzazione CSS.

A partire dalla build 144, le cose cambiano. È ora possibile creare plugin completi descrivendo ciò che si desidera in un linguaggio semplice. Claude legge la guida ai plugin SQX fornita con l'installazione, comprende le convenzioni utilizzate dai plugin esistenti e genera codice di qualità che può essere inserito direttamente nella scheda Risultati.

Questa guida vi guida attraverso il processo completo di costruzione di un vero e proprio plugin, il Scheda di valutazione della robustezza, che valuta ogni strategia da 0 a 100 attraverso sei pilastri di robustezza. Ogni fase è riproducibile nella propria sessione di Claude Code. La scheda di valutazione è disponibile per il download qui:

[Schermata: Il plugin Robustness Scorecard finito, in esecuzione all'interno della scheda SQX Results, mostra il cerchio del punteggio, il voto in lettere e le barre dei pilastri].

Prerequisiti

Prima di iniziare, assicuratevi di avere:

• StrategyQuant X installato - licenza Pro o Ultimate (il livello Starter non supporta i plugin personalizzati)
• Applicazione desktop Claude Code installato da claude.com/claude-code
• Una comprensione di base di dove user/extend/ResultsPlugins/ si trova nell'installazione di SQX.
• Almeno una strategia backtestata disponibile in una banca dati su cui effettuare il test

Non è richiesta alcuna conoscenza di JavaScript, Vue o CSS.

Passo 1 - Aprire la cartella dei plugin in Claude Code

Avviare l'applicazione desktop Claude Code e aprire il file utente/extend/ResultsPlugins/ dalla vostra installazione di SQX (File → Apri cartella, oppure trascinare la cartella sull'icona dell'applicazione).

Quando si apre la cartella, Claude Code rileva automaticamente la cartella Il file CLAUDE.md è gestito dal team di SQX. Questo file contiene l'architettura completa del plugin, l'API completa di PostMessage, l'elenco dei campi delle statistiche disponibili, le regole di tematizzazione, i requisiti di esclusione della responsabilità e i modelli di tooltip. Da questo momento in poi, Claude sa tutto ciò di cui ha bisogno per costruire un plugin che si adatti naturalmente a quelli ufficiali.

[Schermata: Finestra di Claude Code con la cartella ResultsPlugins aperta in Claude Code].

Fase 2 - Lasciare che Claude analizzi l'ambiente

Invia a Claude il tuo primo messaggio:

Esaminate questa cartella per trovare le competenze e le istruzioni per la codifica del plugin dei risultati.

Claude legge CLAUDE.md e riassume i fatti chiave: i plugin vivono in una propria sottocartella con un singolo index.html, la comunicazione con SQX avviene esclusivamente tramite postMessage, il corpo deve usare overflow:hidden, Vue 3 è supportato attraverso un runtime locale e così via.

Questa fase di caricamento del contesto è essenziale. Una volta che Claude conferma di aver compreso l'ambiente, tutto ciò che produrrà in seguito rispetterà le convenzioni di SQX senza doverle ripetere.

[Schermata: Finestra di chat di Claude Code che mostra il riassunto di Claude sull'architettura del plugin dopo aver letto CLAUDE.md].

Fase 3 - Brainstorming di idee per i plugin

Piuttosto che impegnarsi subito in un'implementazione, chiedete a Claude delle opzioni:

Scrivete per me un nuovo plugin per SQX che dia un punteggio di robustezza alla strategia in base ai risultati delle statistiche, suggerite 10 idee.

Claude risponde con dieci approcci diversi: scorecard ponderate, liste di controllo a semaforo, analizzatori IS/OOS, stress test Monte Carlo, grafici radar, rilevatori di tail risk, misuratori di overfitting e altro ancora. Ogni idea è corredata da una breve descrizione e dai campi statistici su cui si baserebbe.

Questa fase di brainstorming è uno dei maggiori vantaggi di lavorare con un collaboratore AI. Si vede una gamma di opzioni che non si sarebbero mai considerate e si mantiene il controllo della direzione finale.

[Schermata: L'elenco delle 10 idee di plugin nella chat Claude Code, con brevi descrizioni sotto ciascuna di esse].

Fase 4 - Richiesta di un piano di implementazione

Una volta scelta l'idea, chiedete un piano dettagliato prima che venga scritto il codice:

Scrivere il piano di implementazione dell'idea 1. Scorecard di robustezza (0-100).

Claude produce un piano passo dopo passo: la struttura della cartella, i dati che recupererà (tre GET_STATS - entrambe le direzioni, solo lungo, solo corto), il modello di punteggio con sei pilastri e i loro pesi, i punti di normalizzazione per ogni metrica, il layout dell'interfaccia utente con il cerchio del punteggio e le barre dei pilastri, l'ordine di compilazione e un elenco esplicito di tagli all'ambito per le cose che saranno non essere nella prima versione.

Leggete attentamente il piano. Questo è il momento più conveniente per cambiare direzione: per correggere un errore concettuale ora basta una frase, mentre per correggerlo dopo l'implementazione occorrono diverse iterazioni.

[Schermata: Il piano di implementazione nella chat, che mostra la tabella dei pesi dei pilastri e la configurazione dei punteggi].

Fase 5 - Approvazione e generazione del codice

Quando il piano sembra corretto, è sufficiente una semplice conferma:

Ok, fallo

Claude crea un nuovo file RobustnessScorecard/, copia il runtime vue.global.prod.js da un plugin esistente (SQX viene eseguito offline, quindi tutte le dipendenze devono essere locali) e genera un singolo index.html contenente:

• Variabili CSS per la tematizzazione chiara e scura
• Un'applicazione Vue 3 con un oggetto gestore dell'evento messaggio
• Tre paralleli Richieste GET_STATS con un contatore che aspetta tutte le risposte prima di calcolare
• A Oggetto CONFIG che contiene i pesi dei pilastri
• A funzione norm() per la normalizzazione metrica lineare a pezzi
• I calcoli dei sei pilastri con i ripieghi per i dati mancanti
• Un gate a bassa negoziazione (sotto i 100 scambi il pilastro campione si ferma a 30)
• Riponderazione automatica quando un pilastro non ha ingressi validi
• L'interfaccia utente completa: cerchio dei punteggi, voto in lettere, verdetto, punti deboli e barre dei pilastri.

Circa 500 righe di codice di qualità produttiva in un unico file, pronto per essere inserito in SQX.

[Schermata: La cartella RobustnessScorecard appena creata nell'albero dei file con index.html e vue.global.prod.js visibili].

Passo 6 - Aggiungere il disclaimer standard

Qualsiasi strumento che interpreti le performance di trading deve includere un disclaimer. Claude conosce già questa regola CLAUDE.md, ma è possibile attivare il passo in modo esplicito:

Aggiungete anche una clausola di esclusione di responsabilità che corrisponda agli altri plugin.

Claude osserva come Prop analytics e Prop Monte Carlo implementano i loro disclaimer, applicano la stessa classe CSS (11px, colore tenue, border-top, testo giustificato, flex-shrink:0), e posiziona il blocco come ultimo elemento all'interno di #app. Per quanto riguarda specificamente la scorecard, Claude aggiunge una frase in più per chiarire che un punteggio elevato non garantisce prestazioni future e un punteggio basso non garantisce il fallimento.

Poiché Claude corrisponde allo schema utilizzato dai plugin esistenti, l'esclusione di responsabilità è visivamente coerente con il resto della scheda Risultati.

[Schermata: L'anteprima del plugin mostra la barra di esclusione della responsabilità in fondo all'iframe, sotto le barre dei pilastri].

Passo 7 - Aggiungere i tooltip con spiegazioni pratiche

Questo è il passaggio che trasforma il plugin da uno strumento per quanti in qualcosa di utilizzabile da chiunque:

Inoltre, è necessario che i tooltip siano corredati da spiegazioni pratiche.

Claude aggiunge un modello di tooltip in puro CSS ([data-tip]:hover::after con white-space: pre-line) e crea un singolo oggetto centralizzato TOOLTIPS all'inizio dello script. Ogni tooltip segue una struttura a tre domande:

1. Che cos'è - una definizione in chiaro
2. Come leggerlo - calcestruzzo soglie deboli / OK / buone
3. Perché è importante - un breve esempio del mondo reale

Ad esempio, il tooltip del Fattore Profit recita:

1TP9Fattore di profitto = profitto lordo ÷ perdita lorda.
Debole: <1,2 - OK: 1,2-1,5 - Buono: 1,5+.
Esempio: 1,87 significa che si guadagna $1,87 per ogni $1 perso.

I tooltip sono allegati al titolo, al punteggio principale, al voto in lettere, al nome di ogni pilastro e a ogni metrica grezza visualizzata dal plugin. Una sottile sottolineatura tratteggiata indica gli elementi che si possono passare con il mouse, in modo che gli utenti possano scoprirli.

[Schermata: Un tooltip che appare al passaggio del mouse su "Robustness scorecard"].

Passo 8 - Aggiornare CLAUDE.md per i plugin futuri

Questo è il passo che si compone nel tempo. Chiedete a Claude di documentare ciò che ha appena imparato:

Aggiornare CLAUDE.md - aggiungere istruzioni sui tooltip con esempi pratici e sulla clausola di esclusione della responsabilità. Controllare gli altri plugin per sapere cosa usano già.

Claude analizza i plugin esistenti per il loro markup e stile di disclaimer, scrive una nuova sezione "Tooltips & Explaining Metrics to Users" che comprende la regola delle tre domande, il modello di tooltip in puro CSS, copie pronte all'uso per le metriche più comuni e cinque esempi pratici. Aggiunge inoltre una sezione "Disclaimer (obbligatorio)" con il testo standard, il blocco CSS standard, il posizionamento corretto nel layout, il modello i18n e una lista di controllo per la revisione. Infine, aggiunge RobustnessScorecard alla tabella Existing Plugin Examples.

Dopo questa fase, il prossimo plugin creato parte da una base migliorata: la piattaforma impara letteralmente dalle proprie estensioni.

[Schermata: il file CLAUDE.md nella cartella del plugin dei risultati].

Passo 9 - Testare il plugin all'interno di StrategyQuant X

Chiudere SQX e riavviarlo (o fare clic sull'icona di ricarica nella scheda Risultati). Aprire una qualsiasi strategia da una banca dati, andare nella scheda Risultati e si dovrebbe vedere Scheda di valutazione della robustezza elencati insieme ai plugin esistenti.

Cosa verificare:

• Il punteggio complessivo e il voto in lettere si calcolano correttamente
• Tutte le barre dei sei pilastri vengono visualizzate con colori appropriati: rosso, ambra o verde a seconda del punteggio.
• Passando il mouse sui nomi dei pilastri, sul cerchio del punteggio, sul voto e su ogni metrica grezza, viene visualizzato un tooltip.
• Se si commuta la skin SQX tra la modalità chiara e quella scura, si commuta anche il plugin.
• Una strategia con meno di 100 operazioni vede il suo pilastro Sample Size limitato a 30.
• Una strategia unilaterale (long-only o short-only) è penalizzata sul pilastro Simmetria.

Se qualcosa va storto, aprite il browser DevTools del plugin (cliccate con il tasto destro del mouse all'interno del plugin → Inspect), copiate gli errori dalla console, incollateli in Claude Code e lasciate che Claude li corregga. Non si abbandona mai la conversazione.

[Schermata: La scheda SQX Results con la scheda Robustness Scorecard selezionata e una strategia reale caricata, che mostra il punteggio calcolato e tutti i pilastri].

Passo 10 - Iterazione

È qui che i plugin personalizzati smettono di sembrare un prodotto da consegnare una tantum e iniziano a essere uno strumento vivo. Ogni richiesta di follow-up a Claude può essere libera: conosce già il codice sorgente completo e può apportare modifiche mirate. Seguiti comuni:

• "Rendere i pesi dei pilastri configurabili dagli input nella parte superiore del plugin"."
• "Aggiungere i file locale per en/cs/de e collegarli a SET_LANGUAGE"."
• "Aggiungere un pannello di cronologia che mostri le ultime 5 strategie che ho segnato"."
• "Aggiungere un settimo pilastro per la coerenza temporale basata sulla distribuzione mensile degli utili"."
• "Esportiamo la scorecard corrente come PNG"."

Claude conserva la struttura già esistente e aggiunge solo ciò che avete richiesto.

Suggerimenti per un vibecoding produttivo

Richiedere sempre un piano prima del codice. Leggere un piano di implementazione costa trenta secondi e fa risparmiare trenta minuti di iterazione se il progetto è sbagliato.

Mantenere la configurazione centralizzata. Soglie, pesi, copia del tooltip, regole del colore: chiedete a Claude di inserirli tutti in un file CONFIG o oggetto TOOLTIPS all'inizio del file. Questo rende banale la messa a punto e possibile la traduzione futura.

Lasciate che CLAUDE.md crescere. Ogni volta che ci si accorge di ripetere una regola ("aggiungere sempre un disclaimer, aggiungere sempre i tooltip, abbinare sempre il tema esistente"), chiedere a Claude di scriverla in CLAUDE.md. I futuri plugin erediteranno automaticamente la regola.

Test su strategie con profili diversi. Provate una strategia con pochi scambi, una strategia unilaterale, una altamente redditizia e una appena redditizia. Se il punteggio non corrisponde alle vostre aspettative, regolate i punti di normalizzazione: una frase a Claude è sufficiente.

Non abbiate fretta. Un buon plugin per pomeriggio è un ritmo realistico. Uno strumento rifinito di cui ci si fida vale di più di diversi strumenti incompleti.

Cosa si può costruire dopo

La Robustness Scorecard è solo l'inizio. Durante la fase iniziale di brainstorming, Claude ha suggerito altri nove plugin, ognuno dei quali può essere costruito in un'unica sessione utilizzando lo stesso flusso di lavoro descritto sopra:

Ognuno di questi rappresenta circa un pomeriggio di conversazione con Claude Code. E poiché CLAUDE.md contiene ora gli schemi riutilizzabili di Robustness Scorecard - regole di tooltip, standard di disclaimer, convenzioni di tematizzazione - ogni plugin successivo parte da una base più alta del precedente.

Plugin di esempio esistenti

Analisi Prop

Posizione: user/extend/ResultsPlugins/Prop analytics/
Stack tecnologico: Vue 3 (runtime locale) + CSS puro, singolo indice.html
Scopo: Cruscotto statistico avanzato progettato specificamente per la valutazione delle strategie rispetto a regole per le imprese di negoziazione per conto proprio (FTMO, TopStep e simili).

Cosa fa

Prop analytics prende una singola strategia e la passa al vaglio di una società di consulenza prima di accettare o rifiutare il vostro conto. Invece di mostrare statistiche generiche, risponde alle domande esatte di una valutazione di finanziamento: "Questa strategia avrebbe infranto il limite di drawdown giornaliero? Un singolo giorno ha generato una parte eccessiva del profitto? Quanto si è avvicinata al fallimento?"."

Il plugin consente all'utente di configurare i parametri di valutazione in alto: capitale iniziale, limite di drawdown giornaliero, dimensione del contratto, leva massima consentita e una "soglia post-streak" per il rilevamento dei margini. Tutto ciò che si trova al di sotto viene ricalcolato in tempo reale.

[Schermata: Il pannello di input dell'analisi Prop con i parametri di valutazione (capitale iniziale, limite DD giornaliero, dimensione del contratto, leva massima, soglia post-streak)].

Schede analitiche chiave

L'analisi Prop è costruita come una griglia di carte focalizzate, ognuna delle quali risponde a una domanda:

• Prop Vincoli dell'impresa - peggior drawdown in un solo giorno, headroom del limite giornaliero, conformità alla regola di coerenza (la regola "nessun giorno oltre i 30-50% di profitto" utilizzata dalla maggior parte delle società)
• Quotidiano Profit & Loss - blocchi cronologici di giorni verdi/rossi con evidenziazione del giorno migliore e peggiore
• Rischio di margine e leva finanziaria - simula le regole sui margini dell'azienda calcolando il True Leverage (valore nozionale delle operazioni aperte simultaneamente ÷ saldo del conto) e segnalando le violazioni
• Bordo post-streak - misura se c'è un vantaggio statistico nell'aspettare X perdite consecutive prima di utilizzare la strategia (rendimento di base vs rendimento post-streak, tasso di vincita dopo le perdite, tempo medio di recupero)
• Durata del prelievo - tempo più lungo sott'acqua in giorni
• Comportamento del tempo di mantenimento - confronta la durata media delle operazioni vincenti con la durata media delle operazioni perdenti e segnala i comportamenti asimmetrici (tenere i perdenti più a lungo dei vincenti è un classico segnale di allarme psicologico)
• Punteggio di coerenza - deviazione standard mensile e percentuale di giorni redditizi
• Rischio di coda (95%) - Valore a rischio e expected shortfall (CVaR) per i 5% giorni peggiori
• Prestazioni del regime - classifica l'ambiente di mercato (Momentum, Choppy, Alta Volatilità) in cui la strategia prospera rispetto a quello in cui si dissangua

I modelli dimostrano

Prop analytics è il plugin di riferimento per tutto ciò che coinvolge elaborazione a livello di ordine. Recupera l'elenco completo degli ordini tramite GET_ORDERS e ricava il P&L giornaliero, l'esposizione alla leva, la frequenza delle strisce e i tempi di recupero interamente in JavaScript - nulla viene precalcolato da SQX.

È anche il riferimento per localizzazione. Il plugin viene fornito con traduzioni complete in dodici lingue (en, cs, de, es, fr, id, it, pl, pt, ru, zh-CN, zh-TW), tutte memorizzate nel file sottocartella locales/ come file JSON piatti. Ogni etichetta rivolta all'utente e ogni tooltip proviene da una chiave locale. L'helper Vue <code class="bg-bg-100/50 border border-0.5 border-border-300 text-danger-000 rounded-[0.4rem] px-1 py-px font-mono text-[13px]">tHtml() restituisce stringhe contenenti HTML, in modo che i tooltip possano includere <code class="bg-bg-100/50 border border-0.5 border-border-300 text-danger-000 rounded-[0.4rem] px-1 py-px font-mono text-[13px]"><strong> e <code class="bg-bg-100/50 border border-0.5 border-border-300 text-danger-000 rounded-[0.4rem] px-1 py-px font-mono text-[13px]"><br> tag.

E infine, è il riferimento per ricchi tooltips. Quasi tutti i titoli di metriche e carte hanno un con un attributo data-tip supportato da una chiave locale tooltipHtml. Il testo del tooltip non si limita a definire la metrica, ma spiega perché una società di consulenza se ne preoccupa, spesso con un esempio concreto in dollari ("Se iniziate il martedì con $100.000, vincete fino a $102k, ma poi chiudete in perdita fino a $96.000, il vostro calo giornaliero è di 4%...").

Prop Monte Carlo

Posizione: user/extend/ResultsPlugins/Prop Monte Carlo/
Stack tecnologico: Vue 3 (runtime locale) + HTML5 Canvas, singolo indice.html
Scopo: Corse Simulazioni Monte Carlo sulla sequenza di scambi di una strategia per rispondere alla domanda: "Qual è la probabilità che questa strategia sopravviva alla valutazione di un prop firm in presenza di ordini commerciali randomizzati?"."

Cosa fa

Un singolo backtest è un ordine specifico di operazioni. Monte Carlo chiede: E se gli stessi scambi fossero avvenuti in un ordine diverso? Mescolando la sequenza di operazioni migliaia di volte e riproducendo ogni permutazione in base alle regole della società di prop, il plugin produce una distribuzione di risultati possibili invece di un singolo numero fortunato o sfortunato.

Prop Monte Carlo prende l'elenco degli ordini via GET_ORDERS, consente all'utente di configurare i parametri della simulazione (numero di iterazioni, livello di confidenza, capitale iniziale, limite di perdita giornaliero, limite di drawdown massimo, obiettivo di profitto) ed esegue il tutto nel browser. L'output è una distribuzione visiva e i percentili chiave: una probabilità realistica di superare la valutazione.

Caratteristiche principali

• Simulazione lato client - Tutta la logica di randomizzazione e replay viene eseguita in JavaScript; non c'è un server, né un'API esterna.
• Parametri configurabili dall'utente - conteggio delle iterazioni, livelli di confidenza e regole della società di prop (perdita giornaliera, drawdown massimo, obiettivo di profitto)
• Visualizzazione su tela - la distribuzione, il ventaglio di equità o le fasce percentili sono resi direttamente ad un Elemento , con un ResizeObserver che gestisce il ridimensionamento dell'iframe e un ridisegno manuale su Modifiche di SET_TEMA
• Probabilità di superamento/errore - l'output del titolo: "In base a queste regole, questa strategia supera la valutazione in X% di esecuzioni simulate"."
• Localizzazione completa - stessa configurazione a dodici lingue dell'analitica Prop, con disclaimerHtml e tutte le etichette nella cartella locales/

[Schermata: Primo piano del grafico canvas che mostra la distribuzione Monte Carlo con i marcatori percentili sovrapposti].

I modelli dimostrano

Prop Monte Carlo è il plugin di riferimento per qualsiasi cosa che coinvolga un Grafico. Aspetti fondamentali da notare:

• Il canvas viene dimensionato dinamicamente tramite ResizeObserver (non window.resize, perché l'iframe SQX può ridimensionarsi indipendentemente)
• I colori della tela vengono letti dalle proprietà personalizzate dei CSS tramite getComputedStyle() al momento del disegno - le variabili CSS da sole non influenzano la pittura del canvas, quindi ogni cambiamento di tema attiva una chiamata manuale drawChart()
• Il codice di disegno è isolato dal sistema di reattività di Vue; Vue gestisce il chrome dell'interfaccia utente e il disegno del canvas è una semplice funzione chiamata dagli hook del ciclo di vita.

È anche il riferimento per Calcolo pesante per la simulazione nel browser. La struttura ad anello e il modo in cui lo stato reattivo viene aggiornato durante l'iterazione mantengono l'interfaccia utente reattiva anche durante le lunghe esecuzioni.

Conclusione

I plugin dei risultati personalizzati in StrategyQuant X erano una cosa che potevano costruire solo gli sviluppatori. Con l'applicazione desktop Claude Code, ora qualsiasi trader con un'idea chiara può costruirli in un pomeriggio e il flusso di lavoro di questa guida è l'esatta sequenza che ha prodotto il primo.

Per avviare il proprio plugin, aprire user/extend/ResultsPlugins/ in Claude Code ed eseguite i dieci passaggi sopra descritti, sostituendo la vostra idea alla Robustness Scorecard. Il sorgente completo del plugin di esempio si trova nella cartella ResultsPlugins/RobustnessScorecard/ - utilizzatelo come riferimento ogni volta che volete vedere come è strutturato un plugin finito.