feat(umind): Umi, la mascota, y un solo vocabulario en toda la interfaz

La mascota. Umi sale del logo, no es un dibujo aparte: su cuerpo es la "u" del
monograma y el punto del logo pasa a ser su antena, así que símbolo y personaje
son la misma forma vista dos veces. Por eso puede estar al lado del logo sin
competirle.

Tiene estados, y no son decoración: cada pantalla vacía dice algo distinto y la
cara lo dice antes que el texto. Dormida cuando todavía no pasó nada, buscando
cuando falta cargarle información, contenta cuando no hay errores, alerta
cuando algo se rompió. Los ojos toman el color de la superficie de atrás en vez
de ser blancos, así se apoya sobre cualquier tarjeta y en modo oscuro no quedan
dos puntos flotando.

Las pantallas vacías. Había una buena y ocho que decían "Sin canales
configurados." y nada más — el usuario quedaba resolviendo solo qué significa
eso y qué hacer. Ahora las ocho explican qué va ahí y por qué importa: "No está
atendiendo en ningún lado", "Todavía no sabe nada de tu negocio".

El vocabulario. La misma cosa tenía dos nombres según la pantalla: tenant y
espacio, tool y herramienta. Un producto que se llama distinto a sí mismo en
cada lugar se siente como varios productos pegados. Queda: espacio, agente,
herramienta, fuente. Y "al AI" pasa a "a la IA", que además es el género que ya
usaba el resto del panel.

Y la barra de scroll de las pestañas, que se veía gris y gruesa sobre el
contenido: en escritorio las siete entran holgadas y no hacía falta, en móvil
siguen deslizándose pero sin la barra encima.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-08-19 19:19:01 -05:00
co-authored by Claude Opus 5
parent 5086087e1b
commit 3ceb61c035
13 changed files with 258 additions and 56 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='%238eb02f'/%3E%3Cpath d='M32,42 V58 A14,14 0 0 0 60,58 V42' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M60,58 V64' fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='28' r='7' fill='%23fff'/%3E%3C/svg%3E" />
<title>uMind Studio</title>
<script type="module" crossorigin src="/orchestrator/assets/index-CRnmvnlL.js"></script>
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-Culm0hM7.css">
<script type="module" crossorigin src="/orchestrator/assets/index-Da7ZrNMD.js"></script>
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-DNRtUHD7.css">
</head>
<!-- Sin clase de fondo: el color lo pone body en style.css desde los tokens,
que son los que cambian con el tema. Una utilidad acá le ganaba a la
+26 -1
View File
@@ -387,6 +387,14 @@ a:focus-visible, button:focus-visible {
}
.salida.on { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
.umi-mini {
width: 17px;
height: 17px;
vertical-align: -3px;
margin-right: 5px;
color: var(--lime);
}
.salida-rotulo {
display: block;
font-family: var(--mono);
@@ -569,6 +577,20 @@ footer a:hover { color: var(--cyan); }
<div class="marco">
<div class="escenario" id="escenario">
<!-- Umi vive en el mismo archivo que la usa: una promo tiene que poder
copiarse a cualquier lado sin arrastrar dependencias. -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="umi" viewBox="0 0 120 120">
<circle cx="60" cy="26" r="6" fill="currentColor" />
<line x1="60" y1="32" x2="60" y2="44" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
<path d="M30,46 V76 A30,30 0 0 0 90,76 V46 Z" fill="currentColor" />
<circle cx="47" cy="66" r="6" fill="var(--panel)" />
<circle cx="73" cy="66" r="6" fill="var(--panel)" />
<circle cx="48" cy="67" r="3" fill="#11150F" />
<circle cx="74" cy="67" r="3" fill="#11150F" />
</symbol>
</svg>
<canvas id="campo" class="campo" aria-hidden="true"></canvas>
<div class="foco" id="foco" aria-hidden="true"></div>
@@ -641,7 +663,10 @@ footer a:hover { color: var(--cyan); }
</div>
<div class="salida" id="salida">
<span class="salida-rotulo">Lo que recibe tu cliente</span>
<span class="salida-rotulo">
<svg class="umi-mini" viewBox="0 0 120 120" aria-hidden="true"><use href="#umi" /></svg>
Lo que recibe tu cliente
</span>
<span id="texto-salida"></span><span class="cursor" id="cursor"></span>
</div>
</div>