simple-design

name	simple-design
description	배너·소셜 카드·OG 이미지·썸네일·간단 UI 시안 같은 가벼운 디자인을 클로드의 디자인 역량으로 만든다. "배너 만들어줘 / 소셜 카드 / OG 이미지 / 썸네일 / 공지 이미지 / 간단한 UI 시안"이라고 할 때.

작업 흐름(항상): 왜(목적·의도) → 무엇을 → 어떻게 → 기존 컨텍스트·리서치 → 기획 → 시각화 → 호출·실행 → 🔁회고·보완. 자세히 [[method]].

simple-design — 가벼운 디자인 (클로드 디자인 활용)

새로 손으로 SVG를 짜 넣지 않는다. 클로드의 디자인 역량을 그대로 쓴다.

어떻게

• 디자인/시각 결과물은 artifact-design 스킬을 먼저 읽어 기준(팔레트·타이포·레이아웃·라이트/다크·자체 완결)을 잡고, 그 기준대로 자체 완결 HTML/SVG로 만들어 아티팩트로 렌더하거나 파일로 저장해 보여준다.
• 차트·데이터 시각화가 섞이면 dataviz 스킬 기준을 따른다.
• 즉 이 스킬은 "무엇을·왜"만 정하고, 실제 렌더는 클로드 디자인 도구에 맡긴다. (품질·접근성·테마 처리를 재발명하지 않음)

1. 먼저 확인 (묻고 시작)

• 목적(공지/이벤트/OG/썸네일) · 비율(OG 1200×630, 인스타 1080×1080, 배너 1500×500 등) · 용도(웹 표시 vs 다운로드) · 브랜드(~/.pm-copilot/data/brand.md 있으면 인용, 없으면 중립).

2. 원칙

• 자체 완결(외부 CSS/JS/폰트/CDN 금지) · 접근성(대비 4.5:1↑, 색만으로 정보 전달 금지) · 미확정 문구는 [문구 확인 필요] · 반자동(시안→사람 검토).
• 예쁘게보다 읽히게가 먼저(신입 코칭: 대비·여백·정렬을 왜 지키는지 짚어줌).

선 긋기

• 화면 UI 저충실도는 [[mockup]], 인터랙티브는 [[prototype]], 요구사항부터면 [[screen-spec]].

관련: [[mockup]] [[prototype]] [[screen-spec]] [[method]]

🎨 Figma 연동 (커넥터 figma 연결 시)

• 배너·소셜카드·간단 UI를 Figma에서 생성/편집(편집 권한 시). 기존 브랜드 프레임을 열람해 톤을 맞춘다. 권한 없으면 클로드 디자인(HTML/SVG)으로 만들어 전달.