[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7E4939WR9WSSVF4PBY93C48":3,"skill-same:01M7E4939WR9WSSVF4PBY93C48":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":13,"repositoryHtmlUrl":26,"repositoryHomepageUrl":6,"ownerHtmlUrl":27,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":28,"install":29,"resources":42},"01M7E4939WR9WSSVF4PBY93C48","visuales-sin-generador",null,"Visuales de marca de nivel estudio SIN generadores de imagen y SIN API keys — logos SVG construidos en grilla, arte generativo (ruido, flow fields, halftone, grano, mesh gradients), dirección de arte en CSS, mockups de producto\u002FUI en HTML (collage multivista), renders 3D con Three.js headless, afiches tipográficos y fotos de cualquier fuente de internet tratadas a la paleta. Usar cuando el runtime no tiene generación nativa de imágenes (Claude Code), o digan \"hacé los visuales sin IA\", \"sin generador\", \"armá el board en código\", \"mockup del producto\", \"afiche\", \"fondo generativo\", \"construí el logo\", \"conseguí fotos\", \"traé imágenes de internet\", \"tratá esta foto con la paleta\".","itmostachia\u002Fmostachia-brand-studio","itmostachia","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F261646451?v=4","01M7E47J7PBB19CYRCAHWP36FF","01M7E47J88YBR67WH5SD1EEK26",0,"MIT","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: visuales-sin-generador\ndescription: Visuales de marca de nivel estudio SIN generadores de imagen y SIN API keys — logos SVG construidos en grilla, arte generativo (ruido, flow fields, halftone, grano, mesh gradients), dirección de arte en CSS, mockups de producto\u002FUI en HTML (collage multivista), renders 3D con Three.js headless, afiches tipográficos y fotos de cualquier fuente de internet tratadas a la paleta. Usar cuando el runtime no tiene generación nativa de imágenes (Claude Code), o digan \"hacé los visuales sin IA\", \"sin generador\", \"armá el board en código\", \"mockup del producto\", \"afiche\", \"fondo generativo\", \"construí el logo\", \"conseguí fotos\", \"traé imágenes de internet\", \"tratá esta foto con la paleta\".\n---\n\n# visuales-sin-generador\n\nRuntime `codigo` (CONTRATO §4): todo visual sale de **código renderizado con Playwright** o de **fotos de\ninternet tratadas** (cualquier fuente: uso interno). Nunca pidas ni uses keys de OpenAI\u002FGemini\u002Fetc. El resultado tiene que verse\ndirigido por un estudio, no \"hecho en código\".\n\n## 0. Ubicar el repo\n`\u003Crepo>` = `$BRAND_STUDIO_HOME` o subí desde la ruta real de este SKILL.md hasta encontrar\n`docs\u002FCONTRATO.md`. Leé `docs\u002FPRINCIPIOS-ESTETICOS.md` (clichés prohibidos, checklist anti-slop).\n\n## 1. Elegí la técnica por lo que la pieza necesita\n\n| Necesidad | Técnica | Receta |\n|---|---|---|\n| Símbolo \u002F wordmark | SVG en grilla con correcciones ópticas | 1, 2 |\n| Textura \u002F fondo propietario | canvas o SVG generativo con semilla fija | 3, 4, 5 |\n| Afiche \u002F portada editorial | tipografía como imagen + capas CSS | 8, 9 |\n| Producto \u002F app \u002F SaaS | UI construida en HTML dentro de marcos de dispositivo, collage multivista | 6 |\n| Objeto \u002F símbolo con volumen | Three.js headless (skill `web-3d`) | 11 |\n| Personas, lugares, materia real | foto de internet + tratamiento a la paleta | 12, 13 |\n\nRecetas con código: `references\u002Frecetas.md`. Fotos: `references\u002Ffotos.md`.\nEjemplos probados (HTML + PNG renderizado): `examples\u002F`.\n\n## 2. Reglas de oficio\n- **Tokens primero:** colores y tipos salen de `territorios.json` (fase territorios) o\n  `06-kit\u002F02_COLORES_Y_TIPOGRAFIA\u002Ftokens.css` (fase kit) como variables CSS. Nada de hex sueltos inventados.\n- **Semilla fija** en todo lo generativo (PRNG propio): el mismo HTML da el mismo PNG. Anotá la semilla.\n- **Capas:** fondo (color\u002Fruido) → forma\u002Fimagen → tipografía → detalle (rótulos mono, cotas, sellos) →\n  grano. Una pieza de una sola capa se ve plana.\n- **Grano y viñeta** casi siempre (receta 4): matan el look \"vector de plantilla\".\n- **Escala dramática:** un elemento dominante (titular enorme, símbolo gigante recortado, foto a sangre).\n- **Contraforma real:** huecos con `fill-rule=\"evenodd\"`, nunca un relleno del color del fondo (se rompe\n  sobre foto o sobre otro color).\n- **Pinterest\u002FBehance = inspiración.** Nunca reusar sus imágenes ni copiar marcas ajenas.\n- Upstream útiles si están instalados: `canvas-design`, `theme-factory`, `taste-skill` (incl. `brandkit`),\n  `frontend-design`, `web-typography`, `colorize`.\n\n## 3. Render y QA con los ojos\n```bash\nnode \u003Crepo>\u002Ftools\u002Frender.mjs pieza.html pieza.png --width 1080 --height 1350 --scale 2\nnode \u003Crepo>\u002Ftools\u002Frender.mjs pieza.html pieza.pdf          # usa @page del CSS\n```\nCorré `--help` antes del primer uso. Para WebGL ver `web-3d` (flags de SwiftShader).\nDespués: **abrí el PNG y miralo**. Revisá: texto cortado, solapes no intencionales, fuente de reemplazo\n(esperar `document.fonts.ready`), contraste, jerarquía a tamaño miniatura, y el símbolo a 24 px y en mono.\nIterá hasta que se sostenga al lado de una referencia de nivel. Exit 0 no es QA.\n\n## 4. Registro\n- Cada foto externa → fila en `03-referencias\u002FFUENTES.csv` con su origen (para poder rastrearla o\n  reemplazarla después).\n- Fuentes tipográficas: solo con licencia libre (OFL\u002FApache) o las que el equipo tenga; anotar en\n  `LICENCIAS-TIPOGRAFIAS.md` en fase kit.\n- Guardá el HTML fuente junto al PNG (es el editable).\n","# visuales-sin-generador\n\nRuntime `codigo` (CONTRATO §4): todo visual sale de **código renderizado con Playwright** o de **fotos de\ninternet tratadas** (cualquier fuente: uso interno). Nunca pidas ni uses keys de OpenAI\u002FGemini\u002Fetc. El resultado tiene que verse\ndirigido por un estudio, no \"hecho en código\".\n\n## 0. Ubicar el repo\n`\u003Crepo>` = `$BRAND_STUDIO_HOME` o subí desde la ruta real de este SKILL.md hasta encontrar\n`docs\u002FCONTRATO.md`. Leé `docs\u002FPRINCIPIOS-ESTETICOS.md` (clichés prohibidos, checklist anti-slop).\n\n## 1. Elegí la técnica por lo que la pieza necesita\n\n| Necesidad | Técnica | Receta |\n|---|---|---|\n| Símbolo \u002F wordmark | SVG en grilla con correcciones ópticas | 1, 2 |\n| Textura \u002F fondo propietario | canvas o SVG generativo con semilla fija | 3, 4, 5 |\n| Afiche \u002F portada editorial | tipografía como imagen + capas CSS | 8, 9 |\n| Producto \u002F app \u002F SaaS | UI construida en HTML dentro de marcos de dispositivo, collage multivista | 6 |\n| Objeto \u002F símbolo con volumen | Three.js headless (skill `web-3d`) | 11 |\n| Personas, lugares, materia real | foto de internet + tratamiento a la paleta | 12, 13 |\n\nRecetas con código: `references\u002Frecetas.md`. Fotos: `references\u002Ffotos.md`.\nEjemplos probados (HTML + PNG renderizado): `examples\u002F`.\n\n## 2. Reglas de oficio\n- **Tokens primero:** colores y tipos salen de `territorios.json` (fase territorios) o\n  `06-kit\u002F02_COLORES_Y_TIPOGRAFIA\u002Ftokens.css` (fase kit) como variables CSS. Nada de hex sueltos inventados.\n- **Semilla fija** en todo lo generativo (PRNG propio): el mismo HTML da el mismo PNG. Anotá la semilla.\n- **Capas:** fondo (color\u002Fruido) → forma\u002Fimagen → tipografía → detalle (rótulos mono, cotas, sellos) →\n  grano. Una pieza de una sola capa se ve plana.\n- **Grano y viñeta** casi siempre (receta 4): matan el look \"vector de plantilla\".\n- **Escala dramática:** un elemento dominante (titular enorme, símbolo gigante recortado, foto a sangre).\n- **Contraforma real:** huecos con `fill-rule=\"evenodd\"`, nunca un relleno del color del fondo (se rompe\n  sobre foto o sobre otro color).\n- **Pinterest\u002FBehance = inspiración.** Nunca reusar sus imágenes ni copiar marcas ajenas.\n- Upstream útiles si están instalados: `canvas-design`, `theme-factory`, `taste-skill` (incl. `brandkit`),\n  `frontend-design`, `web-typography`, `colorize`.\n\n## 3. Render y QA con los ojos\n```bash\nnode \u003Crepo>\u002Ftools\u002Frender.mjs pieza.html pieza.png --width 1080 --height 1350 --scale 2\nnode \u003Crepo>\u002Ftools\u002Frender.mjs pieza.html pieza.pdf          # usa @page del CSS\n```\nCorré `--help` antes del primer uso. Para WebGL ver `web-3d` (flags de SwiftShader).\nDespués: **abrí el PNG y miralo**. Revisá: texto cortado, solapes no intencionales, fuente de reemplazo\n(esperar `document.fonts.ready`), contraste, jerarquía a tamaño miniatura, y el símbolo a 24 px y en mono.\nIterá hasta que se sostenga al lado de una referencia de nivel. Exit 0 no es QA.\n\n## 4. Registro\n- Cada foto externa → fila en `03-referencias\u002FFUENTES.csv` con su origen (para poder rastrearla o\n  reemplazarla después).\n- Fuentes tipográficas: solo con licencia libre (OFL\u002FApache) o las que el equipo tenga; anotar en\n  `LICENCIAS-TIPOGRAFIAS.md` en fase kit.\n- Guardá el HTML fuente junto al PNG (es el editable).\n",{"name":5,"description":7},"main","8a4489e069c426814baf7329b7f9b5aaeb912627","skills\u002Fvisuales-sin-generador","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio","https:\u002F\u002Fgithub.com\u002Fitmostachia","2026-09-30 00:28:16",{"source":8,"skillName":5,"commands":30,"prompt":40,"zipAvailable":41},[31,34,37],{"tool":32,"command":33},"npx","npx skills add itmostachia\u002Fmostachia-brand-studio --skill visuales-sin-generador",{"tool":35,"command":36},"bunx","bunx skills add itmostachia\u002Fmostachia-brand-studio --skill visuales-sin-generador",{"tool":38,"command":39},"pnpm","pnpm dlx skills add itmostachia\u002Fmostachia-brand-studio --skill visuales-sin-generador","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002FSKILL.md",true,[43,49,55,59,63,67,71,75],{"path":44,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":47,"sourceHtmlUrl":48},"examples\u002Fflyer-multiview.html","REFERENCE","参考文档",8793,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Fflyer-multiview.html",{"path":50,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":54},"examples\u002Fflyer-multiview.png","ASSET","资产文件",180537,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Fflyer-multiview.png",{"path":56,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":57,"sourceHtmlUrl":58},"examples\u002Flogo-construccion.html",5927,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Flogo-construccion.html",{"path":60,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":61,"sourceHtmlUrl":62},"examples\u002Flogo-construccion.png",37086,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Flogo-construccion.png",{"path":64,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":65,"sourceHtmlUrl":66},"examples\u002Fposter-generativo.html",3287,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Fposter-generativo.html",{"path":68,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":69,"sourceHtmlUrl":70},"examples\u002Fposter-generativo.png",237855,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Fexamples\u002Fposter-generativo.png",{"path":72,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":73,"sourceHtmlUrl":74},"references\u002Ffotos.md",2467,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Freferences\u002Ffotos.md",{"path":76,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Frecetas.md",9283,"https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fvisuales-sin-generador\u002Freferences\u002Frecetas.md",[80,87,94,101,108,115],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":18},"01M7E49G6PP17K9JM9QT4S84CV","web-marca","Construye la web o landing de una marca con su kit aprobado — Next.js + Tailwind por default, tokens.css como tema, cadena de skills upstream (base → motion → pulido → QA), presupuestos de performance, accesibilidad, SEO\u002FOG y deploy. Exige comparar pantalla por pantalla (desktop y mobile) contra los boards aprobados antes de dar por terminado. Usar cuando digan \"hacé la web\", \"landing de la marca\", \"sitio\", \"página\", \"llevá la marca a la web\", \"implementá el board\", \"web de \u003Cmarca>\". Para landings de conversión completas delega en landing-forge.","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fweb-marca\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":18},"01M7E49AD5GVTGGGW9K076Q5F0","web-3d","3D y WebGL para marcas — Three.js y React Three Fiber (+drei), shaders GLSL (ruido, gradientes, desplazamiento, fresnel), postprocesado, 3D guiado por scroll, partículas, modelos GLTF, rendimiento y fallbacks, y 3D de marca (símbolo extruido, materiales de la paleta). También stills 3D headless para boards y piezas. Usar cuando digan \"3D\", \"WebGL\", \"Three.js\", \"R3F\", \"shader\", \"escena\", \"partículas\", \"logo en 3D\", \"extruí el símbolo\", \"hero 3D\", \"fondo animado con shader\", \"render 3D del logo\".","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fweb-3d\u002FSKILL.md",[],[],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":18},"01M7E48WNQD0JQAZ3VNX92G6PT","territorios-marca","Produce 12–18 territorios de identidad genuinamente distintos para una marca — cada uno con idea, paleta por roles con HEX, tipografía con licencia, símbolo y wordmark, gramática gráfica, imagen, movimiento y 8 aplicaciones — y los presenta en un marco comparable (página A brandboard + página B aplicaciones), con galería, EXPLORACION.pdf, matriz y hoja de votación. Usar cuando digan \"propuestas visuales\", \"territorios\", \"brandboards\", \"rutas de identidad\", \"opciones de marca\", \"exploración visual\", \"quiero ver varias identidades\", o cuando crear-marca llega a la fase 4.","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fterritorios-marca\u002FSKILL.md",[],[],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":18},"01M7E48PCWA7Z69Y2MTRGN8C0Z","piezas-marca","Produce todas las aplicaciones de una marca con kit aprobado — posts, stories, carruseles y LinkedIn, flyers A4\u002FA5, presentaciones (deck HTML → PDF y .pptx), mockups y campaña, firma de email, tarjetas, favicon e imágenes OG. Siempre desde tokens, collage multivista para producto, QA renderizando y mirando, producción en tandas. Usar cuando digan \"haceme posts\", \"stories\", \"carrusel\", \"flyer\", \"folleto\", \"presentación\", \"deck\", \"pitch\", \"mockups\", \"campaña\", \"firma de mail\", \"tarjetas\", \"favicon\", \"imagen para compartir\", \"piezas de la marca\", \"aplicaciones\".","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fpiezas-marca\u002FSKILL.md",[],[],{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":18},"01M7E48J2TNBD1ZFM9WDZ97QA6","naming-marca","Genera 10–15 nombres de marca en estrategias distintas, con fundamento, pronunciación en español e inglés, eslóganes para finalistas y un chequeo PRELIMINAR de disponibilidad (marcas en INPI\u002FWIPO\u002FUSPTO, dominios, handles). Escribe 02-naming\u002FNAMING.md del expediente. Usar cuando digan \"naming\", \"ponerle nombre\", \"ideas de nombre\", \"cómo le ponemos\", \"no tenemos nombre\", \"nombre para la marca\", \"eslogan\", \"tagline\", o cuando crear-marca detecta que no hay nombre.","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Fnaming-marca\u002FSKILL.md",[],[],{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":18},"01M7E48EGKY5GDRX76EVT61DGK","brand-extractor","Extrae identidad de marca de DOCX, PDF e imagenes. Colores (hex a OKLCH), tipografia, logo, tagline, tono de voz. Usado por landing-forge durante la fase de discovery.","https:\u002F\u002Fgithub.com\u002Fitmostachia\u002Fmostachia-brand-studio\u002Fblob\u002Fmain\u002Fskills\u002Flanding-forge\u002Fagents\u002Fbrand-extractor\u002FSKILL.md",[],[]]