Communitygithub.com

joeseesun/qiaomu-icon-generator

웹/iOS 아이콘 후보를 생성하고 비교 가능한 실제 에셋을 내보냅니다.

qiaomu-icon-generator란 무엇인가요?

Qiaomu Icon Generator는 웹사이트, 앱, Chrome 확장 프로그램, CLI 도구 등에 사용할 아이콘 후보군을 빠르게 생성하고 비교할 수 있도록 도와주는 AI 에이전트 스킬입니다. 사용자는 여러 디자인 방향성을 한눈에 보고 선택한 후, 최종적으로 실제 프로덕션에 사용할 수 있는 Web/iOS 아이콘 에셋(예: PNG favicon, Apple Touch Icon, .appiconset)을 내보낼 수 있습니다. 이 스킬은 두 가지 주요 워크플로우를 지원합니다. 첫 번째는 'QM Icon Studio CLI 방식'으로, Iconify 기반의 벡터 심볼을 사용하여 빠르고 정확한 SVG 아이콘 후보를 생성하며, Playwright를 통해 PNG로도 내보낼 수 있습니다. 두 번째는 'Codex Bitmap Reference 방식'으로, Codex 내장 이미지 생성 기능을 활용하여 더 풍부하고 iOS 스타일의 래스터 아이콘을 생성하며, 기존 아이콘 박물관이나 참고 라이브러리를 기반으로 다양한 방향성을 탐색합니다. 두 방식 모두 contact-sheet라는 선택지를 사용자에게 제공하여 직관적으로 비교할 수 있게 하며, 최종 선택 후에는 export_selected_icon.py 스크립트를 통해 실제 프로젝트에 바로 적용 가능한 Web/iOS 에셋 번들을 생성합니다. 또한 사용자의 기존 프로덕션 아이콘을 임의로 덮어쓰지 않도록 엄격한 규칙을 적용하여 안전하게 사용할 수 있습니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add joeseesun/qiaomu-icon-generator
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Qiaomu Icon Generator

로컬 QM Icon Studio CLI 또는 Codex 내장 이미지 생성 기능을 사용하여 웹사이트, 앱, 도구 또는 Skill용 아이콘 후보군을 여러 세트 생성하고 사용자에게 선택지를 제공합니다.

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

사용 시점

  • 새 웹사이트, 앱, Chrome 확장 프로그램, Skill, CLI 도구에 favicon, 앱 아이콘 또는 브랜드 진입점 아이콘이 필요한 경우.
  • 사용자가 즉시 프로덕션 아이콘을 교체하는 대신 여러 방향성을 먼저 살펴보고 선택하려는 경우.
  • 프로젝트에 완전한 브랜드 시스템은 없지만 이름, 도메인, 용도 또는 한 줄 설명은 있는 경우.

방식 선택

사용자가 Iconify 스타일 심볼을 기반으로 결정론적이고 벡터 친화적인 아이콘을 원하거나 빠르고 깔끔한 SVG 후보가 필요한 경우 QM Icon Studio CLI 방식을 사용하세요.

사용자가 Codex 내장 이미지 생성을 명시적으로 요청하거나 더 풍부한 iOS 스타일 앱 아이콘을 원하거나 기존 아이콘 갤러리를 참조하도록 요청하거나 최종 내보내기 전에 다듬어진 래스터 아이콘 방향성이 필요한 경우 Codex 비트맵 참조 방식을 사용하세요.

워크플로우: QM Icon Studio CLI

이 경로를 사용하기 전에 references/qm-icon-studio-cli-method.md를 읽으세요.

  1. 프로젝트 컨텍스트 읽기: README.md, package.json, 사이트 도메인, 기존 public/ 또는 assets/ 아이콘, 주요 색상 CSS 변수.
  2. rocket, globe, code, book, camera, music, money와 같은 짧은 영어 의미 키워드 추출. 한국어 요청은 CLI에 직접 전달할 수 있습니다. CLI가 먼저 번역한 다음 Iconify를 검색하며, 필요시 더 정확한 영어 단어로 수동 변경할 수도 있습니다.
  3. 프로젝트 내에 후보 디렉토리 생성, 기본값은 design/icon-options/; 프로젝트에 이미 디자인 디렉토리가 있으면 기존 구조를 따릅니다.
  4. 현재 머신에 QM Icon Studio CLI가 있으면 호출:
node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Product Name" \
  --query "rocket" \
  --count 8 \
  --out design/icon-options \
  --png

이 로컬 경로가 없으면 Codex 비트맵 참조 방식을 사용하거나 사용자에게 자체 아이콘 생성 CLI / 아이콘 참조 라이브러리 경로를 제공하도록 요청하세요.

  1. contact-sheet.png 또는 contact-sheet.svg를 사용자에게 보여주고 프로젝트 분위기에 가장 적합한 2~3개의 방향을 추천합니다.
  2. --png가 Playwright를 사용할 수 없어 건너뛰어진 경우 SVG 출력을 계속 사용합니다. "PNG 없음"을 생성 실패로 잘못 판단하지 마세요. README 또는 보고서에 contact-sheet.svg, 1~2개의 option-*.svg를 표시하고 SVG는 편집 가능한 소스 파일임을 설명합니다.
  3. SVG 형상 확인: option-*.svg는 반드시 엄격한 정사각형 소스여야 합니다. contact sheet 또는 README 이미지가 둥근 모서리 미리보기를 표시하는 경우 통일된 마스크로 잘라내야 하며, 정사각형 소스가 둥근 모서리 프레임을 덮고 네 귀퉁이 호선만 드러나는 상황이 발생해서는 안 됩니다.
  4. 사용자 확인 후 선택된 SVG/PNG를 대상 프로젝트에 복사하거나 QM Icon Studio를 열어 완전한 플랫폼 리소스 패키지를 계속 내보냅니다.

워크플로우: Codex Bitmap Reference Method

이 경로를 사용하기 전에 references/codex-bitmap-reference-method.md를 읽으세요.

  1. 프로젝트 컨텍스트 읽기: 제품명, 용도, 도메인, 기존 favicon/app 아이콘, 주요 색상, 브랜드 톤, 대상 플랫폼.
  2. 사용자가 Icon Museum을 참조하려는 경우 사용 가능한 로컬 참조 라이브러리를 우선 사용합니다. Joe의 기본 경로는 $HOME/Documents/圖片參考生成icon/icon-museum/manifest.json 및 icons/입니다. 다른 머신에서는 사용자가 제공한 manifest/이미지 디렉토리를 사용할 수 있습니다. 카테고리, 색상, 용도별로 6~12개의 참조 방향을 필터링하되 원본 이미지, 상표, 앱 이름 또는 독특한 구도를 복사하지 마세요.
  3. 프로젝트 내에 후보 디렉토리 생성, 기본값 design/<product-slug>-icon-options/. 여기에는 prompts.md, choices.md, 후보 PNG, 선택지 및 내보내기 크기가 포함됩니다.
  4. Codex 내장 image_gen을 사용하여 각 후보를 개별적으로 한 번 생성합니다. 프롬프트에는 반드시 다음이 포함되어야 합니다. square app icon, opaque background, no text/letters/numbers/watermark, centered bold symbol, readable at 32px, iOS and web favicon use.
  5. 내장 이미지 생성 출력을 $CODEX_HOME/generated_images/...에서 후보 디렉토리로 복사하고 option-01.png에서 option-10.png로 이름을 지정합니다. 원본 생성 파일은 보관하고 삭제하지 않습니다.
  6. contact-sheet.png와 favicon-readability-sheet.png를 생성하고 64px 및 32px에서도 식별 가능한지 확인합니다.
  7. 사용자가 선택하면 내보내기 스크립트를 실행하여 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. 웹사이트 진입점이 실제 PNG favicon/apple-touch icon을 참조하도록 업데이트합니다. iOS 프로젝트는 .appiconset의 기존 크기를 업데이트합니다. 사용자가 확인하기 전에 프로덕션 아이콘을 덮어쓰지 마세요.

규칙

  • 사용자가 선택하기 전에 기존 프로덕션 아이콘을 덮어쓰지 마세요.
  • 순수 장식 패턴을 브랜드 아이콘으로 사용하지 마세요. 그래픽은 32px favicon에서 식별 가능해야 합니다.
  • 6~12개의 후보를 생성하는 것이 좋습니다. 4개 미만은 비교에 불리하고, 12개 초과는 선택이 어려워집니다.
  • 후보는 기본적으로 정사각형 소스를 유지합니다. iOS, macOS, Windows 등의 플랫폼 둥근 모서리 및 형식은 최종 내보내기 단계에서 처리합니다.
  • PNG 렌더링에 실패하면 SVG 후보를 계속 사용하고 Playwright를 사용할 수 없다고 설명하세요.
  • 외부 네트워크를 사용할 수 없으면 --offline을 추가하여 내장 아이콘 라이브러리로 후보 생성을 계속합니다.
  • SVG CLI 후보 소스 파일은 정사각형이어야 합니다. 둥근 모서리는 contact sheet / README의 미리보기 마스크로만 사용하고 소스에 베이킹하거나 반쪽 둥근 모서리 테두리로 만들지 마세요.
  • Codex 비트맵 참조 방식은 텍스트, 문자, 숫자, 유사 문자, 워터마크, 실제 상표 및 참조 이미지의 근사 복사를 피해야 합니다.
  • Web/iOS 최종 에셋은 정사각형, 투명 채널 없음, 중앙 본체에 안전 여백이 있어야 합니다. iOS App Store 마스터는 1024x1024 PNG를 사용합니다.
  • 기존 웹사이트 또는 앱 아이콘을 교체하려면 먼저 사용자가 후보 번호를 선택했는지 확인한 다음 내보내고 교체하세요.

출력

QM Icon Studio CLI 후보 디렉토리에는 일반적으로 다음이 포함됩니다:

  • option-01.svg ~ option-08.svg
  • option-01.png ~ option-08.png (Playwright를 사용할 수 있는 경우)
  • contact-sheet.svg
  • contact-sheet.png (Playwright를 사용할 수 있는 경우)
  • choices.md
  • qm-icon-options.json

Codex 비트맵 참조 방식 후보 디렉토리에는 일반적으로 다음이 포함됩니다:

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

공개 예제 에셋

공개 README의 주요 예제는 저장소 자체의 아이콘 대신 실제 제품 사례를 우선 사용해야 합니다. 현재 권장 예제는 Qiaomu Music 웹사이트입니다:

  • Codex 비트맵 참조 방식: docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
  • 최종 선택 아이콘: docs/assets/examples/qiaomu-music/codex-bitmap/selected-option-05-ios-1024.png
  • Favicon 가독성: docs/assets/examples/qiaomu-music/codex-bitmap/favicon-readability-sheet.png
  • SVG CLI 방식: docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
  • SVG CLI 미리보기: docs/assets/examples/qiaomu-music/svg-cli/svg-cli-preview.png

새로운 공개 예제를 추가할 때는 후보 시트, 선택된 에셋, 작은 크기 가독성 테스트 및 이를 생성하는 데 사용된 명령어나 프롬프트 등 시각적 증빙과 프로세스 노트를 모두 포함하세요.

관련 스킬

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