Communitygithub.com

luisfer-cli/pixel-art-pix-skill

픽셀 아트 개념과 pix DSL 렌더러를 위한 휴대용 에이전트 스킬

pixel-art-pix-skill란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Cursor, Codex 등)가 사용자 요청에 따라 픽셀 아트, 스프라이트, 아이콘, 로고, 게임 에셋, 애니메이션 프레임, GIF, `.pix` 파일을 생성하고 편집할 수 있도록 설계되었습니다. pix DSL(도메인 특화 언어)을 사용하여 픽셀 아트를 정의하고, `pix check` 및 `pix render` 명령어를 통해 유효성 검사와 렌더링을 수행합니다. 핵심 원칙은 가독성, 제한된 팔레트 사용, 정수 좌표, 그리고 불필요한 장식(별, 반짝임, 먼지 등)을 금지하는 '안티-노이즈' 규칙입니다. 이 스킬은 로고, 캐릭터, 배경, 애니메이션 등 다양한 에셋 유형에 대한 구체적인 기준과 12단계의 필수 작업 흐름을 제공하며, 최종 결과물이 1x 크기에서도 인식 가능하고 의도된 디자인 원칙을 따르도록 보장합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add luisfer-cli/pixel-art-pix-skill

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

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

문서

pix로 픽셀 아트 만들기

사용자가 픽셀 아트, 스프라이트, 아이콘, 로고, 게임 에셋, 애니메이션 프레임, 스프라이트시트, GIF 또는 .pix 파일을 요청할 때 이 스킬을 사용하세요.

불가침 원칙

  • 세부 사항보다 가독성을 우선시합니다.
  • 기본 해상도로 작업하며, 고해상도 아트를 디자인한 후 정신적으로 축소하지 마십시오.
  • 하드 에지, 정수 좌표를 사용하고 안티앨리어싱을 사용하지 마십시오.
  • 윤곽선, 그림자, 베이스, 하이라이트, 악센트 역할이 명확히 구분된 제한된 팔레트를 사용합니다.
  • 흩어진 픽셀 대신 의도적인 색상 클러스터를 구성합니다.
  • 에셋과 모든 애니메이션 프레임 전체에 걸쳐 일관된 광원 방향을 유지합니다.
  • 구문 검증만으로 완료를 주장하지 마십시오. 렌더링하고 시각적으로 검사하십시오.

안티-노이즈 규칙

사용자가 명시적으로 요청하지 않는 한, 떠다니는 별, 반짝임, 먼지, 입자, 모서리 장식, 또는 고립된 장식용 픽셀을 추가하지 마십시오.

로고, 아이콘, UI 에셋 및 투명 배경 스프라이트의 경우:

  • 기본적으로 연결되지 않은 장식 구성 요소가 0개여야 합니다.
  • 주제 주변에 깨끗한 안전 여백을 유지합니다.
  • 하나의 컴팩트한 기본 실루엣을 선호합니다.
  • 빈 캔버스 공간을 장식을 추가하라는 초대로 사용하지 마십시오.
  • 요청되지 않았거나 주제에 필수적이지 않은 한 sparkles, stars, dust, particles 또는 이와 유사한 이름의 그룹을 추가하지 마십시오.

보이는 모든 클러스터는 최소한 하나의 명확한 목적을 제공해야 합니다:

  1. 실루엣 또는 구조;
  2. 형태, 조명 또는 재질;
  3. 식별 기능;
  4. 요청된 환경 장식.

클러스터가 짧은 한 문장으로 정당화될 수 없으면 제거하십시오. 단일 픽셀은 눈동자, 반사 하이라이트, 대각선의 끝, 또는 필요한 얼굴 특징과 같이 기능적인 경우에만 허용됩니다.

필수 작업 흐름

  1. 요청 사항을 명확히 합니다. 캔버스 크기, 주제, 에셋 유형, 스타일, 팔레트 제약 조건, 배경 및 내보내기 방식을 설정합니다. 장식이 요청되지 않았다면 없다고 가정합니다.
  2. 수락 기준을 설정합니다. 에셋별 기준에서 관련 규칙을 선택합니다.
  3. 그리기 전에 계획합니다. 실루엣, 주요 모양, 팔레트 역할, 광원 방향, 초점 및 애니메이션 키 포즈를 정의합니다.
  4. .pix 소스를 생성하거나 편집합니다. 그룹 이름을 의미론적 기능으로 지정합니다. 선택적 대기는 주제와 분리하여 유지합니다.
  5. 소스의 유효성을 검사합니다. pix check를 실행합니다.
  6. 기본 배율로 렌더링합니다. 기본 출력이 권위 있는 시각적 확인입니다.
  7. 확대된 미리보기를 렌더링합니다. 최근접 이웃 정수 배율(일반적으로 --scale 8)을 사용합니다.
  8. 시각적으로 검사합니다. 에셋이 다양한 표면에 나타날 수 있는 경우 기본 및 확대 렌더링을 투명, 밝은, 어두운 배경에 대해 확인합니다.
  9. 정리 과정을 실행합니다. 모든 연결되지 않은 구성 요소와 의심스러운 작은 색상 클러스터를 분류합니다. 의도하지 않은 것은 삭제합니다.
  10. 가능하면 감사합니다. 기본 PNG에 대해 scripts/audit_png.py를 실행합니다. 경고를 오류의 자동 증명이 아닌 검토 프롬프트로 취급합니다.
  11. 수정하고 다시 렌더링합니다. 새 아트워크를 마무리하기 전에 의도적인 정리 반복을 최소 한 번 완료합니다.
  12. 최종 결과물을 내보냅니다. 요청된 PNG, 애니메이션 프레임, GIF, 스프라이트시트 및 메타데이터를 생성합니다.

핵심 명령어

유효성 검사 및 렌더링:

pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8

명명된 프레임 렌더링:

pix render asset.pix --frame frame-name -o frame-1x.png
pix render asset.pix --frame frame-name -o frame-8x.png --scale 8

스킬 저장소 루트에서 기본 PNG 감사:

python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png

애니메이션 결과물 내보내기:

pix anim asset.pix -a animation-name --out-dir frames/
pix sheet asset.pix -a animation-name -o sheet.png --json sheet.json
pix gif asset.pix -a animation-name -o animation.gif

에셋별 기준

로고 및 아이콘

  • 하나의 지배적인 실루엣과 강력한 네거티브 공간을 사용합니다.
  • 기본적으로 떠다니는 구성 요소 또는 주변 입자가 0개여야 합니다.
  • 1x에서 마크를 명확히 하는 경우가 아니면 1픽셀 모서리 장식을 피합니다.
  • 투명, 밝은, 어두운 배경에서 테스트합니다.
  • 기본 크기와 의도된 UI 표시 크기에서 인식 가능한지 확인합니다.

캐릭터 및 오브젝트 스프라이트

  • 검은색으로 채워진 실루엣이 여전히 알아볼 수 있어야 합니다.
  • 눈, 무기, 팔다리 및 기타 식별자는 1x에서 읽을 수 있어야 합니다.
  • 초점 기능과 경쟁하는 텍스처를 피합니다.
  • 접촉 그림자는 의도적으로 분리된 그림자가 아닌 한, 주제에 부착되거나 명확하게 정렬된 상태를 유지합니다.

장면 및 배경

  • 전경, 중경, 배경 계층을 설정합니다.
  • 주변 입자는 설정, 깊이 또는 움직임을 지원할 때만 허용됩니다.
  • 의도적으로 반복 텍스처 패턴을 사용하고, 균일한 무작위 점박이는 피합니다.

애니메이션

  • 아주 작은 임의의 픽셀 변경보다는 뚜렷한 키 포즈를 사용합니다.
  • 팔레트, 조명 및 볼륨을 프레임 전체에 걸쳐 일관되게 유지합니다.
  • 루프 전환을 확인하고 각 프레임을 개별적으로 검사합니다.
  • 장식용 입자가 프레임 사이에 실수로 깜빡이지 않는지 확인합니다.

필수 정리 체크리스트

모든 답변이 만족스러울 때까지 작업 완료로 표시하지 마십시오:

  • 1x에서 주제를 알아볼 수 있습니까?
  • 실루엣이 내부 세부 사항 없이 주제를 전달합니까?
  • 모든 분리된 구성 요소에 명시적인 목적이 있습니까?
  • 모든 단일 픽셀 표시가 채우기용이 아닌 기능적입니까?
  • 요청되지 않은 반짝임, 별, 먼지 및 모서리 장식이 생략되었습니까?
  • 하이라이트가 하나의 광원과 그룹화되어 정렬되었습니까?
  • 그림자와 접촉 지점이 의도적입니까?
  • 팔레트가 제한적이고 역할 기반입니까?
  • 에셋에 우발적인 클리핑 없이 깨끗한 여백이 있습니까?
  • 1x 및 확대 배율에서 검사되었습니까?
  • 적절한 배경 색상에서 확인되었습니까?
  • 첫 번째 렌더링 후 최소 한 번의 정리 수정이 완료되었습니까?
  • 애니메이션의 경우 키 포즈를 읽을 수 있고 루프가 깔끔합니까?
  • 스프라이트시트의 경우 프레임이 명확하게 정렬되고 명명되었습니까?

시각적 검토 보고서

완료를 보고할 때 다음을 간략히 명시하십시오:

  • 기본 캔버스 크기;
  • 생성된 내보내기 파일;
  • 수행된 시각적 검사;
  • 분리된 구성 요소나 작은 색상 클러스터가 남아 있는지와 그 이유;
  • 의도적으로 요청된 장식.

pix check를 시각적 검증으로 설명하지 마십시오. pix check는 소스의 유효성을 검사하고, 렌더링 및 검사가 아트워크의 유효성을 검사합니다.

참고 자료

더 깊은 지침이 유용할 때 읽으십시오:

예제 에셋

관련 스킬