Communitygithub.com

joeseesun/qiaomu-icon-generator

Genera candidatos de iconos comparables para Web/iOS y exporta activos reales.

¿Qué es qiaomu-icon-generator?

El generador de iconos Qiaomu es una habilidad de IA diseñada para desarrolladores y diseñadores que necesitan crear múltiples propuestas de iconos para sitios web, aplicaciones, herramientas CLI, o skills de IA. Su propósito es permitir al usuario explorar diferentes direcciones de diseño antes de tomar una decisión final, evitando la sustitución prematura de iconos de producción. La habilidad soporta dos métodos principales: el método CLI de QM Icon Studio, que produce iconos vectoriales deterministas basados en símbolos de Iconify, ideal para proyectos que requieren rapidez y limpieza en SVG; y el método de referencia de mapas de bits de Codex, que utiliza la generación de imágenes integrada de Codex para obtener iconos rasterizados más pulidos, perfecto para aplicaciones iOS o cuando se desea un estilo más rico. El flujo de trabajo incluye leer el contexto del proyecto, generar entre 6 y 12 candidatos, crear una hoja de contactos para la selección visual, y finalmente exportar los activos reales en los formatos y tamaños requeridos para web (favicon, apple-touch icon) e iOS (AppIcon.appiconset). La habilidad enfatiza reglas importantes como no sobrescribir iconos de producción sin confirmación, evitar texto o marcas en los candidatos, y asegurar que los diseños sean legibles en tamaños pequeños como 32px.

Compatible con~Claude Code✓Codex CLI~Cursor
npx skills add joeseesun/qiaomu-icon-generator
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Generador de Iconos Qiaomu

Utiliza el CLI nativo de QM Icon Studio o la capacidad de generación de imágenes integrada de Codex para crear múltiples propuestas de iconos para sitios web, aplicaciones, herramientas o skills, y presenta al usuario una hoja de selección.

Copyright (c) 向阳乔木 X: https://x.com/vista8 GitHub: https://github.com/joeseesun/

Cuándo Usarlo

  • Un nuevo sitio web, aplicación, extensión de Chrome, skill o herramienta CLI necesita un favicon, icono de aplicación o icono de marca.
  • El usuario quiere ver varias direcciones antes de elegir, en lugar de reemplazar directamente el icono de producción.
  • El proyecto aún no tiene un sistema de marca completo, pero ya tiene nombre, dominio, propósito o una descripción breve.

Elección del Método

Usa el método CLI de QM Icon Studio cuando el usuario quiera iconos deterministas y compatibles con vectores basados en símbolos similares a Iconify, o cuando necesite candidatos SVG rápidos y limpios.

Usa el método de referencia de mapas de bits de Codex cuando el usuario solicite explícitamente la generación de imágenes integrada de Codex, desee iconos de aplicación iOS más ricos, pida hacer referencia a galerías de iconos existentes, o necesite una dirección pulida de icono rasterizado antes de la exportación final.

Flujo de Trabajo: CLI de QM Icon Studio

Lee references/qm-icon-studio-cli-method.md antes de usar esta ruta.

  1. Lee el contexto del proyecto: README.md, package.json, el dominio del sitio, los iconos existentes en public/ o assets/, y las variables CSS de color principal.
  2. Extrae una palabra clave semántica corta en inglés, por ejemplo rocket, globe, code, book, camera, music, money. Las solicitudes en chino se pueden pasar directamente al CLI; el CLI primero las traducirá y luego buscará en Iconify. Si es necesario, puedes cambiarlas manualmente a una palabra en inglés más precisa.
  3. Crea un directorio de candidatos dentro del proyecto, por defecto design/icon-options/; si el proyecto ya tiene un directorio de diseño, utiliza la estructura existente.
  4. Si la máquina actual tiene el CLI de QM Icon Studio, invoca:
node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Nombre del Producto" \
  --query "rocket" \
  --count 8 \
  --out design/icon-options \
  --png

Si esta ruta local no existe, usa el método de referencia de mapas de bits de Codex, o pide al usuario que proporcione su propio CLI de generación de iconos / ruta a una biblioteca de referencia de iconos.

  1. Muestra contact-sheet.png o contact-sheet.svg al usuario, y recomienda de 2 a 3 direcciones que mejor se adapten al carácter del proyecto.
  2. Si --png se omite debido a que Playwright no está disponible, continúa con la salida SVG; no interpretes la falta de PNG como un fallo de generación. En el README o informe, muestra contact-sheet.svg, de 1 a 2 archivos option-*.svg, e indica que los SVG son archivos fuente editables.
  3. Verifica la geometría de los SVG: option-*.svg deben ser estrictamente cuadrados; si la hoja de contactos o las imágenes del README muestran una vista previa con bordes redondeados, deben recortarse con una máscara uniforme. No se permiten fuentes cuadradas que, al cubrir un marco redondeado, solo muestren las esquinas curvas.
  4. Después de la confirmación del usuario, copia los SVG/PNG seleccionados al proyecto de destino, o abre QM Icon Studio para continuar exportando el paquete completo de activos para la plataforma.

Flujo de Trabajo: Método de Referencia de Mapas de Bits de Codex

Lee references/codex-bitmap-reference-method.md antes de usar esta ruta.

  1. Lee el contexto del proyecto: nombre del producto, propósito, dominio, favicon/icono de aplicación existente, color principal, tono de marca, plataforma objetivo.
  2. Si el usuario quiere hacer referencia a Icon Museum, prioriza el uso de la biblioteca de referencia local disponible. La ruta por defecto de Joe es $HOME/Documents/图片参考生成icon/icon-museum/manifest.json y icons/; otras máquinas pueden usar el manifesto / directorio de imágenes proporcionado por el usuario. Filtra de 6 a 12 direcciones de referencia según categoría, color y propósito, pero no copies la imagen original, marca registrada, nombre de aplicación o composición única.
  3. Crea un directorio de candidatos dentro del proyecto, por defecto design/<slug-del-producto>-icon-options/, que contenga prompts.md, choices.md, los PNG candidatos, la hoja de selección y los tamaños de exportación.
  4. Usa image_gen integrado de Codex, generando cada candidato por separado. El prompt debe incluir: square app icon, opaque background, no text/letters/numbers/watermark, centered bold symbol, readable at 32px, iOS and web favicon use.
  5. Copia la salida de la generación de imágenes integrada desde $CODEX_HOME/generated_images/... al directorio de candidatos, nombrándolos option-01.png a option-10.png. Conserva los archivos generados originales, no los elimines.
  6. Genera contact-sheet.png y favicon-readability-sheet.png, verificando que aún se puedan distinguir a 64px y 32px.
  7. Una vez que el usuario haya seleccionado, ejecuta el script de exportación para generar los activos web/iOS:
python3 scripts/export_selected_icon.py \
  --source design/qiaomu-music-icon-options/ios-1024/option-05.png \
  --web-out public/icons \
  --web-prefix qiaomu-music-icon \
  --appiconset ios/QiaomuMusic/QiaomuMusic/Assets.xcassets/AppIcon.appiconset
  1. Actualiza el sitio web para que haga referencia al PNG real del favicon/apple-touch icon; para proyectos iOS, actualiza los tamaños existentes en .appiconset. No sobrescribas el icono de producción antes de la confirmación del usuario.

Reglas

  • No sobrescribas el icono de producción existente antes de que el usuario haya hecho su elección.
  • No uses patrones puramente decorativos como iconos de marca; el gráfico debe ser reconocible en un favicon de 32px.
  • Genera preferiblemente de 6 a 12 candidatos; menos de 4 dificulta la comparación, más de 12 hace que la elección sea tediosa.
  • Por defecto, los candidatos se mantienen como fuentes cuadradas; los bordes redondeados y formatos específicos de plataformas como iOS, macOS y Windows se manejan en la fase de exportación final.
  • Si la generación de PNG falla, continúa usando los SVG candidatos e indica que Playwright no está disponible.
  • Si la red externa no está disponible, agrega --offline para usar la biblioteca de iconos integrada y continuar generando candidatos.
  • Los archivos fuente de los candidatos SVG del CLI deben ser cuadrados; los bordes redondeados solo se usan como máscara de vista previa en la hoja de contactos / README, no se hornean en la fuente ni se convierten en un borde redondeado a medias.
  • El método de referencia de mapas de bits de Codex debe evitar texto, letras, números, pseudo-texto, marcas de agua, marcas reales y la copia aproximada de imágenes de referencia.
  • Los activos finales web/iOS deben ser cuadrados, sin canal alfa, con el sujeto centrado y márgenes de seguridad; la imagen maestra de iOS App Store usa PNG de 1024x1024.
  • Si se va a reemplazar un icono de sitio web o aplicación existente, primero confirma que el usuario ha seleccionado el número del candidato, luego exporta y reemplaza.

Salida

El directorio de candidatos del CLI de QM Icon Studio suele contener:

  • option-01.svg a option-08.svg
  • option-01.png a option-08.png, si Playwright está disponible
  • contact-sheet.svg
  • contact-sheet.png, si Playwright está disponible
  • choices.md
  • qm-icon-options.json

El directorio de candidatos del método de referencia de mapas de bits de Codex suele contener:

  • option-01.png a option-10.png
  • ios-1024/
  • web-180/
  • web-64/
  • web-32/
  • contact-sheet.png
  • favicon-readability-sheet.png
  • prompts.md
  • choices.md

Ejemplos de Activos Públicos

Los ejemplos principales del README público deben priorizar el uso de casos de productos reales, en lugar de generar solo un icono para el repositorio mismo. El ejemplo recomendado actualmente es el sitio web de Música Qiaomu:

  • Método de referencia de mapas de bits de Codex: docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
  • Icono final seleccionado: docs/assets/examples/qiaomu-music/codex-bitmap/selected-option-05-ios-1024.png
  • Prueba de legibilidad del favicon: docs/assets/examples/qiaomu-music/codex-bitmap/favicon-readability-sheet.png
  • Método SVG CLI: docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
  • Vista previa SVG CLI: docs/assets/examples/qiaomu-music/svg-cli/svg-cli-preview.png

Al agregar un nuevo ejemplo público, incluye tanto la evidencia visual como las notas del proceso: hoja de candidatos, activo seleccionado, prueba de legibilidad en tamaño pequeño y el comando o prompt utilizado para generarlo.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community