좋아하는 사이트를 재서 시작한다

「linear.app 같은 느낌으로」라고 하면 AI 는 그 사이트를 기억으로 흉내 낸다. design-brief 는 브라우저로 화면을 띄워 실제로 잰다. 그려진 색 · 글꼴 · 글자 크기 · 둥글기 · 간격 · 그림자를 세고, 바탕 · 면 · 글자 · 흐린 글자 · 강조 · 선 역할을 붙여 DESIGN.md 초안을 낸다.

node scripts/site_tokens.mjs https://example.com --out DESIGN.md

• 베끼지 않는다. 로고 · 이름 · 이미지는 담지 않는다. 방향 · 컴포넌트 · 말투는 사람이 채울 칸으로 남긴다.
• 못 잰 것은 「못 잼」이라고 쓴다. 강조색이 로고나 사진에만 있는 사이트가 있다. 그때는 화면 캡처를 색 추출기에 넣는다.

맞는지 대 봤다

정답을 아는 giting.kr 과 aiplab.kr 을 다시 재서(2026-10-16) 실제 디자인 변수와 한 칸씩 맞춰 봤다. 바탕 · 글자 · 흐린 글자 · 강조 · 선 · 글꼴은 두 사이트 모두 같았다. 다른 칸은 하나, aiplab.kr 의 「면」이다. 변수에 없는 옅은 파랑(#EDEFFC)을 면으로 골랐는데, 실제 카드는 흰색이다.

토스 · 당근 · 무신사 · Stripe · Linear 에서도 돌아갔다. 토스와 당근은 강조색이 그림에만 있어 「못 잼」으로 비워 뒀다. 다섯 사이트의 결과는 위 실물에 있다.

재미있는 건 에이전트였다. 도구를 붙여 줬는데도 처음엔 재지 않고 기억으로 골랐다. 스킬 설명에 「사이트를 말하면 먼저 잰다」를 넣고서야 재고 나서 값을 썼다.

DESIGN.md 에 담는 것

• 방향: 스타일 이름 하나와 느낌. 그리고 이 제품이 아닌 것.
• 팔레트: 역할이 붙은 색 4~6개. 색마다 왜 그 색인지 한 줄.
• 글자: 제목 · 본문 · 숫자용 서체와 크기 단계.
• 간격 · 모양: 기준 단위, 둥글기, 선 굵기.
• 하지 않을 것: 위 실물의 안티-슬롭 목록에서 이 프로젝트가 거부할 것.

색마다 「왜」를 적어 두면, 나중에 에이전트가 색을 슬쩍 바꾸는 일이 줄어든다.

그림에서 색만 뽑을 때

사이트가 아니라 시안 그림이 있으면 색만 뽑는다.

python3 scripts/extract_palette.py reference.png --n 6

쓰는 법

• Claude Code: 「이 프로젝트 디자인 시스템 잡아줘」 · 「linear.app 느낌으로」 · 「AI 가 만든 UI 가 밋밋해」
• 다른 AI: npx skills add hanmariyang/giting-skills --skill design-brief