feat: 브리프 인터뷰 단계와 브라우저 도구를 넣고 온보딩 말투를 고친다

세 가지를 고친다. 전부 실제 사용에서 드러난 것이다.

1) 0단계에서 가정으로 채우던 것을 인터뷰로 바꾼다

   "꽃집 사이트 만들어보자"를 받고 업종 성격·목표 행동·톤·이름을 혼자 정했다.
   물어보니 넷 중 넷이 달랐다(일상 구독 → 하이엔드 스튜디오, 문의 하나 → 넷 다,
   톤 미정 → 에디토리얼, 이름 지어냄 → 목요일의 화원).
   그대로 갔으면 레퍼런스 세 개를 전부 틀린 방향에서 골랐다.

   SKILL.md 0단계에 질문 도구로 한 번에 묻는 절차를 넣었다. 무엇을 묻고
   무엇을 묻지 않는지, 답이 모순될 때 어떻게 정리하는지까지 적었다.

2) 레퍼런스가 막히면 브라우저를 띄운다

   Aesop(403) → Kinto(404) → Hasami(DNS) → MUJI(타임아웃)로 네 번 왕복하고
   톤 레퍼런스를 하나도 못 얻었다. 좋은 레퍼런스일수록 봇을 막는다.
   galleries.md 에 headed 브라우저로 직접 열어 스크린샷과 실측값을 받는
   방법을 넣고, 접근 실패 2회면 바로 전환하도록 규칙을 세웠다.

   Playwright 를 선택 의존성으로 잡았다(core/tools.ts).
   - 온보딩 마지막에 설치 여부를 묻는다. 건너뛰어도 스킬은 동작한다
   - `designpaca tools` 로 상태 확인, `--yes` 로 설치
   - 수백 MB 라 --yes 없이는 상태만 보여준다
   - MCP 서버는 설치만 하고 등록 명령은 안내만 한다(에이전트 설정을
     대신 건드리지 않는다)

3) 온보딩 말투

   "이제 브리프를 던져라", "설치해라", "건너뛴다" — 사용자를 향한 문구가
   명령조였다. 스킬 문서의 단정한 반말은 의도지만 CLI UI 는 다르다.
   전부 존댓말로 바꾸고, 각 단계가 왜 필요한지 설명을 붙였다.
   명령조가 다시 섞이지 않도록 검사하는 테스트를 넣었다(테스트 22 → 25개).

packages/skill/references/galleries.md

@@ -170,4 +170,51 @@ Awwwards는 **타이포 완성도와 야심의 상한선**으로만 쓰고, 섹
 | adfolio.design | 429 | Love The Work More |
 | **commercecream.com** | **HTTPS 연결 거부 (방치 상태)** | **ecomm.design로 대체. 쓰지 마라** |
 
+### 막히면 갤러리를 갈아타지 말고 **브라우저로 직접 들어가라**
+
+위 표는 "대체 소스"를 적어뒀지만, 그건 차선책이다. **보려던 그 사이트를 봐야 한다.**
+403·404·타임아웃을 만나면 대체 갤러리를 찾아 헤매지 말고 실제 브라우저를 띄워라.
+실측에서 Aesop(403) → Kinto(404) → Hasami(DNS 실패) → MUJI(타임아웃)로 네 번 왕복하고도
+**톤 레퍼런스를 하나도 못 얻었다.** 브라우저를 열었으면 첫 번째에 끝났다.
+
+```js
+// playwright 가 없으면: npm i -g playwright && npx playwright install chromium
+const path = require('path');
+const { chromium } = require(path.join(process.env.PW_ROOT, 'playwright'));
+const b = await chromium.launch({ headless: false });   // headed 여야 봇 차단을 덜 받는다
+const p = await b.newPage({ viewport: { width: 1440, height: 900 } });
+await p.goto(url, { waitUntil: 'networkidle', timeout: 45000 });
+await p.screenshot({ path: 'ref-1.png', fullPage: true });
+```
+
+**스크린샷은 텍스트 요약보다 낫다.** `WebFetch` 는 마크다운으로 바꾸면서
+여백·비율·크기 대비를 전부 버린다 — 6축 중 절반이 그 정보다.
+그림을 보고 나서 **재라**: 히어로가 첫 화면의 몇 %인지, 제목이 몇 px 인지, 칼럼이 몇 개인지.
+
+```js
+// 눈으로 보지 말고 숫자로 받아라
+await p.evaluate(() => {
+  const h1 = document.querySelector('h1');
+  return {
+    h1px: h1 && getComputedStyle(h1).fontSize,
+    h1가족: h1 && getComputedStyle(h1).fontFamily.split(',')[0],
+    본문px: getComputedStyle(document.body).fontSize,
+    배경: getComputedStyle(document.body).backgroundColor,
+    첫화면_이미지비율: (() => {
+      const im = [...document.querySelectorAll('img,video,canvas')]
+        .filter(e => e.getBoundingClientRect().top < innerHeight);
+      const a = im.reduce((s, e) => { const r = e.getBoundingClientRect(); return s + r.width * r.height; }, 0);
+      return (a / (innerWidth * innerHeight) * 100).toFixed(0) + '%';
+    })(),
+  };
+});
+```
+
+**headed 로 띄우는 이유**: 헤드리스는 Cloudflare·Akamai 봇 판정에 자주 걸린다.
+그래도 막히면 그때 대체 소스로 간다 — 순서가 반대다.
+
+> 규칙: **접근 실패 2회 → 브라우저를 띄운다.** 대체 갤러리 탐색은 브라우저도 막힌 뒤의 일이다.
+
+---
+
 > 근거: research/references/01-gallery-catalog.md, 03-trends-2026.md (조사일 2026-08-20)