[{"data":1,"prerenderedAt":544},["ShallowReactive",2],{"biblioteca-\u002Fbiblioteca\u002Fel-tutorial-de-tu-app-sin-reunion":3},{"id":4,"title":5,"author":6,"body":7,"cover":527,"description":528,"extension":529,"meta":530,"navigation":531,"nivel":532,"path":533,"publishedAt":534,"seo":535,"stem":536,"tags":537,"__hash__":543},"biblioteca\u002Fbiblioteca\u002Fel-tutorial-de-tu-app-sin-reunion.md","El tutorial de tu app, sin reunión · brag hace el video leyendo tu código","Miguel Santa",{"type":8,"value":9,"toc":510},"minimark",[10,28,33,36,39,42,45,49,52,55,62,64,68,79,82,85,90,106,110,124,144,146,150,153,161,172,214,237,239,243,246,285,288,313,316,337,354,362,364,368,379,405,408,410,414,417,419,423,440,444,473,475,479,494,506],[11,12,15,19,25],"callout",{"title":13,"type":14},"¿Apurado? Que Claude te haga un resumen rápido.","claude",[16,17,18],"p",{},"Copia el link de esta página y pégalo en Claude. Le pides algo así:",[16,20,21],{},[22,23,24],"strong",{},"\"Resúmeme esta guía y dime qué parte de mi app debería salir en el video.\"",[16,26,27],{},"En 30 segundos tienes la lectura aplicada a tu caso. Después te devuelves a la sección que te interese.",[29,30,32],"h2",{"id":31},"el-problema-una-app-nueva-y-una-hora-de-reunión","El problema: una app nueva y una hora de reunión",[16,34,35],{},"Creaste una app o un dashboard. Funciona. Y ahora te toca sacar una reunión de una hora para enseñarle al equipo dónde se entra, qué se hace y qué se lleva cada uno.",[16,37,38],{},"O peor: le cambias algo, y medio equipo ni se entera. Siguen usándola como la semana pasada.",[16,40,41],{},"Lo que resuelve eso es un video corto que muestre el recorrido. El problema es que grabar pantalla, editar y volver a grabar cada vez que cambias algo toma más tiempo que la reunión.",[43,44],"hr",{},[29,46,48],{"id":47},"el-ejemplo-real-los-tutoriales-de-esta-biblioteca","El ejemplo real: los tutoriales de esta biblioteca",[16,50,51],{},"A cada persona que nos pide una guía le llega un video que le enseña a usar esta biblioteca: cómo llegar a las guías, cómo preguntarle a Jarvis y cómo Jarvis te da el video de cada tema.",[16,53,54],{},"Son tres tutoriales de unos 24 segundos cada uno. Los hizo Claude el 8 de octubre de 2026. Nadie grabó pantalla: Claude leyó el código de santa-ia.com y armó el recorrido.",[16,56,57,58,61],{},"La herramienta se llama ",[22,59,60],{},"brag",".",[43,63],{},[29,65,67],{"id":66},"qué-es-brag","Qué es brag",[16,69,70,71,78],{},"brag es un proyecto de código abierto en GitHub, de ",[72,73,77],"a",{"href":74,"rel":75},"https:\u002F\u002Fgithub.com\u002Flatent-spaces\u002Fbrag",[76],"nofollow","latent-spaces",", con licencia MIT. Al 13 de octubre de 2026 tiene más de 15.600 estrellas.",[16,80,81],{},"Nació para hacer videos de lanzamiento (\"lo construiste, ahora preséntalo\"), pero el mismo camino sirve para un tutorial: mostrar dónde entras, qué haces y qué te llevas.",[16,83,84],{},"Trae dos skills:",[86,87,89],"h3",{"id":88},"la-completa-brag","La completa: \u002Fbrag",[91,92,93,97,100,103],"ul",{},[94,95,96],"li",{},"Lee el código de tu proyecto.",[94,98,99],{},"Le pasa el plan a Hyperframes, de HeyGen, que compone y renderiza el video.",[94,101,102],{},"Trae música y efectos incluidos, y voz opcional con una voz local.",[94,104,105],{},"Necesita Node 22 o más, FFmpeg y Hyperframes.",[86,107,109],{"id":108},"la-liviana-brag-slim","La liviana: \u002Fbrag-slim",[91,111,112,115,118,121],{},[94,113,114],{},"Lee el código de tu proyecto o el link de la página.",[94,116,117],{},"Claude arma el video solo, con lo que ya tienes en el computador.",[94,119,120],{},"No usa Hyperframes ni trae archivos incluidos.",[94,122,123],{},"Sigue las mismas reglas creativas que la completa y está pensada para Claude Opus 5.5.",[11,125,129],{"title":126,"type":127,"icon":128},"Si usas Opus 5.5","info","lucide:info",[16,130,131,132,136,137,140,141,61],{},"Con Opus 5.5, ",[133,134,135],"code",{},"\u002Fbrag"," se cambia sola a ",[133,138,139],{},"\u002Fbrag-slim",". Si quieres la completa con Hyperframes, la pides con ",[133,142,143],{},"\u002Fbrag --full",[43,145],{},[29,147,149],{"id":148},"cómo-funciona-en-cuatro-pasos","Cómo funciona, en cuatro pasos",[151,152],"diagram-brag-flujo",{},[154,155,158],"step-card",{"number":156,"title":157},"1","Le das la carpeta de tu app",[16,159,160],{},"Abres Claude Code dentro del proyecto. No necesitas link publicado ni capturas: Claude lee el código directo. La liviana también acepta el link de una página que ya esté en internet.",[154,162,165],{"number":163,"title":164},"2","User flow: saca el recorrido",[16,166,167,168,171],{},"Claude lee las páginas, los componentes y el README, y responde qué hace la app, para quién es y cuál es el recorrido que importa: ",[22,169,170],{},"dónde entras, qué haces y qué te llevas",". Eso es el user flow.",[154,173,176],{"number":174,"title":175},"3","Storyboard: escribe el plan escena por escena",[16,177,178,179,182,183,186,187,190,191,194,195,198,199,202,203,190,206,209,210,213],{},"Deja un archivo ",[133,180,181],{},"brag-plan.md"," con el plan del video, escena por escena, de ",[22,184,185],{},"15 a 25 segundos",", y con un tono. Hay siete: ",[133,188,189],{},"default",", ",[133,192,193],{},"polished"," (serio), ",[133,196,197],{},"chaotic"," (caótico), ",[133,200,201],{},"cinematic"," (de película), ",[133,204,205],{},"deadpan",[133,207,208],{},"yc-parody"," y ",[133,211,212],{},"app-store",". También le puedes describir el tono con tus palabras.",[154,215,218],{"number":216,"title":217},"4","Render: arma el video",[16,219,220,221,224,225,228,229,232,233,236],{},"La completa le pasa el plan a Hyperframes y la liviana lo arma sola. Al final tienes tres cosas en la carpeta ",[133,222,223],{},"brag-output\u002F",": el video ",[133,226,227],{},"brag.mp4",", la portada ",[133,230,231],{},"brag.jpg"," (puesta como primer cuadro del video, para que se vea bien antes de darle play) y ",[133,234,235],{},"share-copy.txt"," con el texto para publicar.",[43,238],{},[29,240,242],{"id":241},"cómo-instalarlo","Cómo instalarlo",[16,244,245],{},"Dentro de Claude Code, la completa (trae la liviana incluida):",[247,248,253],"pre",{"className":249,"code":250,"language":251,"meta":252,"style":252},"language-bash shiki shiki-themes github-light github-dark","\u002Fplugin marketplace add latent-spaces\u002Fbrag\n\u002Fplugin install brag@brag\n","bash","",[133,254,255,274],{"__ignoreMap":252},[256,257,260,264,268,271],"span",{"class":258,"line":259},"line",1,[256,261,263],{"class":262},"sScJk","\u002Fplugin",[256,265,267],{"class":266},"sZZnC"," marketplace",[256,269,270],{"class":266}," add",[256,272,273],{"class":266}," latent-spaces\u002Fbrag\n",[256,275,277,279,282],{"class":258,"line":276},2,[256,278,263],{"class":262},[256,280,281],{"class":266}," install",[256,283,284],{"class":266}," brag@brag\n",[16,286,287],{},"Solo la liviana, desde la terminal:",[247,289,291],{"className":249,"code":290,"language":251,"meta":252,"style":252},"npx skills add https:\u002F\u002Fgithub.com\u002Flatent-spaces\u002Fbrag --skill brag-slim\n",[133,292,293],{"__ignoreMap":252},[256,294,295,298,301,303,306,310],{"class":258,"line":259},[256,296,297],{"class":262},"npx",[256,299,300],{"class":266}," skills",[256,302,270],{"class":266},[256,304,305],{"class":266}," https:\u002F\u002Fgithub.com\u002Flatent-spaces\u002Fbrag",[256,307,309],{"class":308},"sj4cs"," --skill",[256,311,312],{"class":266}," brag-slim\n",[16,314,315],{},"Después, dentro de tu proyecto, le dices:",[247,317,319],{"className":249,"code":318,"language":251,"meta":252,"style":252},"\u002Fbrag --tone polished --format vertical\n",[133,320,321],{"__ignoreMap":252},[256,322,323,325,328,331,334],{"class":258,"line":259},[256,324,135],{"class":262},[256,326,327],{"class":308}," --tone",[256,329,330],{"class":266}," polished",[256,332,333],{"class":308}," --format",[256,335,336],{"class":266}," vertical\n",[16,338,339,342,343,190,346,349,350,353],{},[133,340,341],{},"--format"," puede ser ",[133,344,345],{},"landscape",[133,347,348],{},"vertical"," o ",[133,351,352],{},"square",". Para un tutorial que vas a mandar por WhatsApp, vertical.",[11,355,359],{"title":356,"type":357,"icon":358},"Antes de publicar el video, revísalo","warning","lucide:triangle-alert",[16,360,361],{},"El video sale de tu código y de tu app real. Las instrucciones de brag le piden a Claude no poner llaves, correos ni nombres de clientes, y cambiarlos por datos de ejemplo. Igual lo miras completo antes de mandarlo fuera del equipo.",[43,363],{},[29,365,367],{"id":366},"lo-que-le-cambiamos-nosotros","Lo que le cambiamos nosotros",[16,369,370,371,374,375,378],{},"En santa-ia usamos brag con dos adaptaciones propias: ",[22,372,373],{},"\u002Fdemo-app-voz-propia"," (sale de la completa) y ",[22,376,377],{},"\u002Fdemo-app-light"," (sale de la liviana). El recorrido es el mismo. Lo que cambia es cómo suena:",[91,380,381,387,393,399],{},[94,382,383,386],{},[22,384,385],{},"Voz clonada."," El video siempre lleva narración con mi voz clonada en ElevenLabs. La original trae una voz local opcional; esa no la usamos.",[94,388,389,392],{},[22,390,391],{},"Música de Suno."," En vez de las pistas incluidas, cada video lleva su propia música, generada en Suno.",[94,394,395,398],{},[22,396,397],{},"Efectos de nuestro banco."," Los sonidos salen del mismo banco que usamos en los videos del canal.",[94,400,401,404],{},[22,402,403],{},"Mezcla al volumen de redes."," Todo se nivela a -14 LUFS, para que no suene ni más bajo ni más alto que lo demás en Instagram o YouTube.",[16,406,407],{},"Si haces el tuyo, no necesitas nada de esto para empezar. brag tal cual ya te da el video.",[43,409],{},[29,411,413],{"id":412},"le-cambiaste-algo-a-la-app","¿Le cambiaste algo a la app?",[16,415,416],{},"Pides el video otra vez. Claude vuelve a leer el código y el recorrido sale con lo nuevo. Ya no tienes que sacar una reunión para contarle al equipo qué cambió.",[43,418],{},[29,420,422],{"id":421},"lo-que-tienes-que-recordar","Lo que tienes que recordar",[91,424,425,428,431,434,437],{},[94,426,427],{},"brag es de código abierto (MIT), está en GitHub y trae dos skills: la completa y la liviana.",[94,429,430],{},"Le das la carpeta de tu app. No necesitas grabar pantalla.",[94,432,433],{},"Cuatro pasos: user flow, storyboard, render y entrega.",[94,435,436],{},"El video dura de 15 a 25 segundos y sale con portada y texto para publicar.",[94,438,439],{},"Si cambias la app, pides el video otra vez.",[86,441,443],{"id":442},"fuentes-oficiales","Fuentes oficiales",[91,445,446,452,459,466],{},[94,447,448],{},[72,449,451],{"href":74,"rel":450},[76],"Repositorio latent-spaces\u002Fbrag en GitHub",[94,453,454],{},[72,455,458],{"href":456,"rel":457},"https:\u002F\u002Fgithub.com\u002Flatent-spaces\u002Fbrag\u002Fblob\u002Fmain\u002Fskills\u002Fbrag\u002FSKILL.md",[76],"Instrucciones de \u002Fbrag",[94,460,461],{},[72,462,465],{"href":463,"rel":464},"https:\u002F\u002Fgithub.com\u002Flatent-spaces\u002Fbrag\u002Fblob\u002Fmain\u002Fskills\u002Fbrag-slim\u002FSKILL.md",[76],"Instrucciones de \u002Fbrag-slim",[94,467,468],{},[72,469,472],{"href":470,"rel":471},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes",[76],"Hyperframes, de HeyGen",[43,474],{},[29,476,478],{"id":477},"quieres-los-tutoriales-de-tus-apps","¿Quieres los tutoriales de tus apps?",[11,480,484,487],{"title":481,"type":482,"icon":483},"Armamos contigo los videos de las apps de tu equipo","success","lucide:calendar-check",[16,485,486],{},"Si tienes apps o dashboards que tu equipo usa y quieres que cada cambio llegue con su video, lo revisamos contigo.",[16,488,489,493],{},[72,490,492],{"href":491},"\u002Fagenda","Agenda una llamada"," y lo vemos.",[16,495,496,497,500,501,61],{},"Si te quedó alguna duda concreta: comenta ",[133,498,499],{},"DEMO"," en el Reel o escríbeme por DM en ",[72,502,505],{"href":503,"rel":504},"https:\u002F\u002Finstagram.com\u002Fsantaia.lab",[76],"@santaia.lab",[507,508,509],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":252,"searchDepth":276,"depth":276,"links":511},[512,513,514,519,520,521,522,523,526],{"id":31,"depth":276,"text":32},{"id":47,"depth":276,"text":48},{"id":66,"depth":276,"text":67,"children":515},[516,518],{"id":88,"depth":517,"text":89},3,{"id":108,"depth":517,"text":109},{"id":148,"depth":276,"text":149},{"id":241,"depth":276,"text":242},{"id":366,"depth":276,"text":367},{"id":412,"depth":276,"text":413},{"id":421,"depth":276,"text":422,"children":524},[525],{"id":442,"depth":517,"text":443},{"id":477,"depth":276,"text":478},null,"Creaste una app o un dashboard y te toca sacar una hora para enseñárselo al equipo. Con brag, Claude lee el código, saca el recorrido, escribe el plan escena por escena y arma un video de 15 a 25 segundos. Aquí está cómo funciona, cómo instalarlo y lo que le cambiamos nosotros.","md",{},true,"intermedio","\u002Fbiblioteca\u002Fel-tutorial-de-tu-app-sin-reunion","2026-10-13",{"title":5,"description":528},"biblioteca\u002Fel-tutorial-de-tu-app-sin-reunion",[538,60,539,540,541,542],"skills","video","hyperframes","claude-code","tutoriales","-ZEwnBnq-FWyJauL1SdbVqaiX9KMr_nB7wm1uppUOhM",1791910742901]