harness/design.md
DESKTOP-TKLFCPR\ython cae3e8fe2c refactor: 플러그인 pm-pmo → zioinfo, 마켓플레이스 ythong-harness → ythong 개명
- 설치 식별자: /plugin install zioinfo@ythong (+ /reload-plugins)
- plugins/pm-pmo → plugins/zioinfo (git mv, 히스토리 보존)
- marketplace.json name=ythong, 플러그인 entry name/source 갱신
- 전 문서 참조 갱신: CLAUDE.md·PROJECT_MAP·docs/plugins.md·plugin-guide·
  gen_intro_deck.py·design.md·zioinfo/proposal-builder README·INSTALL
- 스킬(pm-pmo-orchestrator)·에이전트 8종 이름은 유지 (패키지명만 변경)
- 로컬 재등록·재설치 검증: ythong 마켓플레이스 add 후
  zioinfo·proposal-builder·harness·zio-harness @ythong 4종 설치 성공, details 오류 0

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-17 09:31:34 +09:00

161 lines
8.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# harness 브랜드 에셋 디자인 의뢰서 (for Stitch)
> **의뢰 목적:** 본 저장소의 기존 브랜드 에셋 4종(`harness_banner.png`·`harness_icon.png`·`harness_social.png`·`harness_team.png`)을 기준으로,
> 동일한 마스코트·톤을 유지하면서 **일관된 브랜드 시스템으로 재정비(리파인·확장)**한 신규 에셋을 제작한다.
> 각 에셋 섹션의 **Stitch Prompt** 블록을 그대로 복사해 의뢰에 사용한다.
---
## 1. 브랜드 개요
| 항목 | 내용 |
|------|------|
| 프로젝트 | **harness** — Claude Code 에이전트 팀 & 스킬 하네스 마켓플레이스 (`ythong`) |
| 마스코트 | **하네스(안전벨트+공구벨트)를 착용한 주황색 꽃게** — "에이전트에게 하네스를 채워 일을 시킨다"는 은유 |
| 핵심 컨셉 | 개발 자동화 · 에이전트 팀 협업 · 도구(스킬) 장착 |
| 톤 & 무드 | 친근하고 귀여운 카툰, 그러나 개발 도구다운 정돈됨. 유치하지 않게 채도·라인 정리 |
| 금지 | 실존 기업/제품 로고, 워터마크, 사진 합성, 과도한 그라데이션·이펙트 |
### 1-1. 마스코트 공통 스펙 (전 에셋 동일 유지 — 가장 중요)
- **몸체:** 둥근 타원형 꽃게, 주황–레드 (#E8542F 계열), 배 부분은 밝은 살구색 (#F6C29A)
- **하네스:** 검정(#2B2B2B) X자 어깨 스트랩 + 허리 벨트, 회색 버클. 용도별 변형 허용(공구벨트/클립보드/렌치 파우치)
- **눈:** 크고 둥근 눈(흰자+검은 동공+하이라이트), 항상 미소
- **다리:** 좌우 3~4개, 집게 2개
- **스타일:** 두꺼운 다크 아웃라인의 플랫 벡터 카툰 (셀 셰이딩 최소화)
### 1-2. 컬러 팔레트
| 역할 | HEX (근사) | 사용처 |
|------|-----------|--------|
| Primary — Crab Orange | `#E8542F` | 마스코트 몸체, 포인트 |
| Primary Light | `#F6C29A` | 마스코트 배, 보조 면 |
| Ink — Harness Black | `#2B2B2B` | 스트랩, 아웃라인, 텍스트 |
| Brand Navy | `#2B3AA0` | 아이콘 배경 원, 딥 포인트 |
| Sky Blue | `#7EB3E8 → #4A72C4` | 배너 배경 그라데이션 |
| Pale Blue | `#CFE4F5` | 팀/설명 일러스트 배경 |
| Accent Yellow | `#FFC72C` | 번개·기어·별 등 장식 아이콘 |
| Neon Cyan | `#3DF5E0` | 연결선·워크플로우 경로 |
| Social Orange | `#F2622E` | 소셜 카드 단색 배경 |
### 1-3. 타이포그래피 (텍스트 포함 에셋)
- 로고타입/헤드라인: 굵은 라운드 산세리프 (예: Baloo·Fredoka 계열 느낌), 대문자 `HARNESS`
- 본문/캡션: 중립 산세리프. 한글 병기 시 Pretendard
- 텍스트는 요청된 에셋에만 넣는다 (아이콘·팀 일러스트는 텍스트 없음)
---
## 2. 에셋별 의뢰 명세
### 2-1. `harness_banner.png` — GitHub/Gitea 저장소 배너
| 항목 | 현행 | 요청 |
|------|------|------|
| 크기 | 2752×1536 (16:9 근사) | 동일 비율, 3840×2160 마스터 + 1280×640(GitHub social preview) 크롭 |
| 구성 | 공구벨트 하네스를 찬 꽃게가 중앙, 주변에 `</>`·번개·기어·아톰 아이콘 부유, 하단 글로우 테크 플랫폼, 파란 그라데이션 배경 | 구도 유지. 장식 아이콘 수를 줄여 여백 확보(좌우 텍스트 오버레이 공간), 아웃라인 스타일을 2-3(소셜)과 통일 |
**Stitch Prompt:**
```
Wide 16:9 hero banner for a developer tool called "harness".
A cute cartoon crab mascot (rounded orange-red body #E8542F, light peach belly,
big glossy eyes, friendly smile) wearing a black X-shaped safety harness with
a tool belt holding tiny wrench, hammer, pliers and gears. Bold dark outlines,
flat vector cartoon style, minimal cel shading.
Centered composition, crab standing on a subtle glowing circuit platform.
A few floating flat icons around it: code brackets </>, lightning bolt,
gear, atom — accent yellow #FFC72C and light blue, keep them sparse so the
left and right sides stay clean for text overlay.
Background: smooth vertical gradient from #7EB3E8 to #4A72C4.
No text, no watermark, no logos.
```
### 2-2. `harness_icon.png` — 플러그인/앱 아이콘
| 항목 | 현행 | 요청 |
|------|------|------|
| 크기 | 2048×2048 | 2048 마스터 + 512/256/128/64/32 리사이즈, 32px에서도 식별 가능 |
| 구성 | 남색(#2B3AA0) 원 안에 극단순화된 꽃게 + 검정 X 하네스 스트랩·버클, 흰 배경 | 실루엣 유지. 소형 사이즈용으로 디테일(버클 문양) 단계별 제거한 단순화 버전 동시 제작. 원형·사각(라운드 코너) 2종 |
**Stitch Prompt:**
```
Minimal flat app icon. A simplified cute crab (solid orange-red #E8542F,
two dot eyes with white highlights, tiny smile, two claws) wearing a black
X-cross harness strap with a small gray buckle, centered inside a solid
deep navy circle #2B3AA0 on a white background.
Flat vector, no gradients, no outline noise, maximum 5 colors,
legible at 32x32 pixels. Also provide a rounded-square background variant.
No text.
```
### 2-3. `harness_social.png` — 소셜/커뮤니티 카드
| 항목 | 현행 | 요청 |
|------|------|------|
| 크기 | 2048×2048 (1:1) | 1:1 유지 + 1200×630(OG 카드) 가로 변형 1종 |
| 구성 | 주황 단색 배경, 윙크+엄지척 꽃게, 검정 하네스(카라비너·파우치), 말풍선 "HARNESS!" | 스타일 기준 에셋. 이 두꺼운 아웃라인·스티커 감성을 전 에셋의 통일 기준으로 삼는다. 말풍선 텍스트는 `HARNESS!` 유지 |
**Stitch Prompt:**
```
Square sticker-style illustration on a solid orange background #F2622E.
A cheerful cartoon crab winking and giving a thumbs-up, wearing a detailed
black climbing/safety harness (shoulder straps, waist belt, small pouches,
one tiny orange carabiner). Very thick black outlines, bold flat colors,
subtle blush on cheeks, one sparkle. A white speech bubble with bold black
uppercase text "HARNESS!". Playful mascot sticker aesthetic, high contrast,
centered, no other text, no watermark.
```
### 2-4. `harness_team.png` — 에이전트 팀 일러스트
| 항목 | 현행 | 요청 |
|------|------|------|
| 크기 | 2752×1536 | 동일 비율 마스터 |
| 구성 | 연파랑 아이소메트릭 그리드 위 꽃게 3마리(검정 하네스=분석가+돋보기·태블릿 / 파랑 하네스=엔지니어+렌치·기판 / 초록 하네스=QA+클립보드·체크), 네온 시안 삼각 경로로 연결 | **4번째 꽃게 추가** — 보라 하네스 + 지휘봉(오케스트레이터). 삼각형 → 다이아몬드 경로로 확장. 하네스 색 = 역할 코드(검정 분석·파랑 개발·초록 QA·보라 지휘) 유지 |
**Stitch Prompt:**
```
Wide 16:9 flat illustration of four cute cartoon crabs collaborating as an
agent team on a pale blue isometric grid background #CFE4F5.
Each crab wears a different colored harness that encodes its role:
(1) black harness crab holding a magnifying glass over a small tablet = analyst,
(2) blue harness crab with two wrenches assembling a gear circuit board = engineer,
(3) green harness crab holding a clipboard with green checkmarks and a pencil = QA,
(4) purple harness crab at the top holding a tiny conductor baton = orchestrator.
They are connected by a glowing neon cyan diamond-shaped workflow path #3DF5E0
with small arrows. Same mascot design language: rounded orange-red bodies
#E8542F, big friendly eyes, bold dark outlines, flat vector cartoon style.
Sparse sparkles only, no text, no watermark.
```
---
## 3. 확장 에셋 (옵션 — 여력 시)
| 에셋 | 용도 | 가이드 |
|------|------|--------|
| 플러그인 배지 3종 | `zio-harness`·`proposal-builder`·`zioinfo` 카탈로그 썸네일 | 2-2 아이콘 프레임 재사용, 하네스 색/소품만 변경(풀스택=파랑+렌치, 제안서=노랑+문서, PM·PMO=보라+클립보드) |
| 빈 상태(empty state) 일러스트 | 문서/웹 | 하네스를 손에 든 꽃게가 "장착 대기" 포즈, 연파랑 배경 |
| 로딩 스피너 | 웹 | 기어를 굴리는 꽃게 미니 루프(스프라이트 시트) |
---
## 4. 납품 규격 & 검수 기준
**납품 형식**
- 원본: SVG 또는 레이어 보존 파일(가능한 경우) + PNG(투명 배경 버전 포함)
- 각 에셋 규격: §2의 크기 열 참조. 색상 프로파일 sRGB
**검수 기준 (전부 충족 시 승인)**
1. 마스코트 4요소(몸체 색·하네스·눈·아웃라인)가 4종 에셋에서 동일 캐릭터로 인지될 것 — §1-1
2. 팔레트 이탈 색 없음(±10% 명도 허용) — §1-2
3. 아이콘 32px 축소 시 실루엣 식별 가능 — §2-2
4. 텍스트는 §2-3의 `HARNESS!` 외 삽입 금지, 워터마크·외부 로고 없음
5. 팀 일러스트의 역할-색 코드(검정·파랑·초록·보라) 정확 — §2-4
**참조 원본:** 저장소 루트 `harness_banner.png` · `harness_icon.png` · `harness_social.png` · `harness_team.png`
| 문서 이력 | |
|------|------|
| 2026-07-17 | 최초 작성 — 기존 PNG 4종 분석 기반 Stitch 의뢰서 생성 |