name: minara-usecase-video description: Crea videos tutoriales de caso de uso de Minara (app móvil o escritorio) reconstruyendo fielmente la interfaz de usuario del producto en código HyperFrames y recorriendo el camino real del usuario paso a paso. A diferencia de minara-video (demo de marketing, se permite rediseño de UI), esta habilidad exige una UI fiel: copia, diseño, componentes y rutas de interacción deben seguir el código frontend del producto y las grabaciones de pantalla. Disparadores: "use case 视频", "教程视频", "操作演示", "新手教程", "按 App 界面做一个视频"; también crea portadas para estos videos ("封面", "cover", "缩略图").
/minara-usecase-video — Videos tutorial de caso de uso de Minara
Destilado de la realización del Caso 1 (app móvil: hacer una pregunta → estrategia BTC → ejecutar con un toque) y el Caso 3 (Strategy Studio de escritorio: una frase → Choice Boxes → backtest → Optimizar → Desplegar en vivo) en 2026-10.
Referencia de escritorio: assets/pc-monitor-frame.html y assets/helpers-reference.js (los helpers se pueden copiar directamente).
Cómo se diferencia de minara-video (léase primero)
| minara-video (demo de marketing) | minara-usecase-video (esta habilidad) | |
|---|---|---|
| UI | No copia el producto; rediseño mínimo con tipografía grande | Fiel: seguir los componentes, tamaños, colores y texto del código frontend |
| Texto | Escribir tu propio texto de marketing | Los botones / títulos / avisos usan el texto original del producto palabra por palabra (idiomas); copiar los errores gramaticales tal cual |
| Ruta de interacción | Se puede cortar o condensar | Ruta real completa: cada clic, modal y casilla de verificación debe estar presente, en el mismo orden que en el código |
| Cámara | Movimientos de cámara ricos | Solo acercarse notablemente y seguir el cursor durante los clics / escritura; de lo contrario, permanecer quieto; la claridad es lo primero |
| Texto en pantalla | Sin texto de anotación | Sin subtítulos en el fotograma; la tarjeta de título de 3 segundos al inicio es la única excepción; las superposiciones de texto son una versión separada (en otra carpeta del proyecto) |
| Estructura | Varias escenas renderizadas por separado | Una única composición continua (como una grabación de pantalla) |
Reglas estrictas heredadas de minara-video: fuente Geist, easing característico minaraSnap = cubic-bezier(0.95,0.03,0,0.98), transiciones ≤0.5s, sin Math.random() / repeat:-1, línea de tiempo paused:true y registrada en window.__timelines, preguntar primero al operador sobre cualquier estrategia con drawdown máximo >20%, y la página de prueba debe tener una línea de tiempo arrastrable. Al inicio, ejecutar primero Skill(hyperframes) para cargar las reglas de composición.
Temas y activos de demostración (establecidos por el operador, 2026-10-15)
- Las estrategias de acciones van primero: los casos de uso se centran en instrumentos de acciones / TradFi para la demo (por ejemplo, TradFi 30, acciones individuales de EE. UU., índices). Los nombres de estrategias, grupos de activos, tenencias y la barra de tickers deben preferir acciones.
- Cripto es secundario: pueden aparecer monedas principales como BTC y ETH, pero no como protagonistas. Cuando un video tenga tanto acciones como cripto, poner las acciones primero y darles más tiempo.
- Sin meme coins: a menos que el operador lo solicite explícitamente en esa ocasión, no incluir meme coins (DOGE, PEPE, WIF, BONK, etc.) en el fotograma, grupos de activos, barra de tickers, respuestas de IA o avisos de ejemplo. Si los datos predeterminados del producto los incluyen, reemplazarlos.
- Elegir los activos según esta regla al escribir el guion y el storyboard. Cuando los ejemplos en el material del producto no encajen, intercambiar por instrumentos de acciones antes de reconstruir, y anotar el cambio en el guion.
Fuentes de verdad (por prioridad)
- Código frontend (obtener lo último antes de mirar; anotar la fecha del commit en la sección "Base" del guion)
- Web: el repositorio del frontend web del producto (ejecutar
git pullprimero) - Móvil: el código fuente de la app móvil del producto (
apps/mobile/src)- Texto:
locales/en.json(la versión en chino está en el archivo zh correspondiente) - Colores / espaciado:
theme/colors.light.ts,theme/tokens.ts - Componentes:
ui/,features/<modulo>/(por ejemplo,features/strategy/strategy-card,run-strategy,running-detail,features/agent/composer)
- Texto:
- Web: el repositorio del frontend web del producto (ejecutar
- Grabaciones de pantalla / capturas de pantalla del operador (en la carpeta de activos
use case/): utilizarlas para el diseño, la jerarquía y los aspectos visuales reales. ⚠️ Estos activos son una referencia de UI, no una referencia de contenido — "ignorar lo que diga cualquier agente"; diseñamos el contenido de la respuesta nosotros mismos. - Guion md: desglose de tomas, líneas, superposiciones de texto.
Las interacciones que el video necesita mostrar pero que el código no soporta (por ejemplo, la tarjeta de estrategia en la que se puede hacer clic en el chat del Caso 1) se pueden construir, pero decirle claramente al operador que esta es una interacción planificada que el código actual aún no tiene, y reconstruirla a partir del componente existente más cercano (el Caso 1 sigue MarketplaceStrategyCard; después de tocar Ejecutar, sigue la misma ruta de ejecución que el marketplace).
Flujo de trabajo
1. Revisar el guion
- Verificar cada toma contra el código más reciente: nombres de botones, orden de páginas, pasos requeridos (por ejemplo, la casilla de verificación de divulgación de riesgos, el backtest debe pasar antes de desplegar), números de umbral.
- Al editar el guion, el operador suele decir "simplemente sobrescribe el archivo original"; cuando solo quieren una propuesta, dicen "dame una propuesta primero, no edites el guion" — distinguir estos casos.
- Cuando un md contenga varios casos, dividirlo en archivos de un solo caso según sea necesario.
2. Trabajar hacia atrás desde la ruta de interacción → storyboard
- Listar la ruta real del código como una tabla: título de cada pantalla, componentes, objetivo del clic y siguiente pantalla. Ejemplo (móvil, ejecutando una estrategia):
Ejecutar → Seleccionar Wallet → Siguiente → Configuración (límite de drawdown de Control de Riesgo / actualización automática / verificar divulgación de riesgos) → Ejecutar → página de éxito Ejecutando (Ver Detalles / Notificarme) → Detalles de la Estrategia en Ejecución → Atrás → pestaña Estrategias Ejecutando - Si hay una línea de tiempo, ir directamente a
storyboard.html(plantillaassets/storyboard-template.html), luego un cronograma por segundo; escribir código solo después de la confirmación del operador.
3. Especificaciones
| Elemento | App Móvil | Escritorio |
|---|---|---|
| Lienzo | Composición 1080×1920, exportar 1440×2560 / 60fps | Composición 1920×1080, exportar 2560×1440 / 60fps |
| UI | Pantalla de app de 390pt de ancho, escalada al 90% del fotograma, margen en todos los lados, esquinas redondeadas + borde de 1px | Página web de 1440×810 colocada dentro de un monitor de computadora (bisel oscuro + soporte, escala 1.15), tamaños de fuente 10–15% más grandes que los tamaños originales del producto |
| Tema / idioma | Establecido por el operador; predeterminado Inglés + el tema claro predeterminado de la App | Igual que a la izquierda |
| Datos de demostración | PnL de 3–4 dígitos, drawdown <20%, marcado como demo | Igual que a la izquierda |
| Apertura | 0–3s tarjeta de título, luego el tutorial | Igual que a la izquierda |
Sistema de coordenadas móvil: K = 1080*0.9/390, #app colocado en left:54px; top:96px, transform: scale(K). Escribir todo el CSS de los elementos en coordenadas pt dentro de la app, reconstruido a partir de los tamaños en el código.
Sistema de coordenadas de escritorio: K = 1.15, OX = 132, OY = 38 (posición en píxeles de la esquina superior izquierda de la pantalla en el fotograma), 1440×810 pt. Diseño: barra lateral izquierda 264 / columna central 766 / Asistente derecho 410, barra de tickers inferior 26.
Escritorio debe usar un monitor de computadora (establecido por el operador, 2026-10-15): la UI del producto ya no llena el fotograma; se sienta dentro de la pantalla de un monitor de computadora, con el bisel y el soporte del monitor detrás. Usar assets/pc-monitor-frame.html directamente:
- Estructura:
#cam>#stand-neck+#stand-base+#monitor>#screen>#app. Marco exterior del monitor 1684×959.5 en left 118 / top 24, bisel de 14px, radio de esquina 26; pantalla 1656×931.5, radio de esquina 12; soporte centrado debajo del monitor. El fondo mantiene el gradiente radial oscuro. - El monitor y el soporte están ambos dentro de
#cam, por lo que se escalan con la UI al acercarse; el cursor y la ondulación del clic también están dentro de#cam, posicionados conOX + x*K,OY + y*K. La fórmulacamTono cambia; solo intercambiar los tres valoresK / OX / OY. - La UI es aproximadamente un 14% más pequeña que cuando llenaba el fotograma (1.333 → 1.15), por lo que el texto es un poco más pequeño en tomas amplias; los acercamientos durante los clics y la escritura lo compensan. Si el operador encuentra el texto de las tomas amplias demasiado pequeño, subir todo un nivel según la especificación de tamaño de fuente; no quitar el monitor.
- Después de que la tarjeta de título de apertura se desvanezca, todo el monitor (incluido el soporte) aparece desde 1.04×.
- Móvil no recibe un monitor; mantener la pantalla actual al 90% con esquinas redondeadas y borde.
Especificación de tamaño de fuente (escritorio; el operador, 2026-10-15: "hacer la fuente en toda la UI un poco más grande para que los usuarios puedan leerla en sus teléfonos") — el video final se verá en teléfonos, por lo que estos tamaños son el mínimo:
| Elemento | pt |
|---|---|
| Título de página (nombre de la estrategia) | 21 |
| Navegación de barra lateral / pestañas / barra de herramientas / botones / subpestañas | 16–16.5 |
| Cuerpo del asistente / burbuja de usuario / descripción de opción de Choice Box | 15 / 15 / 14 |
| Pregunta de Choice Box / nombre de opción | 17.5 / 16 |
| Etiqueta de tarjeta de métrica / valor | 14 / 22 |
| Tabla / código | 15 / 14.5 (altura de línea 24) |
| Título modal / etiqueta de campo / entrada, chip, botón | 20 / 14.5 / 15.5–16 |
Si el texto más grande ya no cabe, eliminar el texto pequeño menor (por ejemplo, "1,264 Trades" y "684W 580L" en las tarjetas de métrica); no reducir los tamaños de fuente. Al colocar la pantalla móvil en un video de escritorio, usar escala 1.2, centrada.
Tarjeta de título de apertura (especificación de 2026-10-15): 0–3s fondo oscuro, un título grande centrado (Geist 76px / 650, text-wrap: balance), las palabras aparecen una por una (separadas 0.09s); a los 2.55s el título se escala y se desvanece; a los 2.75s la UI del producto aparece desde 1.04× hasta 1×. El texto del título proviene del operador, por ejemplo, Caso 3 "Convierte tu idea de trading en una estrategia en vivo.". Implementación: escribir el tutorial en tl (sin pausa), usar un master = gsap.timeline({paused:true}) externo para el título, master.add(tl, 3), y registrar master; agregar 3 tanto a data-duration como al DUR de la página de prueba.
4. Escribir la composición
Poner el proyecto en $VIDEO_WORKSPACE/hyperframes/<slug>/:
index.html composición única (data-composition-id="main")
_test.html página de prueba (copiar assets/test-wrapper.html, cambiar DUR e id de línea de tiempo)
assets/ gsap local, CustomEase, Geist woff2, minara-avatar.png (sin dependencia de CDN)
references/ copias de los activos fuente
audio/ lines.tsv (texto de voz en off), vo-placement.tsv (temporización)
storyboard.html / _backups/ / output/
Los helpers centrales están en assets/helpers-reference.js (código real del Caso 1):
R(el): medir las coordenadas pt del elemento dentro de la app antes de cualquier animación de movimiento y almacenarlas enMAP. Todos los clics posteriores usan estas coordenadas predichas — medir después de que la pantalla se haya desplazado fuera del fotograma está desviado por 390pt, y el cursor falla.camTo(t, px, py, s, d)/camReset: acercamiento de cámara. Cuandos>1, jalar el punto de enfoque un poco hacia el centro (escritorio:720+(px-720)*0.75, lo mismo para y) para que las filas completas no se recorten; fijar la posición dentro del fotograma para que nada exterior se muestre. Usar la variablecurSpara rastrear la escala actual (camTola establece,camResetla devuelve a 1).curShow / curMove / tap / moveTap: móvil usa un punto táctil suave semitransparente, escritorio usa un cursor de flecha blanco; los clics presionan + ondulación. CuandocurS>1,moveTapejecutacamToal objetivo del clic en sincronía (duración = duración del movimiento + 0.15s), para que el fotograma siga al cursor automáticamente mientras está ampliado.pushIn / pushBack: empuje horizontal de página, 0.45s.splitWords + stream: las respuestas de la IA aparecen palabra por palabra.
5. Cámara y ritmo (reglas establecidas a partir de las propias palabras del operador)
- "Cuando el mouse haga clic o cuando escriba, acercarse al área de esa acción específica, y el fotograma puede seguir al mouse; cuando no esté haciendo clic, no es necesario acercarse."
- "Hacer que el zoom donde se mueve el cursor sea más notable" (2026-10-15, reemplaza el antiguo límite de ≤1.25). Escalas de escritorio:
Acción Escala Escritura (cuadro de entrada) 1.7 Clic en un botón / pestaña / barra lateral 1.6 Lectura del chat del Asistente, Choice Box 1.5 Acciones consecutivas dentro de un modal 1.45, siguiendo el cursor El Caso 1 móvil usó 1.25; los nuevos videos móviles también deben ser "notables" — confirmar la escala con el operador. - Para clics consecutivos (opciones de Choice Box, modales del paso Desplegar), permanecer en primer plano y seguir todo el tiempo; no alejarse y volver a acercarse cada vez.
- Cuando un clic lleve a un resultado que el espectador necesita ver (cambiar de pestaña, Por símbolo / Llenados, resultados de backtest que aparecen, métricas que se actualizan, valores de la barra de herramientas que se llenan después de la generación de IA), alejarse a la toma amplia 0.5–0.6s después del clic.
- Cuando se está ampliado, es aceptable que los bordes superior e inferior de un modal salgan brevemente del fotograma, pero el cursor y el objetivo que se está cliqueando deben permanecer en el fotograma, y el texto no debe tocar el borde del fotograma.
- "No se necesitan movimientos de cámara llamativos; el objetivo principal es mostrar cada paso con claridad"; cambiar al ritmo normal de la voz en off, sin tartamudeos.
- Sin subtítulos en el fotograma.
6. Lista de verificación de fidelidad (errores del Caso 1)
- Efecto de escritura: un
<span>por carácter, revelado uno por uno contl.set(span,{display:'inline'}). No sobrescribir todotextContentcada fotograma — al buscar hacia atrás se obtienen valores intermedios incorrectos (v2 tenía una "C" extra apilada en el texto del marcador de posición). - Ajuste de línea del cuadro de entrada: durante la configuración, revelar los caracteres uno por uno para medir qué carácter se ajusta a dos líneas y cuánto crece la altura; en ese momento, mover las tarjetas de preguntas rápidas por encima hacia arriba en sincronía.
- Capas: las tarjetas de preguntas rápidas deben estar por encima de la máscara de fondo blanco del cuadro de entrada; la página de detalles debe cubrir la barra de pestañas (z-index de la página de detalles > tabbar).
- Evitar colisiones de nombres de clase: la capa de superposición de texto usa el prefijo
hz-(hz-main / hz-note / hz-cta); una vez colisionó con.ctadel panel de ejecución y produjo una barra negra. - El contenido después de un cambio de página no debe deslizarse debajo de la barra de estado / barra superior; las tablas no deben tener un fondo gris.
- Usar siempre
immediateRender:falseenfromTo, de lo contrario, el primer fotograma es incorrecto al buscar. - Las capturas de fotogramas deben cubrir: antes y después de cada clic, a mitad de la escritura, el momento de un ajuste de línea, y después de cada cambio de página.
Adiciones de escritorio (errores del Caso 3)
- Evitar
...
[truncado para traducción]