Iconsaz: 맞춤형 아이콘 팩은(는) 무엇을 하나요?
사용자의 브랜드에 완전히 속한 것처럼 보이는 새롭고 독창적인 아이콘 팩을 만듭니다. 서체와 같은 획 느낌, UI와 같은 모서리 언어, 마케팅과 같은 분위기를 갖춥니다. 품질 기준은 최고의 공개 팩(Lucide, Phosphor, Tabler, Heroicons, Material Symbols, Untitled UI)과 동일합니다: 하나의 그리드, 하나의 획 규칙, 하나의 광학 크기, 예측 가능한 이름. 결과물은 사용자 고유의 팩이며, 그 어떤 팩의 복사본도 아닙니다.
이 스킬의 파일
| 파일 | 읽는 시점 |
|---|---|
references/question-flow.md | 1단계: 14개 질문의 정확한 표현, 옵션, 기본값, 배치 |
references/style-rules.md | 2-7단계: 벤치마크 규칙, 브랜드-스타일 매핑, 제작 규칙, 스타터 카탈로그, 은유 뱅크 |
references/rtl-and-culture.md | 8단계 및 제품이 RTL이거나 여러 지역에 출시될 때마다 |
templates/style-brief.md | 3단계: 복사하여 작성, 사용자가 보관하는 파일 |
scripts/validate_icons.py | 6, 7, 9단계: 그리드, 패딩, 획, viewBox, currentColor, 숨겨진 레이어, 이름 지정, 완전성, RTL 쌍 확인 |
scripts/preview_sheet.py | 6, 9단계: preview.html 생성 (크기, 그리드 확대, 라이트/다크, 색상, RTL 전환) |
scripts/package_pack.py | 10단계: 검증 후 SVG + Figma 플랫 복사본 + 미리보기 + 브리프 + 가져오기 가이드 압축 |
스크립트는 의존성 없는 순수 Python 3.8+입니다. python scripts/<name>.py --help로 실행합니다.
두 가지 모드
- 새 팩: 아래 전체 워크플로를 실행합니다.
- 팩 확장: 사용자가 이 스킬로 이전에 만든 스타일 브리프(
icon-specJSON 블록 포함)를 공유합니다. 인터뷰와 브랜드 스캔을 건너뜁니다. 브리프를 읽고, 추가할 아이콘만 질문하고(추상적인 아이콘에 대한 은유 제시), 브리프의 정확한 수치로 그리고, 검증하고, 아이콘 목록에 추가하고, 마이너 버전을 올리고 변경 로그를 추가합니다. 이 모드에서는 그리드, 획, 패딩, 반경을 절대 변경하지 마십시오. 이전 아이콘과 정확히 일치하는 것이 핵심입니다. 사용자가 스타일 변경을 원하면 새 메이저 버전이며 모든 아이콘을 다시 그려야 합니다.
워크플로
세 지점(브랜드 스캔(2단계), 브리프(3단계), 테스트 아이콘(6단계))에서 사용자를 참여시키십시오. 잘못된 가정으로 60개의 아이콘을 그리는 것은 한 번의 추가 확인보다 훨씬 더 많은 시간을 낭비합니다.
1. 인터뷰
references/question-flow.md의 14개 질문을 순서대로, 한 번에 3-4개씩 물어보십시오. 객관식 질문에는 구조화된 질문 도구(예: AskUserQuestion)를 사용할 수 있고, 업로드와 타이핑 응답에는 일반 채팅을 사용하십시오.
- 사용자가 질문을 건너뛰면 참조에서 기본값을 선택하고, 선택한 내용과 이유를 한 줄로 말하고 넘어가십시오. 다시 묻지 마십시오.
- 사용자의 기존 아이콘을 요청하지 마십시오. 만약 제공하더라도 감사히 받고 제쳐두십시오. 이는 새로운 세트입니다. 기존 아이콘은 스타일을 팀이 떠나려는 방향으로 끌어당깁니다. 디자인 시스템 규칙(그리드, 획, 반경)은 환영합니다. 이것이 질문 9가 묻는 내용입니다.
- 업로드된 스크린샷에는 현재 아이콘이 포함될 수 있습니다. 아이콘이 어디에 필요한지(4단계)를 알기 위해서만 사용하고, 어떻게 보여야 하는지는 절대 사용하지 마십시오.
2. 브랜드 DNA 스캔
업로드된 모든 것(로고, 브랜드 가이드, 색상, 서체, 무드 보드, 마케팅 자료, 스크린샷)을 연구하십시오. references/style-rules.md의 매핑 테이블("브랜드에서 아이콘 스타일로")을 사용하여 증거에서 스타일을 도출하십시오. 다음을 살펴보십시오:
- 서체: UI 크기에서의 세로 획 굵기, 터미널(둥근, 평평한, 각진), 볼의 둥근 정도, x-높이, 기하학적 대 휴머니스트. 이는 획 두께와 캡/결합을 결정합니다.
- 로고: 크기 대비 선 두께, 모서리 모양, 각도(45° 대 자유), 패키지 전체의 미묘한 특성이 될 수 있는 시그니처 모티프(노치, 컬, 잘린 모서리).
- UI 스크린샷: 컴포넌트 모서리 반경, 테두리 너비, 밀도, 간격. 이는 아이콘 모서리 반경과 크기 세트를 결정합니다.
- 색상 및 이미지: 분위기만 알려줍니다. 아이콘은
currentColor로 제공됩니다.
결과를 표로 보여주고 사용자에게 확인 또는 수정을 요청하십시오:
| 신호 | 증거 | 결정 | 신뢰도 |
|---|---|---|---|
| 획 | 본문 서체 Nunito Regular, 16px 텍스트에서 세로 획 ≈ 1.6px | 24px에서 2px, 20px에서 1.75px | 높음 |
증거가 부족할 때는 명확히 말하십시오("서체가 제공되지 않아 로고로만 획을 추론하며, 신뢰도는 중간입니다").
3. 스타일 브리프
templates/style-brief.md를 복사하고 모든 섹션을 채운 후 사용자에게 보여주십시오. 그리드와 패딩, 크기별 획, 캡과 결합, 모서리 반경, 스타일과 상태, 크기, 분위기, 이름 지정, RTL 결정 및 범주별 전체 아이콘 목록을 다룹니다. 하단의 icon-spec JSON 블록은 스크립트가 읽는 내용이므로, 산문과 동기화를 유지하십시오. 그리기 전에 명시적 승인을 받으십시오.
4. 누락된 아이콘 찾기
각 스크린샷을 영역별로(네비게이션, 헤더, 툴바, 버튼, 목록 행, 양식 필드, 빈 상태, 토스트 및 상태, 설정 행, 카드) 살펴보고 아이콘이 필요한 모든 지점을 나열하십시오. 표(화면, 위치, 필요한 아이콘, 이미 목록에 있나?)를 제시하고 사용자가 동의한 후 누락된 항목을 브리프의 아이콘 목록에 추가하십시오. 스크린샷이 없으면 references/style-rules.md의 스타터 카탈로그와 제품 컨텍스트를 사용하십시오.
5. 은유 옵션
모든 추상적 개념(환불, 상담, 동기화, 온보딩, 구독, 로열티, 규정 준수 등)에 대해 각각 두세 가지 시각적 아이디어와 한 줄짜리 근거를 제공하고, references/rtl-and-culture.md를 사용하여 문화적 위험을 표시하십시오. references/style-rules.md의 "은유 뱅크"에 시작점이 있습니다. 사용자가 선택하게 한 후 브리프에 기록하십시오. 다음 디자이너는 refund(환불)가 반환 화살표가 있는 동전인 이유를 알아야 합니다.
6. 테스트 아이콘
먼저 home, search, settings 및 가장 특징적인 제품별 아이콘 등 세네 가지 샘플을 그리십시오. 각 승인된 스타일과 모든 크기로 만드십시오. 그런 다음 실행하십시오:
python scripts/validate_icons.py icons/ --brief style-brief.md --samples
python scripts/preview_sheet.py icons/ --brief style-brief.md -o preview.html
모든 오류를 수정하고 미리보기를 직접 확인(브라우저에서 열고 1× 크기를 확인, 확대만 보지 마십시오)한 후 사용자에게 보여주십시오. 무엇이 어색한지 물어보십시오. 이 단계의 일반적인 조정: 획이 약간 더 두껍거나 얇게, 모서리를 더 부드럽게, 더 많거나 적은 디테일. 변경 사항이 있으면 브리프를 업데이트하십시오. 사용자가 샘플을 승인할 때까지 전체 세트를 시작하지 마십시오.
7. 전체 세트
아래 "그리는 방법"에 따라 브리프의 모든 아이콘을 그리십시오. 범주별로 작업하고 각 범주 후에 검증기를 실행하여 80개 아이콘 후에 하나의 체계적인 실수를 찾지 않도록 하십시오.
8. RTL 및 문화
텍스트 방향이 RTL 또는 양방향인 경우, 모든 방향성 아이콘(화살표, 뒤로 및 앞으로, 보내기, 답장, 실행 취소 및 다시 실행, 로그아웃, 목록 들여쓰기 등)에 대해 미러링된 -rtl 버전을 만드십시오. 비방향성 아이콘은 그대로 두십시오. 시계나 재생 버튼을 미러링하는 것은 실수입니다. 문화적 위험 목록에 대해 모든 아이콘을 확인하십시오. 두 목록 모두 references/rtl-and-culture.md에 있습니다. 방향성 아이콘을 스펙의 directional 목록에 표시하여 검증기가 쌍을 확인하도록 하십시오.
9. 최종 확인
--samples 없이 검증기를 실행하십시오. 오류가 0이어야 합니다. 그런 다음 육안으로 확인하십시오. 스크립트는 인식 가능성을 판단할 수 없습니다:
- 브리프의 모든 아이콘이 모든 스타일과 크기로 존재(검증기: 완전성).
- 모든 아이콘이 브리프(그리드, 패딩, 획, 캡, 결합, 반경)를 따름(검증기).
- 광학 크기가 세트 전체에서 균일함. 미리보기 그리드에서 어떤 것도 이웃보다 커 보이거나 작아 보이지 않음(검증기가 이상값 경고).
- 각 아이콘이 가장 작은 크기에서도 명확함: 미리보기의 1× 행을 보십시오. 두 세부 사항이 합쳐지면 획을 얇게 하는 대신 해당 크기에서 하나를 제거하십시오.
- 이름이
category/name/variant/size를 따르고, 소문자 케밥 케이스이며, 모든 곳에서 동일한 것을 의미함(검증기: 이름 지정). - RTL 쌍이 존재하고 실제로 서로 미러링됨(검증기: RTL).
- 문화적으로 위험한 기호가 들어가지 않았음.
실패한 항목을 수정하고 전달하기 전에 다시 확인하십시오.
10. 전달
Figma Professional(이상): Figma MCP로 라이브러리를 구축하십시오. 도구가 없거나 인증되지 않은 경우 연결이 필요하다고 사용자에게 알리고 대신 zip을 제공하십시오. figma-use와 같은 Figma 스킬을 사용할 수 있으면 첫 번째 쓰기 호출 전에 로드하십시오.
- 커버, 아이콘, 사용법의 세 페이지로 새 파일을 만듭니다.
- 아이콘 페이지에서 범주별로 하나의 섹션을 만듭니다. 각 아이콘에 대해 모든 SVG를 노드(
figma.createNodeFromSvg)로 바꾸고, 각각을 컴포넌트로 변환하고, 변형 속성(style=outline, state=default, size=24)으로 이름을 지정하고,figma.combineAsVariants로category/name이라는 컴포넌트 세트로 결합합니다. 획은 그대로 유지하고 아웃라인 처리하지 마십시오. - 쓰기 호출당 하나의 범주를 구축하십시오. 큰 배치는 시간 초과될 수 있으며, 실패 시 전체 팩이 아닌 해당 범주만 손실됩니다. 각 범주 후에 스크린샷을 찍고 미리보기와 비교하십시오.
- 커버: 팩 이름, 버전, 무드 단어 및 히어로 아이콘 그리드. 사용법: 크기 및 각각 사용 시기, 텍스트 옆 간격, 활성/비활성 규칙, RTL 규칙, 이름 지정, Do/Don't 예시 및 "아이콘을 추가하려면 스타일 브리프를 스킬과 공유하십시오".
- 또한 다음 경로의 zip을 제공하십시오. 개발자는 어차피 SVG가 필요합니다.
Figma Free(또는 Figma 없음): Figma MCP는 무료 요금제에서 라이브러리 파일을 쓸 수 없으므로 대신 파일을 전달하십시오:
python scripts/package_pack.py icons/ --brief style-brief.md --out dist/
오류가 있으면 패키징을 거부하고, 경고가 있으면 검토할 때까지 거부합니다. 각 남은 경고가 의도된 경우에만 --allow-warnings를 추가하십시오. 그런 다음 dist/<pack>-v<version>.zip을 작성합니다. 여기에는 svg/(category/name/variant/size.svg 트리), figma/(Figma에서 한 번의 배치 이름 변경 후 슬래시 이름이 되는 category__name__variant__size.svg 플랫 복사본), preview.html, manifest.json, 스타일 브리프 및 아이콘을 가져와 변형이 있는 컴포넌트로 바꾸는 단계별 가이드 IMPORT-TO-FIGMA.md가 포함됩니다. 채팅에서도 해당 단계를 요약하십시오.
11. 브리프 저장
최종 스타일 브리프를 전달물 옆에 저장하고(이름: <pack>-style-brief.md), 다음 단어로 사용자에게 알리십시오: "이 파일을 보관하십시오. 다음에 아이콘이 필요하면 먼저 저와 공유하십시오. 그러면 새 아이콘이 이 팩과 정확히 일치합니다."
그리는 방법
동의된 그리드에 SVG를 손으로 작성합니다. 디자인 도구에서 벡터를 만드는 것과 같습니다. 각 크기는 자체 네이티브 캔버스(viewBox="0 0 20 20" 등)에 그려지므로, 작은 크기는 Material의 광학 크기와 Heroicons의 20px 및 16px 세트처럼 자체 획과 단순화된 디테일을 가질 수 있습니다.
- 루트:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">. 루트에 페인트를 설정하고 모양이 상속하도록 하여 모든 아이콘을 동일하게 유지합니다. - 그리드에서 기본 요소(
circle,rx가 있는rect,line, 호가 있는path)를 사용하십시오. 좌표를 정수 또는 반 단위(최대 1/4 단위)로 유지하십시오. 그리드 외부 점은 1×에서 흐릿하게 렌더링됩니다. - 색상은
currentColor만 사용합니다. 채워진 모양은fill="currentColor"를 사용합니다. 듀오톤의 두 번째 톤은 브리프의 불투명도로currentColor를 사용하며, 두 번째 색상이 아닙니다. - 변환, 숨겨진 요소,
<text>, 포함된 이미지,<style>, ID 또는 편집기 메타데이터가 없어야 합니다. 모든 것을 일반 지오메트리로 평면화합니다. - 모양을 키라인(원, 정사각형, 세로 또는 가로 직사각형, style-rules 참조)에 맞춰서 둥근 아이콘과 정사각형 아이콘이 같은 크기로 보이도록 합니다.
- 내부 간격은 최소 획 너비 이상이며, 16px에서는 더 넓어야 합니다.
- 채워진 변형은 개요와 동일한 실루엣을 따르며, 디테일은 간격으로 제거됩니다. 동일한 아이콘으로 읽혀야 하며, "켜진" 상태여야 합니다.
- 더 작은 크기를 만들려면 24px 지오메트리를 새 캔버스로 조정하고, 점을 그리드에 스냅하고, 브리프에서 해당 크기의 획을 설정한 다음, 더 이상 맞지 않는 디테일을 제거하십시오. 파일을 그냥 확장하지 마십시오.
- 브랜드 서체와 일치: 캡과 결합은 터미널을 반영하고, 곡선은 볼을 반영하며, 패키지 전체 시그니처(하나의 노치, 하나의 잘린 모서리)는 브리프가 요청할 경우 로고를 에코할 수 있습니다.
최소한의 개요 아이콘 예시:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7"/>
<path d="M15.5 15.5 21 21"/>
</svg>
작업 레이아웃
icons/<category>/<name>/<variant>/<size>.svg e.g. icons/nav/home/outline/24.svg
icons/nav/arrow-back-rtl/outline/24.svg mirrored RTL twin
style-brief.md filled-in template with the icon-spec block
preview.html generated
dist/<pack>-v<version>.zip generated
표준 아이콘 이름은 .svg를 제외한 경로입니다. 예: nav/home/outline/24. 이는 또한 Figma 컴포넌트 이름이므로 코드, 디자인 및 파일이 일치합니다.
사용자와의 대화
이를 사용하는 많은 사람은 개발자가 아닌 디자이너입니다. "stroke"와 함께 "선 두께", "radius"와 함께 "모서리 둥글기"를 말하고, 스크립트 출력을 원시로 붙여넣지 말고 한 문장으로 설명하십시오. 각 턴을 짧게 유지하십시오: 몇 가지 질문, 하나의 결정, 또는 검토할 한 가지.
}```