micro-ui-illustration

Caja de herramientas para ilustraciones vectoriales

Combina las ideas del usuario con imágenes de referencia de diseño, aclarando progresivamente hasta enfocar el concepto y luego usando las herramientas de dibujo aquí descritas. Por defecto se aplican las restricciones de estilo Micro-UI; las direcciones y normas del proyecto especificadas por el usuario tienen prioridad.

Estilo y composición predeterminados de Micro-UI

Este conjunto de reglas restablece los límites de estilo de versiones anteriores, aplicables a los nuevos dibujos Micro-UI; no son limitaciones de la tecnología SVG en general.

• Cortes de controles reales: el elemento principal debe tener una estructura reconocible de herramienta o control. No se debe fingir una interfaz repitiendo barras grises, tarjetas vacías e iconos sin sentido; primero extrae las características de identidad del objeto de la referencia.
• Cuerpo principal sin trazo: las formas grandes se definen con áreas de color sólido, superposición y sombras suaves. Los trazos de iconos necesarios, líneas de regla y guías ambientales muy tenues pueden usar líneas; el tamaño de los iconos y el trazo siguen las normas del proyecto objetivo.
• Composición en capas predeterminada: organiza el espacio como "placa base portadora → corte de control en plano medio → punto focal en primer plano", con capa ambiental opcional. El papel, documentos e informes pueden usar una placa base; cuando el control en sí mismo constituye una entidad completa, se puede omitir la placa base adicional. Cada capa debe servir al tema, no agregar accesorios solo para tener más capas.
• Átomos de una sola capa y sin recursividad: si el cuerpo principal ya está compuesto por varios submódulos, los submódulos mantienen entidades de color sólido completas, sin anidar una tercera capa de microcontroles, pseudográficos o pequeños símbolos. La jerarquía estructural se calcula según la función visual, no por el número de anidamientos de <g> en SVG.
• Componente mínimo de 16px: en el tamaño de visualización objetivo, el ancho y alto de los bloques de color independientes deben ser al menos 16px; se exceptúan los trazos de iconos necesarios, líneas de regla y puntos indicadores de estado muy pequeños (diámetro no superior a 3px). No se debe eludir esta regla aumentando la resolución de exportación. Si el tamaño pequeño no puede acomodarlo, se deben reducir los componentes o simplificar la expresión.
• Detalles contenidos: un solo contenedor no debe tener más de tres componentes principales por defecto; no dibujes pseudo-texto denso, ni uses contenedores vacíos y altos para albergar poco contenido. El texto se usa solo cuando expresa identidad, estado o acción.
• Paleta de colores por tokens: el código fuente hace referencia a roles de color definidos centralmente, que luego se asignan a los tokens del proyecto; no se escriben dispersos valores hexadecimales u otros literales de color. Un SVG independiente puede resolver los roles a colores reales al exportar, conservando la fuente de mapeo para asegurar que se pueda mostrar incluso fuera del huésped.

Selecciona el material relevante de la imagen de referencia y registro de análisis según el objeto actual; cuando se necesiten parámetros de luz y sombra o ejemplos de código, consulta Construcción y ejemplos completos. Las reglas de estilo se aplican por defecto; si realmente se necesita una excepción, el AI la determina combinando la referencia y el tamaño de visualización, explicando el objeto de la excepción, el motivo y el resultado de la inspección visual, sin necesidad de pedir permiso repetidamente para dibujos normales.

Proceso de aprendizaje de referencias del usuario

Cuando el usuario proporciona una imagen de referencia y desea adoptar sus características, sigue estos pasos para analizar y registrar:

1. Recibir la intención: el usuario envía la imagen de referencia y explica qué características desea adoptar (por ejemplo, "adoptar la sensación de grosor de la abertura de la carpeta" o "adoptar la proporción de área de esta combinación de colores azul-verde").
2. Analizar los puntos clave: el AI mira la imagen y la desglosa en cinco aspectos:
   • Forma: cómo se corta el control, el contorno y el tamaño de las esquinas redondeadas;
   • Combinación de colores: la proporción de área entre la placa base clara, el color funcional principal y el punto focal de resalte;
   • Capas: la relación de superposición delante-detrás, el desplazamiento de capas y el espacio en blanco;
   • Composición: el centro de gravedad del sujeto en el lienzo y el flujo visual;
   • Luz y sombra: el desplazamiento, la expansión y la transparencia de las microsombras.
3. Guardar y registrar:
   • Guarda la imagen en el directorio assets/reference-images/;
   • Agrega las conclusiones del análisis al references/visual-reference-map.md, indicando claramente qué se puede tomar prestado y qué es el contenido comercial específico de la imagen original (no copiar textualmente).
4. Cambiar de estilo y ausencia de imagen:
   • Cuando el usuario solicita explícitamente cambiar de estilo, ajusta los parámetros según la nueva solicitud, evitando conflictos entre reglas nuevas y antiguas;
   • Cuando no hay imagen de referencia, dibuja según las reglas y casos existentes, sin exigir que el usuario proporcione una imagen.
5. Explicación del concepto:
   • "Aprender" aquí significa analizar la imagen de referencia y registrar los puntos clave para consultarlos al dibujar, no es entrenar un modelo, ni se afirma que el modelo haya aprendido permanentemente ese estilo.

Enfoque progresivo del cuadro mediante aclaraciones

Cuando la dirección de un nuevo cuadro no está clara, el AI guía activamente al usuario para que exprese sus ideas paso a paso, sin generar una imagen directamente al recibir una palabra clave. Primero organiza el propósito, la escena, las referencias, las preferencias y las limitaciones que el usuario ya ha proporcionado, y solo aclara las brechas que afectarán las decisiones de diseño actuales; la información confirmada se reutiliza, sin preguntar repetidamente.

Se pueden lanzar algunas opciones específicas para ayudar al usuario a expresar sus preferencias, y luego profundizar gradualmente según las elecciones y explicaciones del usuario. Cada ronda gira en torno a una decisión clave y plantea preguntas breves y específicas, ofreciendo algunas direcciones con diferencias reales, explicando cómo se vería cada una y dando una razón de recomendación. La siguiente ronda debe retomar lo que el usuario acaba de confirmar y enfocarse aún más en la escena, el sujeto o la composición que aún no están claros, sin repetir opciones genéricas. Permite al usuario describir, combinar o negar estas direcciones libremente, sin limitarlo a las opciones. No arrojes una encuesta completa de requisitos de una sola vez, ni transfieras el trabajo de composición profesional al usuario.

Según la información faltante, avanza gradualmente con el siguiente pensamiento; las partes que el usuario ya ha aclarado se saltan directamente:

1. Enfocar el contenido de la expresión: a partir del propósito y el tema, descubre lo que el usuario más quiere que el espectador entienda, aclarando el objeto, la acción, el estado o la relación. Convierte palabras de función generales en escenas específicas y pide confirmación al usuario con una frase clara de la intención del cuadro.
2. Enfocar la dirección visual: combinando el análisis de materiales, muestra referencias relevantes, señala los aspectos de forma, color, espacio o textura que se pueden adoptar, y pregunta al usuario qué partes le gustan y cuáles no. Diferencia entre la base del estilo y la composición de la escena; no adoptes la disposición de una referencia solo porque guste.
3. Enfocar la composición del cuadro: a través del diálogo, comprende gradualmente las ideas del usuario sobre el sujeto, las relaciones entre objetos, el punto focal y la sensación general, combinando con referencias para dar sugerencias concretas y ayudar al usuario a decidir.

En el diálogo, solo continúa aclarando lo que aún no está claro, sin recorrer mecánicamente la lista de preguntas. Una vez que las ideas estén enfocadas, repite brevemente la intención del cuadro y la composición principal acordadas por ambas partes, y espera a que el usuario indique explícitamente "puede empezar", "puede moverse" o una autorización equivalente antes de comenzar a dibujar. Cuando ya hay autorización para comenzar y la dirección está clara, ejecuta directamente sin repetir la confirmación. Los detalles posteriores los controla el usuario, y se realizan ajustes según las modificaciones que el usuario solicite, sin establecer etapas de confirmación de muestras o refinamiento por retroalimentación. Las modificaciones locales solo aclaran objetivos ambiguos, sin reiniciar todo el proceso.

De la referencia a la forma y composición

Primero, identifica la estructura de reconocimiento del objeto en la experiencia del usuario: no solo el contorno y las partes, sino también las proporciones clave, el orden de disposición y las relaciones de conexión. El texto y los rectángulos redondeados genéricos no pueden reemplazar estas características. Selecciona el objeto completo o un corte parcial según el propósito; la simplificación prioriza el encuadre y la omisión; al exagerar, conserva las relaciones estructurales que hacen creíble el objeto, sin dibujar por defecto el nombre de la función como un flujo.

Según el objeto actual y el problema de modelado a resolver, selecciona referencias relevantes y abre la imagen real; cuando necesites entender la implementación, lee el SVG correspondiente y mira el resultado renderizado. No es necesario recorrer la biblioteca de materiales. El análisis debe desembocar en "qué relación específica hace que la referencia funcione y cómo usarla esta vez", por ejemplo, contraste de escala, soporte o superposición, sin limitarse a enumerar efectos como esquinas redondeadas o sombras suaves. La base del estilo no equivale a copiar la disposición de la escena; cuando la imagen no tiene código fuente, la forma de implementación es una suposición por verificar.

Con base en esto, decide qué conservar, qué eliminar y qué exagerar, y luego organiza el cuerpo principal, los elementos auxiliares y el espacio en blanco con formas grandes. Primero juzga si el objeto es creíble y si la jerarquía entre lo principal y lo secundario se sostiene, y luego agrega detalles y texturas; si solo se puede remediar con texto explicativo o sombras, vuelve al modelado. El juicio lo realiza el AI, sin añadir puntos de confirmación para el usuario. Cómo convertir efectos específicos en trazados, coordenadas y filtros se explica en Conversión de referencia a dibujo.

Las variantes deben cambiar la relación del sujeto, la perspectiva o la composición; solo cambiar líneas, texturas y colores son cambios de material dentro de la misma composición y no pueden considerarse una nueva escena. No conviertas la combinación de objetos del tema actual en una plantilla fija para trabajos posteriores.

Los objetos en el mismo espacio compuyen proyección, grosor e iluminación; los iconos y el texto en el plano se maquetan primero en coordenadas locales y luego se mapean junto con la superficie general; primero dibuja las entidades traseras, luego las delanteras. Los contornos adyacentes deben separarse claramente o superponerse claramente, evitando tangencias, hendiduras estrechas o iconos que sobresalgan a medias. La geometría unificada se maneja con herramientas de construcción; la idoneidad del cuerpo principal aún se juzga mediante el análisis de referencia y el renderizado a tamaño real.

Verificación y revisión local

Pasos de inspección interna: renderizar → mirar la imagen real → identificar problemas → volver a verificar. Una vez completado el dibujo o la modificación, usa scripts/render.mjs para generar PNG a 1× y 3× a partir del SVG o la página de presentación, abre las dos imágenes y verifica cada elemento contra la siguiente "Verificación visual antes de la entrega", registrando problemas específicos. La 1× verifica el reconocimiento del sujeto, la composición, las proporciones y el espacio en blanco; la 3× verifica esquinas redondeadas, superposiciones, juntas, recortes y sombras. El factor de aumento de píxeles de exportación no reemplaza el tamaño de visualización objetivo; cuando el tamaño objetivo difiere del tamaño inherente del SVG, especifícalo con --width, --height.

Realiza al menos una inspección inicial y una reinsepección después de la corrección; si la inspección inicial no encuentra problemas, realiza una segunda revisión independiente, sin modificar intencionadamente. Después de cada corrección, vuelve a renderizar y abrir la imagen para confirmar que el problema específico se ha resuelto. Si aún hay problemas irresolubles o el entorno no puede renderizar, indícalo claramente, sin afirmar que la verificación visual ha pasado. Este proceso es un control de calidad interno del AI, sin añadir etapas de confirmación de muestras o refinamiento por retroalimentación.

Cuando se involucran variables de rol CSS, pasa el mapeo JSON generado por el proyecto a través de --vars; las variables faltantes sin respaldo válido deben resolverse, sin rellenar colores por cuenta propia. El mapeo del proyecto y las imágenes exportadas se guardan en el directorio de la tarea, sin escribir los valores de color del proyecto en el skill. Los comandos, dependencias y el alcance de las capturas de pantalla de la página de presentación se encuentran en Renderizado y visualización.

Compara la imagen final con la referencia seleccionada lado a lado, comparando contornos, proporciones, esquinas redondeadas, áreas de color, sombras y densidad de detalles, para juzgar si el lenguaje visual es coherente.

Después de renderizar, señala problemas visuales específicos y luego modifica según el problema; verifica el reconocimiento del objeto, las proporciones, las superposiciones, la alineación y los bordes, sin sustituir el juicio visual por un archivo válido o una exportación exitosa.

Antes de modificar, primero localiza el objeto y el alcance al que el usuario se refiere, y realiza ajustes locales utilizando la estructura vectorial existente. Después de la modificación, compara las imágenes antes y después para confirmar que las formas y disposiciones ya aprobadas se han conservado.

Verificación visual antes de la entrega

Después de renderizar, verifica según los siguientes elementos; si encuentras problemas, corrige primero y luego entrega. Que el archivo se pueda analizar o exportar correctamente no cuenta como verificación visual.

• Las proporciones clave, la disposición y las conexiones concuerdan con la experiencia real del objeto; después de la omisión o exageración, aún se conserva la estructura de identificación, no solo se adivina el tema por el título o unos pocos símbolos.
• El tamaño y la superposición de la placa base, el plano medio y el primer plano predeterminados tienen jerarquía; si se omite la placa base, el cuerpo principal tiene un contorno completo.
• La altura del contenedor es acorde con el contenido; el primer plano no roba el centro de gravedad debido a un área de espacio en blanco demasiado grande.
• Los submódulos compuestos no tienen microcontroles recursivos; en el tamaño de visualización objetivo, los bloques de color independientes cumplen con los 16px, las líneas y micro puntos necesarios ya se han distinguido como excepciones.
• Las formas adyacentes están claramente separadas o superpuestas, sin tangencias, hendiduras estrechas o inserciones incorrectas; el texto y los iconos no están cubiertos accidentalmente por el primer plano.
• Las sombras diferencian las capas pero no son negras sucias; el área de color está coordinada con la referencia; todos los colores se pueden rastrear hasta la configuración de roles o los tokens del proyecto.
• Comparando lado a lado con la referencia seleccionada, verifica si las relaciones de escala, contorno, espacio o material tomadas prestadas se sostienen en la imagen final, no solo si se han adoptado efectos similares; al mismo tiempo, mira el tamaño original y el tamaño de visualización real, explica las correcciones específicas, sin inventar puntuaciones o aprobaciones del usuario.

Proceso de recopilación de casos

Después de completar y verificar, pregunta activamente una vez y solo recopila si el usuario acepta explícitamente.

1. Reglas de pregunta:
   • Una vez que la ilustración está terminada y se ha realizado la verificación interna, el AI pregunta activamente una vez: "¿Estás satisfecho con esta ilustración? ¿Quieres incluirla en la biblioteca de casos para referencia futura?"
   • Si el usuario todavía está solicitando modificaciones, primero corrige la imagen, no preguntes repetidamente.
   • Si el usuario rechaza, no responde, o solo dice "satisfecho" sin aceptar explícitamente la inclusión, no se realiza la recopilación.
   • No recopiles automáticamente cada resultado generado.
2. Ejecución de la recopilación:
   • Verifica los archivos: deben existir tanto el código fuente .svg editable como la imagen de vista previa .png renderizada; verifica que no haya duplicados de nombre, no sobrescribas archivos existentes.
   • Ejecuta el script de recopilación: scripts/collect-example.mjs;
   • Actualiza automáticamente references/example-guide.md, registrando el nombre del tema, las características de construcción y los escenarios de aplicación.

Métodos de dibujo SVG componibles

Herramientas de construcción SVG explica el uso local de scripts/build-kit.mjs: contornos, cámara unificada, extrusión de sólidos, mapeo de superficies, cuadro delimitador y exportación de roles de color. Úsalos según las necesidades del dibujo, no se requiere que cada imagen se convierta en 3D.

Índice de herramientas

Qué quieres hacer	Herramienta y ejemplo
Contornos rectos, arcos, curvas orgánicas	Trazados y curvas
Unión, perforación, recorte local, transición transparente	Combinación de formas y máscaras
Desplazamiento, rotación, escalado, sesgado, proyección plana	Coordenadas y transformaciones
Superficies de color, degradados, sombras, texturas repetidas	Rellenos y materiales
Ancho de texto, tamaño de etiqueta, caja de línea y bordes	Herramientas de texto y diseño
Vista previa en navegador, rerenderizado local, comparación de imágenes	Renderizado y visualización
Recopilación segura de casos y actualización de índice	Instrucciones de recopilación de casos

Casos y materiales editables

Al observar referencias, combina la imagen real abierta con el SVG correspondiente, relaciona los efectos locales con el método de implementación y luego considera cómo se pueden aplicar al tema actual. Para ángulos de observación específicos y ejemplos, consulta Conversión de referencia a dibujo.

• Construcción y ejemplos de código: escala de objetos, luz y sombra, roles de color y límites de uso de casos históricos.
• Plantillas de temas: cinco imágenes de Typography y SVG/PNG de imágenes de búsqueda y filtrado.
• Biblioteca de casos originales: SVG/PNG de marcadores, calendarios, cargas, contenido móvil.
• Materiales de estilo: referencias visuales disponibles.
• Imagen de referencia y registro de análisis: análisis de referencias del usuario e índice de características.

Los parámetros en los casos son implementaciones de trabajos específicos y se pueden modificar. Qué dibujar, qué técnicas combinar, cómo comunicar y entregar, lo determina la tarea actual.