도메인을 고르면 그 도메인에 맞는 화면(원형)을 잡고 30가지 디자인으로 펼치는 도구. 그리고 그걸 넘어, 생성 엔진을 Zen Garden 3층으로 재설계 → 세 원형 구축 → 사용자가 잡은 "다 비슷" 문제를 근본까지 진단·해결 → 시각 게이트로 품질 검증까지의 여정.
같은 도구로 서로 다른 원형을 뽑으면 게이트 판정이 뒤집힌다. 세 데모 모두 30 스타일 · 콘텐츠 한 글자도 동일 · 두 게이트 전수 통과.
도구는 사실 두 문제가 붙어 있었다 — ① 디자인 공간 샘플링(30개를 어떻게 잘 흩뿌리나) + ② 선택 UI(어떻게 훑고 고르나). 그리고 스타일마다 HTML을 통짜 생성하니 모델이 KPI를 끼워넣을 수 있었고(그래서 archetype-lint가 필요했다), "같은 콘텐츠"를 프롬프트로 부탁해야 했다(부탁은 샌다).
되돌리기 비싼 재설계라, 큰 공사 전에 스파이크로 각 리스크를 반나절씩 검증했다.
DOM은 고정, CSS를 세 층으로. tokens는 원형 무관이라 A·B·D가 같은 30개 토큰 파일을 공유한다. 원형별로 다른 건 스켈레톤·base 각 1개뿐.
archetype-lint(내가 상상한 실패만) → coverage-lint(가능한 실패 전 집합: 환각 셀렉터 + 누락 영역). 콘텐츠 동일성은 스켈레톤이 구조적 보장.신선한 에이전트가 파이프라인 문서만 보고 완전히 새로운 스타일 31 웜 레터프레스를 처음부터 만들었다. map이 비었다던 빈 코너(웜·각진·플랫)를 채우는 스타일로.
map.py)가 밝혀낸 것: 30개가 "다양"한 게 아니라 파랑·보라·둥근·소프트 코너에 절반이 뭉쳐있고(파랑계열 ~10개), 격자 72셀 중 53셀(웜·초록·각진)이 비었다. 낭비 슬롯을 빈 코너로 재샘플하면 30개 그대로 고르게 퍼진다 — 클린룸이 그 능력을 실증. 31 웜 레터프레스 열기 →"새 방식이 새 도메인에서 뭘 만드나"를 실제로 돌린 기록. 완전히 새 도메인(모아마켓)인데 새로 만든 건 스켈레톤 1개뿐 — 나머지는 재사용.
base-D가 중고거래 콘텐츠도 그대로 스타일 = base는 도메인 무관. 스켈레톤만 콘텐츠별.갤러리를 열어보니 많은 스타일이 그냥 흰 배경으로 뭉갰다. "기분 탓인가?" — 아니었다. 눈이 아니라 데이터로 원인을 파니 세 축이 동시에 붕괴하고 있었다.
구조 게이트(coverage)가 PASS여도 렌더가 못생기거나 글자가 안 읽힐 수 있다. LLM이 만든 CSS를 자동으로 검증하는 세 겹 — 앞 둘은 스크립트(결정적, 헤드리스 크로미움), 셋째는 비전 모델.
● 데모 ● 검증 ● 구축 ● 설계·정리