얻을 수 있는 것
- 앞부분에 토큰, 뒷부분에 작성된 지침이 있는 공개 형식의 DESIGN.md
- 라이트·다크 테마를 담은 tokens.json(W3C 디자인 토큰)과 tokens.css
- 윤곽선 SVG 워드마크, 심볼, 락업, 반전 버전, 단색 버전
- 4~6개의 목업이 들어간 한 페이지 브랜드 보드(오프라인 HTML과 PDF)
- 고를 수 있는 세 방향의 무드보드 페이지
이럴 때 좋아요
- 새 제품, 상점, 사이드 프로젝트에 한 번의 작업으로 정체성 부여하기
- 코딩 에이전트가 평범한 UI를 내지 않도록 DESIGN.md 쓰기
- 기존 테마 파일을 문서화되고 대비가 확인된 시스템으로 바꾸기
- 피치나 첫 고객 미팅에 쓸 믿을 만한 브랜드 보드
이럴 때는 맞지 않아요
- 상표 검색: 비슷한 것은 피하지만 등록 정보를 조회하지는 않습니다
- 마스코트나 전체 일러스트 시스템
- 기존 엄격한 브랜드 북을 한 줄 한 줄 맞추기
사용 방법
Claude·ChatGPT에서
PopNow 스킬 사용: “브랜드 키트 & DESIGN.md 생성기”(brand-kit-design-md). 할 일: Lumen Notes의 브랜드 키트를 만들어 주세요. 늦게까지 일하는 연구자를 위한 차분한 메모 앱입니다. 따뜻하고 약간 똑똑한 느낌으로, 또 하나의 보라색 AI 앱처럼 보이면 안 됩니다. 아직 로고는 없습니다.
코딩 에이전트에서
/popnow-brand-kit-design-md Lumen Notes의 브랜드 키트를 만들어 주세요. 늦게까지 일하는 연구자를 위한 차분한 메모 앱입니다. 따뜻하고 약간 똑똑한 느낌으로, 또 하나의 보라색 AI 앱처럼 보이면 안 됩니다. 아직 로고는 없습니다.
이어서 해 보기
방향 A로 가되, 태그에는 B의 초록색을 가져와 주세요.
지금은 간편 버전만: 팔레트, 글꼴, 목소리만 주세요. 이미지 크레딧은 빼 주세요.
미리 준비할 것
- 제품, 고객, 성격을 설명하는 몇 줄
- 닮으면 안 되는 경쟁사와, 알고 있다면 주요 색
- 유지하고 싶은 로고, 색, 글꼴
- Python 3, Chrome, 윤곽선 워드마크용 fonttools
비슷한 스킬
전체 보기 →흑백 스튜디오 인물 사진
+3평범한 사진을 차분한 흑백 스튜디오 인물 사진으로 바꾸되, 여전히 나처럼 보이게 합니다.
블로그 글 일러스트 세트
+3한 글의 세 단락마다 그 단락이 실제로 말하는 바를 보여 주는, 같은 스타일의 일러스트 세 장.
자동차 단면 해부 포스터
+3일반 자동차의 측면 단면도. 시스템별 색 구분, 번호 마커, 원형 확대 창이 있습니다.
칠판 인포그래픽 메이커
+3정확한 짧은 문구, 분필 그림, 분명한 읽기 순서 하나를 담은 16:9 칠판 스타일 인포그래픽.
시네마틱 스토리보드 프레임
+3한 장면을 세 가지 방식으로 찍은 스토리보드 콘택트 시트 세 장. 연속성은 유지합니다.
일관된 컨셉 아트 세트
+3같은 가상 세계에 속한다는 것이 분명한 캐릭터, 소품, 배경.
귀여운 크레파스 낙서 아트
+3흰 종이 위의 사랑스럽게 서툰 크레파스 캐릭터. 삐뚤빼뚤한 선, 낙서 같은 채색, 선명한 파일, 스티커 컷아웃.
에디토리얼 선화 일러스트
+3블로그 헤더, 뉴스레터, 소셜 카드를 위한, 강조 색 하나를 쓴 여백 많은 검정 잉크 일러스트.
판화 스타일 아티클 커버
+3에세이마다 초현실적인 검정 잉크 판화 하나. 교차 해칭으로 가장자리까지 채우고, 큰 아이디어를 장면 하나로 보여 줍니다.
EV 플랫폼 분해도
+3전기차를 층층이 분해한 그림. 배터리, 모터, 객실, 차체를 색으로 나누고 지시선을 달았습니다.
제품 분해도 포스터
+3제품의 깔끔한 분해도 히어로 이미지. 사양표에서 가져온 정확한 부품 라벨이 있습니다.
판타지 지도 생성기
+3내 세계의 양피지, 아틀라스, 검은 선 지도. 모든 지명은 바르게 적히고, 격자는 정확히 맞습니다.
지역별 음식 풍미 지도
+3지역마다 작은 맛 차트를 하나씩 공통 눈금에 맞춘, 차분하게 그린 지도와 정직한 범례.
일러스트 도시 지도 메이커
+3동네나 도시의 손그림 스타일 지도. 중요한 부분은 정확하고, 라벨은 정확하게 적습니다.
잉크 스케치 스토리보드
+3짧은 이야기에서 만든 거친 검정 잉크 스토리보드 페이지. 열린 선, 여백, 패널마다 비트 하나.
라인아트 OG 이미지 메이커
+3차분한 링크 미리보기 이미지: 오프화이트 카드, 짧은 검정 헤드라인, 손으로 그린 잉크 캐릭터.
해양 생물학 연구 포스터
+3그려진 서식지 단면을 중심으로 한 넓은 연구 포스터. 번호 달린 종과 발견 차트가 있습니다.
휴대폰 목업 생성기
+3부드러운 배경 위에서 3D 접이식 휴대폰이 열리는 내 앱. 선명한 PNG 정지 이미지 또는 접는 클립으로 내보냅니다.
사진 구도 연구
+3하나의 피사체를 서로 다른 구도 원리 세 가지로 찍은 사진풍 작업. 각각 다른 원리에 기대고 있습니다.
스케치노트 이미지 생성기
+3글이나 메모를 정확하고 검증된 라벨이 있는 손그림 4:3 스케치노트 한 장으로 바꿉니다.
소셜 커버와 썸네일 생성기
+3메시지 하나를 넣으면, OG 이미지, 게시물 커버, 영상 썸네일이 정확한 크기로 검증된 세트로 나옵니다.
자주 묻는 질문
DESIGN.md는 무엇이고 누가 읽나요?
평범한 텍스트로 쓴 디자인 시스템입니다. 위에는 YAML 토큰, 아래에는 작성된 지침이 있습니다. 코딩 에이전트와 디자인 에이전트가 읽고 색, 글꼴, 간격을 일관되게 유지합니다. 이 스킬은 다른 도구가 검사하고 내보낼 수 있는 공개 형식으로 쓰고, 로고 파일, 글꼴 라이선스, 대비 쌍, 목소리 예시를 추가 키 하나 아래에 정리합니다.
색이 정말 접근 가능한가요?
사용할 모든 텍스트와 배경 쌍을 선언하고, 다크 모드까지 포함해 스크립트가 WCAG 2.2에 맞춰 검사합니다. 기준에 못 미치는 쌍은 같은 색조에서 가장 가까운 통과 색으로 바꾸고, 비율은 내림해서 계산하므로 통과는 진짜 통과입니다.
로고가 AI 이미지인가요?
아닙니다. 워드마크는 공개 라이선스 글꼴을 윤곽선으로 바꾼 것이고, 심볼은 깔끔한 SVG 도형 몇 개로 그립니다. PopNow 스케치가 심볼에 영감을 줄 수는 있지만, 래스터 이미지를 로고로 내보내지 않으며 린터도 그런 파일은 거부합니다.
경쟁사처럼 보이지 않게 어떻게 하나요?
피할 브랜드를 색과 로고 설명과 함께 적습니다. 점검 단계가 그들의 색 조합을 반복하는 팔레트를 표시하고, 프롬프트에는 이름을 쓰지 않으며, 심볼을 그리기 전에 그들의 마크와 비교합니다. 법적 상표 검색은 아닙니다.