Icon Systempor Owl-Listener

Icon System Skill.

Da a los iconos un sistema coherente de construcción y nomenclatura en lugar de reunir símbolos sin relación.

Sistemas de diseño
Especificaciones

Revisión de la fuente · Icon SystemSKILL.md

Tarea Sistemas de diseño Produce • Una especificación de construcción y tamaños de iconos • Categorías de nombres y requisitos de entrega • Reglas de accesibilidad y de contribución Antes de empezar Un agente que pueda inspeccionar iconos representativos, sus tamaños previstos y los formatos de diseño y código requeridos.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Icon System: Estandarizar la iconografía de producto

Define cómo se dibujan, nombran, entregan y usan con accesibilidad los iconos en un producto.

Flujo de trabajo basado en la fuenteNo es una prueba de ejecución

El enfoque de trabajo

Icon System define las reglas de la biblioteca de iconos de un producto: cuadrícula, líneas guía, grosor de trazo, tratamiento de esquinas, variantes de tamaño, nomenclatura y entrega. Distingue entre usos de trazo, relleno y duotono en lugar de tratar todos los estilos de iconos como intercambiables.

La fuente también cubre etiquetas, ocultación de elementos decorativos, contraste y áreas de interacción. Los tamaños en píxeles que propone son valores de referencia que hay que adaptar al producto. Una especificación de icon-system no significa que una biblioteca completa de SVG ya se haya dibujado o probado.

Entregables esperados

Una especificación de construcción y tamaños de iconos
Categorías de nombres y requisitos de entrega
Reglas de accesibilidad y de contribución

Ver el brief de ejemplo

Del brief a la revisión

01
Definir las reglas de construcción
Define cuadrícula, líneas guía, trazo, esquinas y estilos admitidos.
02
Organizar la biblioteca
Elige categorías, nombres, variantes y los formatos de origen o de componentes necesarios.
03
Comprobar el uso en contexto
Revisa los tamaños admitidos, las etiquetas, el texto en acciones críticas y las áreas interactivas.

02 Cuándo usarlo

Cuándo usarla

Úsala para unificar conjuntos de iconos dispares en un sistema o documentar una biblioteca compartida para diseño y desarrollo.

Buen encaje

Bibliotecas de iconos mixtasReúne familias de símbolos inconsistentes bajo un único estándar de construcción.
Componentes de producto compartidosDefine nombres y envoltorios que diseño y desarrollo puedan usar de forma coherente.

Límites que conviene revisar

No es una guía completa de ilustraciónEl arte narrativo más amplio corresponde a illustration-style.
No crea activos automáticamenteLa fuente especifica un sistema; los iconos y envoltorios reales aún deben producirse.

Aporta estos datos

Iconos actualesProporciona símbolos representativos y sus conflictos.
Tamaños de usoIndica los tamaños de visualización previstos y los contextos de interacción.
Stack de entregaIndica si necesitas SVG, sprites, envoltorios de componentes o una biblioteca de diseño.

03 Decisiones importantes

Decisiones clave

Coherencia de construcción
Las reglas de geometría compartidas hacen que los símbolos parezcan relacionados aunque sus temas difieran.
Nombres significativos
Los nombres de categorías y variantes facilitan la localización y el mantenimiento.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Carga el SKILL.md de esta tarea desde el repositorio designer-skills en la ubicación de skills compatible de tu agente. El archivo de entrada no establece ningún comando de instalación universal.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/icon-system/SKILL.md

Proporciona iconos representativos y sus contextos de uso. La skill define reglas; crear y probar los activos de iconos reales es un trabajo aparte.

Empieza con un entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa icon-system para estandarizar nuestros iconos de navegación mixtos. Define reglas de cuadrícula, trazo, esquinas, tamaño y nomenclatura, y luego especifica la entrega en SVG y como componentes. Distingue los iconos decorativos de las acciones con etiqueta e indica dónde es necesario texto visible.

Revisa el resultado

Comprueba el resultado real con estos criterios observables.

Los iconos comparten reglas de construcción documentadas.
Los nombres distinguen categoría y variante.
El tratamiento de accesibilidad se ajusta a cada uso.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: design-systems/skills/icon-system/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Define cómo se dibujan, nombran, entregan y usan con accesibilidad los iconos en un producto.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no un uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿El tamaño visual de un icono equivale a su área táctil?

No. La fuente trata el tamaño de visualización y la guía sobre áreas interactivas como asuntos distintos.

¿Debe todo icono tener un nombre accesible?

Los iconos con significado necesitan un etiquetado adecuado; los decorativos pueden ocultarse a las tecnologías de asistencia.

¿Incluye ilustraciones principales (hero)?

No. La fuente remite el trabajo de ilustración más amplio a otra skill.

OpenDesign

Deja espacio para la próxima iteración de diseño.

Mantén tu brief, el material de origen y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño