Community이미지github.com

골든 스페이스

여백, 비례, 위계, 타이포, 색을 의도해 포스터, 소셜 그래픽, 일러스트, 다이어그램, 아이콘을 만들고 실제 SVG 또는 래스터 파일을 넘긴다.

골든 스페이스란 무엇인가요?

포스터, 키 아트, 아이콘, 다이어그램이 필요할 때 쓴다. 여백, 비례, 위계, 색 제약을 만드는 동안 적용하고 결과를 검수한다. 납품은 편집 가능한 SVG이거나 PNG, JPEG, WebP이며, 프롬프트나 비평에서 멈추지 않는다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guardyanz/golden-space/tree/HEAD/skills/golden-space

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

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

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

문서

골든 스페이스은(는) 무엇을 하나요?

의도적인 구성을 가진 시각적 아티팩트를 생성하고, 적합한 경우 편집 가능한 소스를 함께 제공합니다. 브리프의 내용, 브랜드, 매체, 크기, 스타일을 존중합니다. 포스터나 이미지 제작 요청을 받으면 디자인 조언, 계획, 이미지 생성 프롬프트에서 멈추지 않고 실제 아티팩트를 만들어야 합니다.

아티팩트 선택 및 전달

  • 사용자가 요청한 형식(편집 가능한 SVG 또는 PNG, JPEG, WebP와 같은 래스터)으로 전달합니다. 이들은 대체 최종 출력물이며, 둘 다 전달할 필요는 없습니다. 형식이 지정되지 않은 경우, 벡터에 적합한 작업은 SVG를, 사진이나 회화적 작업은 래스터를 선택합니다. 필요한 경우 선택 이유를 간략히 언급합니다.
  • 벡터에 적합한 포스터, 소셜 그래픽, 플랫 일러스트레이션, 다이어그램, 아이콘의 경우 기본적으로 완전한 .svg 파일을 생성하고 저장합니다. 사용자가 별도로 SVG를 요청할 필요가 없습니다. 렌더링이 가능하다면 편집 가능한 마스터를 대체하지 않는 선에서 PNG 미리보기도 제공합니다. 다른 형식에 대한 명시적 요청이 우선합니다.
  • 래스터 포스터나 플랫 일러스트레이션은 중간 SVG로 구성한 후 사용 가능한 렌더러로 내보낼 수 있습니다. 요청된 래스터 파일을 전달하고, SVG 소스는 요청되거나 인계에 유용한 경우에만 포함시킵니다. 파일 확장자를 변경하여 요청된 형식을 렌더링하거나 인코딩하는 것을 대체하지 마십시오.
  • 사진, 포토리얼리즘, 또는 회화적 이미지의 경우, 사용 가능한 이미지 생성 또는 편집 도구를 통해 동일한 구성 제약 조건을 적용합니다. 해당 워크플로우에 대해서는 references/image-direction.md를 참조하십시오. 요청된 래스터 이미지를 전달합니다. SVG도 함께 요청된 경우, 가능할 때 별도의 벡터 해석을 생성하고 디테일 손실이 있다면 이를 명시합니다. 요청된 시각적 스타일을 조용히 대체하지 마십시오.
  • SVG 내부에 배치된 래스터 이미지는 하이브리드 구성으로, 완전히 편집 가능한 벡터 아트웍이 아닙니다. 관련이 있는 경우에만 제공하고 포함된 래스터를 명확히 표시하며, 라이브 텍스트와 별도의 벡터 오버레이는 유지합니다. 이를 아래에 설명된 휴대용 벡터 마스터로 제시하지 마십시오.
  • 사용자의 출력 디렉토리와 선택한 형식에 맞는 파일 이름(예: poster.svg 또는 poster.png)을 사용합니다. 파일 도구를 사용할 수 있으면 파일을 작성하고 인계 시 링크를 제공합니다. 파일 작성을 사용할 수 없으면 완전한 SVG 소스를 반환합니다. 코드 펜스는 사용 가능한 도구가 만들 수 있는 파일을 대체하는 것이 아닌, 최후의 수단입니다.

구성 확립

제공된 브리프를 사용하십시오. 세부 사항이 누락된 경우 합리적인 기본값을 선택하고 간략히 명시합니다. 누락된 답변이 결과를 실질적으로 바꾸는 경우에만 질문합니다. 기존 디자인의 경우 그 목적과 유용한 시각적 언어를 보존합니다.

메시지, 초점 요소, 읽기 순서, 출력 크기, 의도된 가장 작은 표시 크기를 식별합니다. 생성하기 전에 압축된 내부 디자인 명세(초점 배치, 비율 또는 그리드, 안전 여백, 간격 관계, 유형 역할, 팔레트, 보호된 카피 영역)를 구성합니다. 이를 사용하여 SVG를 구성하거나 이미지 도구를 지시합니다. 최종 설명에 명명 원칙만 나열하는 것은 충분하지 않습니다. 구체적인 비례 및 광학적 결정을 위해서는 references/composition.md를 읽으십시오.

  • 황금비 phi = (1 + sqrt(5)) / 2(약 1.618)를 선택적 관계로 취급합니다. 사용 가능한 분할은 여백과 거터 이후 약 61.8% / 38.2%입니다. 동일한 열, 삼분할, 또는 콘텐츠 중심 레이아웃과 비교하십시오. 콘텐츠와 광학적 균형이 이점을 얻을 때만 유지합니다. 비율이 아름다움을 증명한다거나 정교함을 나타내기 위해 나선을 추가한다고 주장하지 마십시오.
  • 여백에 역할을 부여하십시오: 주제 분리, 관련 항목 연결, 가독성 보호, 또는 초점 생성. 내부 간격은 일반적으로 그룹 간 간격보다 작아야 합니다. 빈 캔버스의 보편적인 백분율을 강요하지 마십시오.
  • 크기, 두께, 위치, 공간의 의도적인 차이로 계층을 구축합니다. 정렬과 반복되는 간격을 사용하여 관계를 시각화합니다. 기하학적으로 정렬된 원, 대각선, 문자는 시각적으로 중심이 맞지 않아 보일 때 조정합니다.
  • 팔레트와 서체가 주제에 봉사하도록 합니다. 본문은 전달 크기에서 읽기 쉽게 유지합니다. 빡빡한 구성을 구하기 위해 텍스트를 줄이지 마십시오. 공간을 채우기 위해 카피를 지어내지 마십시오.
  • 정보 그래픽과 인터페이스의 경우 색상뿐만 아니라 레이블이나 모양으로 의미를 전달합니다. 실제 배경에 대한 대비를 확인합니다. 색상 임계값과 적용 가능성은 구성 참조에 있습니다.

편집 가능한 SVG 마스터 구축

SVG를 생성하거나 편집하기 전에(래스터 내보내기에 사용되는 중간 소스 포함) references/svg-contract.md를 읽으십시오. 기본값은 정적이고, 자체 포함된, 벡터 전용 편집 가능 마스터입니다. 이 섹션은 SVG 저작에 적용됩니다. 래스터 출력은 편집 가능한 벡터 콘텐츠로 가장할 필요가 없습니다.

  • SVG 네임스페이스와 올바른 크기의 viewBox를 가진 완전한 SVG 문서를 작성합니다. SVG 최종 전달물의 경우 .svg 파일을 저장하고 링크합니다. SVG로 래핑된 비트맵이나 미리보기 스크린샷으로 대체하지 마십시오.
  • 독립적인 객체는 독립적으로 선택 가능하게 유지합니다. 설명적인 고유 ID, 얕은 의미 그룹, 적합한 기본 모양, 곡선이 필요한 경우에만 간결한 경로를 사용합니다. 전체 디자인을 복합 경로로 바꾸지 마십시오.
  • 마스터에서 텍스트는 라이브 <text> / <tspan>으로 유지합니다. 글꼴 패밀리와 폴백을 선언하고 대체 위험을 공개합니다. 선택적 아웃라인 배포 사본은 별도의 아티팩트입니다. 아웃라인 처리는 텍스트 편집 가능성을 잃습니다.
  • 프레젠테이션 속성과 간단한 변환을 선호합니다. 휴대용 마스터에서 외부 종속성, 스크립트, 내장 래스터 콘텐츠, HTML, 애니메이션, 필터 효과, CSS 기반 외관을 피합니다. 로컬 그라디언트나 클리핑 정의는 시각적 목적에 기여할 때만 사용합니다. 호환성에 민감한 기능은 테스트되지 않은 호환성 주장이 아닌, 의도된 편집기에서 검사해야 합니다.
  • 기존 파일을 정리할 때 ID, 라이브 텍스트, 그룹, 유용한 정밀도를 유지합니다. 파괴적인 최적화를 조용히 실행하거나 소스 마스터를 평탄화하지 마십시오.
  • assets/starter.svg는 그 구조가 브리프에 맞을 때만 적용합니다. 비율, 방향, 색상, 스타일은 모든 출력에 복사할 기본값이 아닌 예시입니다.

확인 및 인계

최종 또는 중간 SVG의 경우 Python을 사용할 수 있을 때 번들 구조 검사기를 실행합니다:

python <skill-directory>/scripts/check_svg.py artwork.svg

오류를 수정합니다. 각 경고를 검토합니다. 경고는 나쁜 디자인의 자동 증거가 아닌 검토 요청입니다. --strict는 경고에서도 실패합니다. --json은 기계 판독 가능한 보고서를 출력합니다. 검사기는 보수적인 저작 프로필을 다루며, 모든 유효한 SVG를 다루지 않습니다. 시각적 품질, 대비, 클리핑, 경로 형상, 교차 편집기 충실도를 측정하지 않습니다. 이를 보안 살균기로 부르지 마십시오.

래스터 전달의 경우 실제 인코딩된 형식, 픽셀 크기, 종횡비, 요청된 배경 또는 투명도를 확인합니다. PNG 또는 적합한 WebP는 알파를 보존할 수 있습니다. JPEG는 의도적인 불투명 배경이 필요합니다. 전달 크기에서 압축 및 가장자리 품질을 검사합니다. PNG나 JPEG를 SVG 검사기에 보내지 마십시오.

인계 전에 실제 시각물을 디자인 명세와 비교하여 검토합니다:

  • 의도된 주제나 메시지가 진입점이며 명확한 읽기 순서가 있는가?
  • 안전 여백이 필수 콘텐츠를 보호하고 초점 주변에 목적 있는 공간이 있는가?
  • 그룹 내부와 그룹 사이의 간격이 구별되며 우연한 접촉이 없는가?
  • 선택한 비율이 콘텐츠를 줄이거나 빡빡하게 만들지 않고 잘 맞는가?
  • 텍스트, 색상 관계, 기준선, 선 두께가 의도된 크기에서 가독성이 있고 일관되며 우연한 클리핑이나 지어낸 문자가 없는가?

가능한 경우 전달 크기와 더 작은 미리보기로 SVG를 렌더링합니다. 출력을 검사하고 발견된 문제를 전달 전에 수정합니다. 단순히 따른 규칙을 나열하지 마십시오. 래스터 출력에도 동일한 시각적 검토를 적용합니다. 공식과 구조적 린트는 미적 품질을 보장할 수 없습니다. 편집기를 사용할 수 있으면 SVG 마스터를 열고 텍스트와 대표적인 모양을 독립적으로 선택하고 변경할 수 있는지 확인합니다. 렌더링이나 편집기 확인이 불가능한 경우, 통과했다고 주장하지 않고 그 한계를 보고합니다.

선택한 형식의 실제 파일(SVG 작업에 파일 쓰기가 불가능한 경우 전체 SVG 소스)과 함께 구성, 폰트, 실제로 수행된 검사에 대한 짧은 메모를 전달합니다. 관련된 경우 정확한 치수와 선택한 비율을 포함합니다. 미리보기는 소스와 분리하여 유지합니다. 요청되지 않은 디자인 에세이는 추가하지 마십시오. SVG 전용 또는 래스터 전용 인계를 존중합니다.

관련 스킬