¿Qué hace Iconsaz: paquetes de iconos personalizados?
Crea un paquete de iconos nuevo y original que parezca pertenecer a la marca del usuario: la misma sensación de trazo que su tipografía, el mismo lenguaje de esquinas que su interfaz, el mismo tono que su marketing. El estándar de calidad lo marcan los mejores paquetes públicos (Lucide, Phosphor, Tabler, Heroicons, Material Symbols, Untitled UI): una cuadrícula, una regla de trazo, un tamaño óptico, nombres predecibles. El resultado es el paquete propio del usuario, no una copia de ninguno de ellos.
Archivos de esta habilidad
| Archivo | Léelo cuando |
|---|---|
references/question-flow.md | Paso 1: redacción exacta, opciones, valores predeterminados y agrupación de las 14 preguntas |
references/style-rules.md | Pasos 2–7: reglas de referencia, mapeo de marca a estilo, reglas de construcción, catálogo inicial, banco de metáforas |
references/rtl-and-culture.md | Paso 8, y cada vez que el producto sea RTL o se envíe a varias regiones |
templates/style-brief.md | Paso 3: copia y complétalo; también es el archivo que el usuario conserva |
scripts/validate_icons.py | Pasos 6, 7 y 9: verifica cuadrícula, relleno, trazo, viewBox, currentColor, capas ocultas, nombres, completitud, pares RTL |
scripts/preview_sheet.py | Pasos 6 y 9: genera preview.html (tamaños, zoom sobre cuadrícula, claro/oscuro, color, alternancia RTL) |
scripts/package_pack.py | Paso 10: valida y luego comprime los SVG + copias planas listas para Figma + vista previa + brief + guía de importación |
Los scripts son Python 3.8+ simple sin dependencias. Ejecútalos con python scripts/<nombre>.py --help.
Dos modos
- Paquete nuevo: ejecuta todo el flujo de trabajo a continuación.
- Extender un paquete: el usuario comparte un brief de estilo creado anteriormente por esta habilidad (tiene un bloque JSON
icon-spec). Salta la entrevista y el escaneo de marca. Lee el brief, pregunta solo qué iconos agregar (y ofrece metáforas para los abstractos), dibújalos con los números exactos del brief, valídalos contra el brief, agrégalos a la lista de iconos, aumenta la versión secundaria y añade una línea al registro de cambios. Nunca cambies la cuadrícula, el trazo, el relleno o el radio en este modo: coincidir exactamente con los iconos antiguos es el objetivo. Si el usuario quiere un cambio de estilo, eso es una nueva versión principal y se deben redibujar todos los iconos.
Flujo de trabajo
Mantén al usuario informado en tres puntos de control: el escaneo de marca (paso 2), el brief (paso 3) y los iconos de prueba (paso 6). Dibujar 60 iconos sobre una suposición incorrecta les hace perder mucho más tiempo que una confirmación adicional.
1. Entrevista
Haz las 14 preguntas de references/question-flow.md, en orden, de tres o cuatro a la vez. Usa una herramienta de preguntas estructuradas (como AskUserQuestion) para las preguntas de opción múltiple cuando esté disponible, y chat simple para cargas y respuestas escritas.
- Si el usuario omite una pregunta, elige el valor predeterminado de la referencia, di lo que elegiste y por qué en una línea, y continúa. No vuelvas a preguntar.
- No pidas los iconos existentes del usuario, y si los ofrece, agradécele y déjalos a un lado. Este es un conjunto nuevo; los iconos antiguos tiran del estilo hacia atrás, hacia lo que el equipo intenta dejar atrás. Sus reglas del sistema de diseño (cuadrícula, trazo, radio) son bienvenidas, que es lo que pregunta la pregunta 9.
- Las capturas de pantalla subidas contendrán iconos actuales. Úsalas solo para saber dónde se necesitan iconos (paso 4), nunca cómo deberían verse.
2. Escaneo de ADN de la marca
Estudia todo lo subido: logotipo, guía de marca, colores, tipografía, paneles de inspiración, marketing y capturas de pantalla. Deriva el estilo a partir de la evidencia utilizando las tablas de mapeo en references/style-rules.md ("De la marca al estilo de icono"). Observa:
- Tipografía: grosor del asta en tamaños de UI, terminales (redondos, planos, angulares), redondez de las curvas, altura de la x, geométrica vs. humanista. Esto establece el peso del trazo y los extremos/unión.
- Logotipo: peso de la línea en relación con su tamaño, formas de las esquinas, ángulos (45° vs. libre), cualquier motivo característico (una muesca, un rizo, una esquina cortada) que podría convertirse en un rasgo sutil de todo el paquete.
- Capturas de pantalla de la interfaz: radio de esquina de los componentes, ancho del borde, densidad, espaciado. Esto establece el radio de esquina del icono y el conjunto de tamaños.
- Color e imágenes: estos informan solo el tono. Los iconos se distribuyen en
currentColor.
Muestra los hallazgos como una tabla y pide al usuario que los confirme o corrija:
| Señal | Evidencia | Decisión | Confianza |
|---|---|---|---|
| Trazo | La fuente del cuerpo es Nunito Regular, astas ≈ 1.6 px en texto de 16 px | 2 px en 24, 1.75 en 20 | Alta |
Di claramente cuando la evidencia sea escasa ("no se proporcionó tipografía, por lo que el trazo se infiere solo del logotipo, confianza media").
3. Brief de estilo
Copia templates/style-brief.md, completa cada sección y muéstraselo al usuario. Cubre la cuadrícula y el relleno, el trazo por tamaño, los extremos y uniones, el radio de esquina, los estilos y estados, los tamaños, el tono, los nombres, las decisiones RTL y la lista completa de iconos agrupados por categoría. El bloque JSON icon-spec al final es lo que leen los scripts, así que mantenlo sincronizado con el texto en prosa. Obtén la aprobación explícita antes de dibujar nada.
4. Buscador de iconos faltantes
Revisa cada captura de pantalla región por región (navegación, encabezados, barras de herramientas, botones, filas de listas, campos de formulario, estados vacíos, notificaciones y estado, filas de configuración, tarjetas) y enumera cada lugar que necesita un icono. Presenta una tabla — pantalla, ubicación, icono necesario, ¿ya en la lista? — y añade los que faltan a la lista de iconos del brief después de que el usuario esté de acuerdo. Si no hay capturas de pantalla, usa el catálogo inicial de references/style-rules.md junto con el contexto del producto.
5. Opciones de metáfora
Para cada concepto abstracto (reembolso, consulta, sincronización, incorporación, suscripción, fidelización, cumplimiento normativo, etc.), ofrece dos o tres ideas visuales con una breve justificación cada una, y señala cualquier riesgo cultural usando references/rtl-and-culture.md. El "Banco de metáforas" en references/style-rules.md tiene puntos de partida. Deja que el usuario elija, luego registra la elección en el brief, porque el próximo diseñador necesita saber por qué reembolso es una moneda con una flecha de retorno.
6. Iconos de prueba
Dibuja primero tres o cuatro muestras: inicio, buscar, ajustes y el icono más característico del producto específico. Haz cada uno en cada estilo aprobado, en cada tamaño. Luego ejecuta
python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html
Corrige cada error, mira la vista previa (ábrela en un navegador si tienes uno y comprueba los tamaños 1×, no solo el zoom), luego muéstrasela al usuario. Pregunta qué se siente extraño. Los ajustes típicos en esta etapa: trazo un poco más grueso o más fino, esquinas más suaves, más o menos detalle. Actualiza el brief si algo cambia. No comiences el conjunto completo hasta que el usuario apruebe las muestras.
7. Conjunto completo
Dibuja cada icono del brief siguiendo "Cómo dibujar" a continuación. Trabaja categoría por categoría y ejecuta el validador después de cada una, para no encontrar un error sistemático 80 iconos después.
8. RTL y cultura
Si la dirección del texto es RTL o ambas, crea una versión -rtl espejada de cada icono direccional (flechas, atrás y adelante, enviar, responder, deshacer y rehacer, cerrar sesión, sangría de lista, etc.). Deja los iconos no direccionales intactos; espejar un reloj o un botón de reproducción es un error. Comprueba cada icono contra la lista de riesgos culturales. Ambas listas están en references/rtl-and-culture.md. Marca los iconos direccionales en la lista directional de la especificación para que el validador verifique los pares.
9. Verificación final
Ejecuta el validador sin --samples. Debe informar cero errores. Luego verifica visualmente, porque un script no puede juzgar la reconocibilidad:
- Cada icono del brief existe en cada estilo y tamaño (validador: completitud).
- Cada icono sigue el brief: cuadrícula, relleno, trazo, extremos, uniones, radio (validador).
- El tamaño óptico es uniforme en todo el conjunto; nada parece más grande o más pequeño que sus vecinos en la cuadrícula de vista previa (el validador advierte sobre valores atípicos).
- Cada icono sigue siendo claro en el tamaño más pequeño: ve la fila 1× de la vista previa. Si dos detalles se fusionan, elimina uno en ese tamaño en lugar de adelgazar el trazo.
- Los nombres siguen
categoría/nombre/variante/tamaño, en kebab-case minúscula, y significan lo mismo en todas partes (validador: nombres). - Los pares RTL existen y realmente se reflejan entre sí (validador: RTL).
- No se ha colado ningún símbolo culturalmente arriesgado.
Corrige cualquier fallo y vuelve a ejecutar las comprobaciones antes de entregar.
10. Entrega
Figma Professional (o superior): construye la biblioteca con el MCP de Figma. Si sus herramientas faltan o no están autenticadas, dile al usuario que necesita conexión y ofrece el ZIP en su lugar. Si una habilidad de Figma como figma-use está disponible, cárgala antes de la primera llamada de escritura.
- Crea un nuevo archivo con tres páginas: Portada, Iconos y Uso.
- En Iconos, haz una sección por categoría. Para cada icono, convierte cada SVG en un nodo (
figma.createNodeFromSvg), convierte cada uno en un componente, nombra los componentes con propiedades de variante (style=outline, state=default, size=24), y combínalos configma.combineAsVariantsen un conjunto de componentes llamadocategoría/nombre. Mantén los trazos como trazos; no los conviertas en contornos. - Construye una categoría por llamada de escritura. Los lotes grandes se agotan, y un fallo cuesta una categoría, no todo el paquete. Toma una captura de pantalla después de cada categoría y compárala con la vista previa.
- Portada: nombre del paquete, versión, palabras de tono y una cuadrícula de iconos destacados. Uso: tamaños y cuándo usar cada uno, espaciado junto al texto, regla activo/inactivo, regla RTL, nombres, ejemplos de hacer/no hacer, y "para añadir iconos, comparte el brief de estilo con la habilidad".
- También entrega el ZIP de la siguiente ruta, ya que los desarrolladores necesitan los SVG de todas formas.
Figma Gratuito (o sin Figma): el MCP de Figma no puede escribir archivos de biblioteca en planes gratuitos, así que entrega archivos:
python scripts/package_pack.py icons/ --brief style-brief.md --out dist/
Se niega a empaquetar si hay errores, y también si hay advertencias hasta que las hayas revisado; añade --allow-warnings solo después de que cada advertencia restante sea intencionada. Luego escribe dist/<paquete>-v<versión>.zip que contiene svg/ (el árbol categoría/nombre/variante/tamaño.svg), figma/ (copias planas categoria__nombre__variante__tamano.svg que se convierten en nombres de barra en Figma después de un cambio de nombre por lotes), preview.html, manifest.json, el brief de estilo e IMPORT-TO-FIGMA.md con instrucciones paso a paso para importar los iconos y convertirlos en componentes con variantes. Resume esos pasos también en el chat.
11. Guardar el brief
Guarda el brief de estilo final junto al entregable (nombrado <paquete>-style-brief.md) y dile al usuario, con estas palabras o similares: "Conserva este archivo. La próxima vez que necesites iconos, compártelo conmigo primero y los nuevos coincidirán exactamente con este paquete."
Cómo dibujar
Escribe SVG a mano en la cuadrícula acordada, como construirías vectores en una herramienta de diseño. Cada tamaño se dibuja en su propio lienzo nativo (viewBox="0 0 20 20" para 20 px, etc.), por lo que los tamaños pequeños pueden tener su propio trazo y detalle simplificado, como hacen los tamaños ópticos de Material y los conjuntos de 20 y 16 px de Heroicons.
- Raíz:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">. Establece la pintura en la raíz y deja que las formas hereden, lo que mantiene cada icono idéntico. - Usa primitivas (
circle,rectconrx,line,pathcon arcos) en la cuadrícula. Mantén las coordenadas en unidades enteras o medias (como máximo cuartos de unidad). Los puntos fuera de la cuadrícula se renderizan borrosos a 1×. - El color es solo
currentColor. Las formas rellenas usanfill="currentColor". El segundo tono de duotono escurrentColorcon la opacidad del brief, nunca un segundo color. - Sin transformaciones, elementos ocultos,
<text>, imágenes incrustadas,<style>, ID ni metadatos del editor. Aplana todo en geometría simple. - Ajusta la forma a su línea clave (círculo, cuadrado, rectángulo vertical u horizontal; consulta style-rules), para que un icono redondo y uno cuadrado se vean del mismo tamaño.
- Los espacios interiores tienen al menos un ancho de trazo de ancho, más ancho a 16 px.
- Las variantes rellenas siguen la misma silueta que el contorno, con los detalles recortados como espacios. Deben leerse como el mismo icono, "encendido".
- Para hacer un tamaño más pequeño, comienza desde la geometría de 24 px escalada al nuevo lienzo, ajusta los puntos a la cuadrícula, establece el trazo de ese tamaño desde el brief, luego elimina el detalle que ya no encaje. Nunca solo escales el archivo.
- Iguala la tipografía de la marca: los extremos y uniones reflejan sus terminales, las curvas reflejan sus curvas, y una firma de todo el paquete (una muesca, una esquina cortada) puede hacer eco del logotipo si el brief lo solicita.
Un icono de contorno mínimo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7"/>
<path d="M15.5 15.5 21 21"/>
</svg>
Estructura de trabajo
iconos/<categoria>/<nombre>/<variante>/<tamano>.svg ej. iconos/nav/inicio/outline/24.svg
iconos/nav/flecha-atras-rtl/outline/24.svg gemelo RTL espejado
style-brief.md brief rellenado con el bloque icon-spec
preview.html generado
dist/<paquete>-v<version>.zip generado
El nombre canónico del icono es la ruta sin .svg, por lo tanto nav/inicio/outline/24. Ese es también el nombre del componente de Figma, lo que mantiene el código, el diseño y los archivos sincronizados.
Hablando con el usuario
Muchas personas que usan esto son diseñadores, no desarrolladores. Di "grosor de línea" junto a "trazo", "redondez de esquina" junto a "radio", y explica cualquier salida de script en una oración en lugar de pegarla en bruto. Mantén cada turno corto: unas pocas preguntas, una decisión o una cosa para revisar.