Creación de plugins de resultados personalizados con código Claude

Guía paso a paso para ampliar StrategyQuant X mediante desarrollo asistido por IA

Introducción

A partir de StrategyQuant X build 144, Los plugins de resultados personalizados pueden crearse con ayuda de la IA. vibecodificación utilizando el Aplicación de escritorio Claude Code. StrategyQuant X siempre ha admitido plugins de resultados personalizados como archivos HTML estáticos cargado en la pestaña Resultados, pero crear uno era complicado y estaba fuera del alcance de la mayoría de los usuarios, ya que requería sólidos conocimientos de JavaScript, de la API PostMessage, del modelo de datos SQX y de la temática CSS.

A partir de la compilación 144, eso cambia. Ahora puedes crear plugins completos describiendo lo que quieres en inglés sencillo. Claude lee la guía de plugins SQX que viene con tu instalación, entiende las convenciones utilizadas por los plugins existentes y genera código de calidad de producción que puedes soltar directamente en tu pestaña Resultados.

Esta guía le guía a través del proceso completo de construcción de un plugin real - el Cuadro de mando de robustez, que califica cualquier estrategia de 0 a 100 en seis pilares de solidez. Cada paso es algo que puede reproducir en su propia sesión de Claude Code. El cuadro de mando puede descargarse aquí:

[Captura de pantalla: El plugin Robustness Scorecard terminado ejecutándose dentro de la pestaña Resultados de SQX, mostrando el círculo de puntuación, la letra de calificación y las barras de pilares].

Requisitos previos

Antes de empezar, asegúrate de que tienes:

• StrategyQuant X instalado - licencia Pro o Ultimate (el nivel Starter no admite plugins personalizados)
• Aplicación de escritorio Claude Code instalado desde claude.com/claude-code
• Una comprensión básica de dónde user/extend/ResultsPlugins/ vive en su instalación SQX
• Al menos una estrategia backtested disponible en un banco de datos para probarla

No se requieren conocimientos de JavaScript, Vue o CSS.

Paso 1 - Abra la carpeta plugins en Claude Code

Inicie la aplicación de escritorio Claude Code y abra el archivo user/extend/ResultsPlugins/ de su instalación de SQX (Archivo → Abrir carpeta, o arrastre la carpeta al icono de la aplicación).

Cuando se abre la carpeta, Claude Code recoge automáticamente el CLAUDE.md mantenido por el equipo de SQX. Ese archivo contiene la arquitectura completa del plugin, la API PostMessage completa, la lista de campos de estadísticas disponibles, las reglas de tematización, los requisitos de descargo de responsabilidad y los patrones de información sobre herramientas. A partir de este momento, Claude sabe todo lo que necesita para construir un plugin que encaje de forma natural junto a los oficiales.

[Captura de pantalla: Ventana de Claude Code con la carpeta ResultsPlugins abierta en Claude Code].

Paso 2 - Deja que Claude explore el entorno

Envía a Claude tu primer mensaje:

Escanee esta carpeta para las habilidades y las instrucciones para la codificación resultado plugin.

Claude lee CLAUDE.md y te resume los hechos clave: los plugins viven en su propia subcarpeta con un único index.html, la comunicación con SQX se realiza exclusivamente a través de postMessage.5 border-border-300 text-danger-000 rounded-[0.4rem] px-1 py-px font-mono text-[13px]">postMessage, el cuerpo debe utilizar overflow:hidden, Vue 3 se soporta a través de un runtime local, etc.

Este paso de carga del contexto es esencial. Una vez que Claude confirme que entiende el entorno, todo lo que produzca después respetará las convenciones SQX sin que tengas que volver a enunciarlas.

[Captura de pantalla: Ventana de chat de Claude Code mostrando el resumen de Claude de la arquitectura del plugin después de leer CLAUDE.md].

Paso 3 - Lluvia de ideas sobre plugins

En lugar de comprometerse de inmediato con una aplicación, pida opciones a Claude:

Escribir para mí un nuevo plugin para SQX que puntuará la estrategia de robustez basada en los resultados de las estadísticas, sugerir 10 ideas.

Claude responde con diez enfoques diferentes: cuadros de mando ponderados, listas de control de semáforos, analizadores IS/OOS, pruebas de estrés Monte Carlo, gráficos de radar, detectores de riesgo de cola, medidores de sobreajuste, y más. Cada idea va acompañada de una breve descripción y de los campos estadísticos en los que se basaría.

Esta fase de lluvia de ideas es una de las mayores ventajas de trabajar con un colaborador de AI. Puedes ver una serie de opciones que nunca habrías considerado, y mantienes el control de la dirección final.

[Captura de pantalla: La lista de 10 ideas de plugins en el chat de Claude Code, con breves descripciones debajo de cada una].

Paso 4 - Solicitar un plan de ejecución

Cuando hayas elegido una idea, pide un plan detallado antes de escribir el código:

Redactar el plan de aplicación de la idea 1. Cuadro de mando de robustez (0-100).

Claude elabora un plan paso a paso: la estructura de carpetas, los datos que va a recuperar (tres GET_STATS - ambas direcciones, sólo largo, sólo corto), el modelo de puntuación con seis pilares y sus pesos, los puntos de normalización para cada métrica, el diseño de la interfaz de usuario con un círculo de puntuación y barras de pilares, el orden de construcción, y una lista explícita de los recortes de alcance para las cosas que serán no estar en la versión uno.

Lea detenidamente el plan. Este es el momento más barato para cambiar de dirección: arreglar un error conceptual ahora lleva una frase, mientras que arreglarlo después de la implementación requiere varias iteraciones.

[Captura de pantalla: El plan de aplicación en el chat, mostrando la tabla de pesos de los pilares y la configuración de la puntuación].

Paso 5 - Aprobar y generar el código

Cuando el plan parece correcto, basta con una simple confirmación:

ok hazlo

Claude crea un nuevo RobustnessScorecard/, copia el vue.global.prod.js de un plugin existente (SQX se ejecuta offline, por lo que todas las dependencias deben ser locales), y genera un único index.html que contiene:

• Variables CSS para temas claros y oscuros
• Una aplicación Vue 3 con manejador de eventos de mensaje
• Tres paralelos Peticiones GET_STATS con un contador que espera todas las respuestas antes de calcular
• A Objeto CONFIG que contiene los pesos de los pilares
• A función norm() para la normalización métrica lineal a trozos
• Cálculos de los seis pilares con alternativas en caso de falta de datos
• Una puerta de entrada de pocas operaciones (menos de 100 operaciones limita el pilar de la muestra a 30)
• Reponderación automática cuando un pilar no tiene entradas válidas
• La interfaz de usuario completa: círculo de puntuación, letra de calificación, veredicto, principales puntos débiles y barras de pilares.

Aproximadamente 500 líneas de código de calidad de producción en un único archivo, listo para colocar en SQX.

[Captura de pantalla: La carpeta RobustnessScorecard recién creada en el árbol de archivos con index.html y vue.global.prod.js visibles].

Paso 6 - Añadir la cláusula de exención de responsabilidad estándar

Cualquier herramienta que interprete los resultados de las operaciones debe incluir una cláusula de exención de responsabilidad. Claude ya conoce esta regla por CLAUDE.md, pero puede activar el paso explícitamente:

Añade también el descargo de responsabilidad correspondiente a los demás plugins.

Claude analiza cómo Prop analytics y Prop Monte Carlo implementan sus descargos de responsabilidad, aplica la misma clase CSS (11px, color apagado, border-top, texto justificado, flex-shrink:0), y coloca el bloque como último elemento dentro de #app. En lo que respecta al cuadro de mando, Claude añade una frase más para aclarar que una puntuación alta no garantiza el rendimiento futuro y que una puntuación baja no garantiza el fracaso.

Dado que Claude coincide con el patrón utilizado por los plugins existentes, el descargo de responsabilidad es visualmente coherente con el resto de la pestaña Resultados.

[Captura de pantalla: La vista previa del plugin muestra la barra de descargo de responsabilidad en la parte inferior del iframe, bajo las barras de pilares].

Paso 7 - Añadir información sobre herramientas con explicaciones prácticas

Este es el paso que convierte el plugin de una herramienta cuántica en algo que cualquiera puede utilizar:

Haz también los tooltips con explicación práctica.

Claude añade un patrón de información sobre herramientas puramente CSS ([data-tip]:hover::after con white-space: pre-line) y crea un único objeto TOOLTIPS centralizado en la parte superior del script.5 border-border-300 text-danger-000 rounded-[0.4rem] px-1 py-px font-mono text-[13px]">TOOLTIPS en la parte superior del script. Cada tooltip sigue una estructura de tres preguntas:

1. Qué es - una definición sencilla
2. Cómo leerlo - umbrales de hormigón débil / OK / bueno
3. Por qué es importante - un breve ejemplo del mundo real

Por ejemplo, la información sobre el factor Profit dice:

1TP9Factor de Beneficio = beneficio bruto ÷ pérdida bruta.
Débil: <1,2 - OK: 1,2-1,5 - Bueno: 1,5+.
Ejemplo: 1,87 significa que ganas $1,87 por cada $1 perdido.

Los tooltips se adjuntan al título, a la puntuación máxima, a la nota, al nombre de cada pilar y a cada métrica bruta que muestra el complemento. Un sutil subrayado de puntos marca lo que se puede pasar por encima para que los usuarios puedan descubrirlo.

[Captura de pantalla: ventana emergente al pasar el ratón por encima de "Tarjeta de puntuación de robustez"].

Paso 8 - Actualizar CLAUDE.md para futuros plugins

Este es el paso que se compone a través del tiempo. Pide a Claude que documente lo que acaba de aprender:

Actualizar CLAUDE.md - añadir instrucciones sobre tooltips con ejemplos prácticos y sobre el descargo de responsabilidad. Compruebe los otros plugins para lo que ya utilizan.

Claude escanea los plugins existentes en busca de su marcado y estilo de descargo de responsabilidad, escribe una nueva sección de "Información sobre herramientas y explicación de métricas a los usuarios" que cubre la regla de las tres preguntas, el patrón de información sobre herramientas de CSS puro, copia lista para usar para métricas comunes y cinco ejemplos prácticos. También añade una sección de "Exención de responsabilidad (obligatoria)" con el texto estándar, el bloque CSS estándar, la colocación correcta en el diseño, el patrón i18n y una lista de comprobación de revisión. Por último, añade RobustnessScorecard a la tabla Existing Plugin Examples.

Después de este paso, el siguiente plugin que crees parte de una base mejorada: la plataforma aprende literalmente de sus propias extensiones.

[Captura de pantalla: El archivo CLAUDE.md en la carpeta del plugin de resultados].

Paso 9 - Pruebe el plugin dentro de StrategyQuant X

Cierre SQX e inícielo de nuevo (o haga clic en el icono de recarga de la pestaña Resultados). Abra cualquier estrategia de un banco de datos, vaya a la pestaña Resultados y debería ver Cuadro de mando de robustez junto a los plugins existentes.

Lo que hay que verificar:

• La puntuación global y la calificación por letras se calculan correctamente
• Las seis barras de pilares se representan con los colores adecuados: rojo, ámbar o verde, según la puntuación.
• Al pasar el ratón por encima de los nombres de los pilares, el círculo de puntuación, la nota y todas las métricas brutas, aparece una información sobre herramientas.
• Al cambiar la piel SQX entre el modo claro y oscuro cambia el plugin también
• Una estrategia con menos de 100 operaciones ve su pilar de Tamaño de la muestra limitado al 30
• Una estrategia unilateral (sólo a largo o sólo a corto) se penaliza en el pilar Simetría

Si algo va mal, abre el navegador del plugin DevTools (clic derecho dentro del plugin → Inspeccionar), copia cualquier error de la consola, pégalo en Claude Code y deja que Claude lo arregle. Nunca abandonas la conversación.

[Captura de pantalla: La pestaña Resultados de SQX con la pestaña Cuadro de mando de robustez seleccionada y una estrategia real cargada, mostrando la puntuación calculada y todos los pilares].

Paso 10 - Iterar

Aquí es donde los plugins personalizados dejan de sentirse como un producto de una sola vez y empiezan a sentirse como una herramienta viva. Cada solicitud de seguimiento a Claude puede ser libre: ya conoce el código fuente completo y puede realizar cambios específicos. Seguimientos habituales:

• "Hacer que los pesos de los pilares sean configurables desde entradas en la parte superior del plugin"."
• "Añade archivos locale para en/cs/de y conéctalos a SET_LANGUAGE"."
• "Añadir un panel de historial que muestre las últimas 5 estrategias puntuadas"."
• "Añade un 7º pilar para la coherencia temporal basado en la distribución mensual de beneficios"."
• "Permítame exportar el cuadro de mando actual como PNG"."

Claude conserva la estructura que ya tienes y añade sólo lo que has pedido.

Consejos para una vibecodificación productiva

Solicite siempre un plano antes del código. Leer un plan de implantación le cuesta treinta segundos y le ahorra treinta minutos de iteración si el diseño es erróneo.

Mantener la configuración centralizada. Umbrales, pesos, copia de información sobre herramientas, reglas de color: pídale a Claude que los ponga todos en un CONFIG o TOOLTIPS en la parte superior del archivo. Esto hace que el ajuste sea trivial y que sea posible una futura traducción.

Sea CLAUDE.md crecer. Cada vez que te des cuenta de que repites una regla ("añadir siempre una cláusula de exención de responsabilidad, añadir siempre información sobre herramientas, coincidir siempre con el tema existente"), pide a Claude que la escriba en CLAUDE.md. Los futuros plugins heredarán la regla automáticamente.

Prueba en estrategias con diferentes perfiles. Pruebe una estrategia con pocas operaciones, una estrategia unilateral, una muy rentable y otra apenas rentable. Si la puntuación no se ajusta a tus expectativas, ajusta los puntos de normalización: una frase a Claude es suficiente.

No tengas prisa. Un buen plugin por tarde es un ritmo realista. Una herramienta pulida en la que confíes vale más que varias a medio terminar.

Qué puede construir a continuación

El cuadro de mando de robustez es sólo el principio. Durante la fase inicial de intercambio de ideas, Claude sugirió otros nueve plugins, cada uno de los cuales podía crearse en una sola sesión utilizando el mismo flujo de trabajo descrito anteriormente:

Cada una de ellas es aproximadamente una tarde de conversación con Claude Code. Y porque CLAUDE.md contiene ahora los patrones reutilizables de Robustness Scorecard -reglas de información sobre herramientas, normas de descargo de responsabilidad, convenciones de tematización- cada plugin posterior parte de una línea de base más alta que el anterior.

Plugins de ejemplo existentes

Análisis Prop

Ubicación: user/extend/ResultsPlugins/Prop analytics/
Pila tecnológica: Vue 3 (tiempo de ejecución local) + CSS puro, único index.html
Propósito: Cuadro de mando estadístico avanzado diseñado específicamente para evaluar estrategias frente a normas de las sociedades de negociación por cuenta propia (FTMO, TopStep y similares).

Para qué sirve

Prop analytics toma una única estrategia y la pasa por la lente que utilizaría una empresa de apuntalamiento antes de aceptar o rechazar su cuenta. En lugar de mostrar estadísticas genéricas, responde a las preguntas exactas que plantea una evaluación de financiación: "¿Habría superado esta estrategia el límite de reducción diario? ¿Generó un solo día demasiados beneficios? ¿Qué tan cerca estuvo de fallar?"

El complemento permite al usuario configurar los parámetros de evaluación en la parte superior: capital inicial, límite diario de reducción, tamaño del contrato, apalancamiento máximo permitido y un "umbral posterior a la racha" para la detección de bordes. Todo lo demás se recalcula en tiempo real.

[Captura de pantalla: El panel de entrada de análisis de Prop con los parámetros de evaluación (Capital inicial, Límite de DD diario, Tamaño del contrato, Apalancamiento máximo, Umbral posterior a la racha)].

Fichas analíticas clave

Prop analytics se construye como una cuadrícula de tarjetas enfocadas, cada una de las cuales responde a una pregunta:

• Prop Restricciones de la empresa - la peor depreciación en un solo día, el límite máximo diario, el cumplimiento de la norma de coherencia (la norma de "no superar en un solo día los 30-50% de beneficios" utilizada por la mayoría de las empresas)
• Diario 1TP9Equilibrio y pérdida - bloques cronológicos de días verdes/rojos con resaltado de mejor y peor día
• Riesgo de margen y apalancamiento - simula las normas de márgenes de la empresa calculando el apalancamiento real (valor nocional de las operaciones abiertas simultáneamente ÷ saldo de la cuenta) y señala los incumplimientos.
• Borde posterior a la racha - mide si hay alguna ventaja estadística en esperar X derrotas consecutivas antes de desplegar la estrategia (rentabilidad de referencia frente a rentabilidad tras la racha, tasa de ganancias tras las derrotas, tiempo medio de recuperación).
• Drawdown Duración - mayor tiempo bajo el agua en días
• Comportamiento del tiempo de espera - compara la duración media de las operaciones ganadoras con la de las perdedoras y detecta comportamientos asimétricos (mantener a los perdedores más tiempo que a los ganadores es una señal de alarma psicológica clásica)
• Puntuación de coherencia - desviación típica mensual y porcentaje de días rentables
• Riesgo de cola (95%) - Valor en riesgo y déficit esperado (CVaR) para el peor 5% de los días
• Rendimiento del régimen - clasifica el entorno de mercado (Momentum, Choppy, High Volatility) en el que la estrategia prospera y en el que no.

Patrones que demuestra

Prop analytics es el plugin de referencia para todo lo que implique tratamiento de pedidos. Obtiene la lista completa de pedidos a través de GET_ORDERS y obtiene las ganancias y pérdidas diarias, la exposición al apalancamiento, las frecuencias de las rachas y los tiempos de recuperación completamente en JavaScript - nada viene precalculado de SQX.

También es la referencia para localización. El plugin incluye traducciones completas en doce idiomas (en, cs, de, es, fr, id, it, pl, pt, ru, zh-CN, zh-TW), todas ellas almacenadas en el archivo locales/ como archivos JSON planos. Cada etiqueta orientada al usuario y cada tooltip proceden de una clave de localización. El ayudante 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() muestra cadenas que contienen HTML para que la información sobre herramientas pueda incluir <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> y <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> tags.

Y por último, es la referencia para tooltips enriquecidos. Casi todos los títulos de métricas y cartas tienen un atributo data-tip respaldado por una clave local tooltipHtml. El texto de información sobre herramientas no sólo define la métrica, sino que explica por qué una empresa de accesorios se preocupa por ella, a menudo con un ejemplo concreto en dólares ("Si empiezas el martes con $100.000, ganas a $102k, pero luego cierras perdedor para caer a $96.000, tu caída diaria es de 4%...").

Prop Monte Carlo

Ubicación: user/extend/ResultsPlugins/Prop Monte Carlo/
Pila tecnológica: Vue 3 (tiempo de ejecución local) + HTML5 Canvas, sencillo index.html
Propósito: Ejecuta Simulaciones Monte Carlo en la secuencia de operaciones de una estrategia para responder a la pregunta: "¿Qué probabilidades hay de que esta estrategia sobreviva a una evaluación de empresas de utilería bajo ordenamientos comerciales aleatorios?"."

Para qué sirve

Un backtest es una ordenación específica de operaciones. Monte Carlo pregunta: ¿y si las mismas operaciones se hubieran producido en un orden diferente? Al barajar la secuencia de operaciones miles de veces y reproducir cada permutación según las reglas de la empresa de accesorios, el complemento produce una distribución de posibles resultados en lugar de un único número de suerte o mala suerte.

Prop Monte Carlo toma la lista de pedidos a través de GET_ORDERS, permite al usuario configurar los parámetros de la simulación (número de iteraciones, nivel de confianza, capital inicial, límite diario de pérdidas, límite máximo de reducción, objetivo de beneficios), y lo ejecuta todo en el navegador. El resultado es una distribución visual más los percentiles clave: una probabilidad realista de superar la evaluación.

Características principales

• Simulación del lado del cliente - toda la lógica de aleatorización y repetición se ejecuta en JavaScript; no hay servidor ni API externa
• Parámetros configurables por el usuario - Recuento de iteraciones, niveles de confianza y reglas de la empresa de accesorios (pérdida diaria, reducción máxima, objetivo de beneficios).
• Visualización basada en lienzos - la distribución, el abanico de equidad o las bandas percentiles se rinden directamente a un Elemento , con un ResizeObserver que gestiona el cambio de tamaño del iframe y un redibujado manual en SET_THEME changes.
• Probabilidad de aprobado/suspenso - el titular de salida: "Bajo estas reglas, esta estrategia pasa la evaluación en X% de ejecuciones simuladas"
• Localización completa - misma configuración de doce idiomas que Prop analytics, con disclaimerHtml y todas las etiquetas de la carpeta locales/

[Captura de pantalla: Detalle del gráfico de lienzo que muestra la distribución de Monte Carlo con marcadores de percentiles superpuestos].

Patrones que demuestra

Prop Monte Carlo es el plugin de referencia para cualquier cosa que implique un gráfico. Cosas importantes que hay que tener en cuenta:

• El lienzo se dimensiona dinámicamente mediante ResizeObserver (no window.resize, porque el iframe SQX puede cambiar de tamaño independientemente)
• Los colores de pintura del lienzo se leen de las propiedades personalizadas de CSS a través de getComputedStyle() en el momento de dibujar - las variables CSS por sí solas no afectan a la pintura del lienzo, por lo que cada cambio de tema desencadena una llamada manual drawChart()
• El código de dibujo está aislado del sistema de reactividad de Vue; Vue gestiona el cromo de la interfaz de usuario y el dibujo del lienzo es una función simple llamada desde los ganchos del ciclo de vida.

También es la referencia para cálculo de simulación en el navegador. La estructura de bucle y el modo en que se actualiza el estado reactivo durante la iteración mantienen la capacidad de respuesta de la interfaz de usuario incluso durante las ejecuciones largas.

Conclusión

Los plugins de resultados personalizados en StrategyQuant X solían ser algo que sólo podían crear los desarrolladores. Con la aplicación de escritorio Claude Code, ahora son algo que cualquier trader con una idea clara puede crear en una tarde - y el flujo de trabajo de esta guía es la secuencia exacta que produjo el primero.

Para iniciar su propio plugin, abra user/extend/ResultsPlugins/ en Claude Code y ejecute los diez pasos anteriores, sustituyendo la Robustness Scorecard por su propia idea. El código fuente completo del plugin de ejemplo está en tu carpeta ResultsPlugins/RobustnessScorecard/ - utilízalo como referencia siempre que quieras ver cómo está estructurado un plugin terminado.