View all files | ||||
Interview-driven page tailoring. No AI slop.
slop 소스를 받아 디자인 인터뷰로 컨셉·방향을 사용자에게 받아낸 뒤, AI 티 안 나는 랜딩/상세/제안서 페이지를 만드는 에이전트 스킬. 금지 목록(design-tells)과 시니어 원칙(design-principles)을 양면 규율로 쓰고, 납품 직전 결정론적 감사로 슬롭 지문을 코드로 차단한다.
AI가 혼자 디자인하지 않는다 — 라운드마다 디자이너가 방향을 추천하되 결정은 사용자가 하고, 컨셉이 사용자 승인으로 잠기기 전에는 한 줄의 HTML도 생성하지 않는다.
탐지 우회 도구가 아니다. 허용된 AI 보조 제작에서 사람 손맛을 입히고, 검수 화면은 스크립트가 돌지 않는 inert HTML(CSP 잠금, 원격 리소스 없음)로 남긴다.
Claude Code — 플러그인 마켓플레이스 (클론 없이, 권장):
Claude Code · Codex CLI · Cursor · OpenCode — 설치 스크립트:
설치 후 스킬을 호출한다:
비시각 레인(intake/audit/preview/assets/crawl)은 런타임 의존성 0이라 클론만으로 동작한다. 시각 레인(shot, audit --visual — 풀페이지 스크린샷 + 렌더 기하 텔)은 puppeteer가 필요하다:
설치 제어 환경변수: DI_REF=<tag-or-sha> (체크아웃 핀), DI_REPO_URL=<url-or-path> (소스 repo), INSTALL_{CLAUDE,CODEX,CURSOR,OPCODE}=true|false.
Gajae Code (gjc) — 네이티브 스킬:
gjc는 native 스킬만 인식한다(~/.gjc/agent/skills/<name>/SKILL.md 또는 <project>/.gjc/skills/<name>/SKILL.md). 위 스크립트로 엔진을 깐 뒤 심볼릭 링크로 노출한다:
~/.gjc/agent/config.yml에서 네이티브 스킬 탐색을 켜고(skills.enabled: true, 유저 레벨이면 enablePiUser: true) /skill:design-interview로 호출한다. 엔진(src/cli.js)은 SKILL.md의 $DI 리졸버가 경로를 풀어 cwd와 무관하게 동작한다. gjc의 "묻지 말고 바로 실행" 기본값은 이 스킬의 인터뷰-우선 실행 계약이 덮어쓴다 — 인터뷰 없이 마무리하지 않는다.
gjc 주의: 빌드 단계에서 쓰기 도구가 막히면 'interview' 키워드로 시드된 번들 deep-interview 가드일 수 있다 — gjc state clear --mode deep-interview로 해제한다(우리 인터뷰와 무관한 cwd 가드).
CLI 진입점은 node src/cli.js <command>. 모든 서브커맨드는 미지 플래그·잉여 인자에 즉시 exit 2(usage)로 실패한다.
| intake <src> [--json] | 0 | 클레임(가격·수량·기간·기능) 구조화 추출·동결. URL은 SSRF 가드 통과 필수 |
| board <opts.json> --out <f> [--serve --port <n>] | 1 | 검증된 옵션 모델 → inert 옵션 보드 HTML (시각 인터뷰) |
| assets <dir> [--concept-sheet <f>] [--json] | 1/2 | prebuild readiness — sidecar 있는 시각 앵커 존재 확인 |
| crawl <url> --out <dir> [--name <f>] | 1/2 | consent-gated 외부 에셋 수집 + provenance sidecar |
| preview <built> [--against <slop>] | 4 | inert built/original/both 토글 프리뷰 HTML |
| shot <built> | 4 | desktop/mobile 풀페이지 캡처 (puppeteer 필요) |
| audit <built> [--visual] | 5 | 결정론적 design-tell 감사 — LLM 자기 채점 없이 코드로 판정 |
핵심 흐름:
옵션 보드와 프리뷰 출력은 inert 보안 모델을 공유한다: 무스크립트, 원격 리소스 없음, 모든 사용자 텍스트 escape, --against 토글은 스크립트 없는 radio-hack. imageFile 카드는 pre-sized 실제 파일(+sidecar)만 magic-byte 검증 후 임베드한다(생성·리사이즈 금지).
| SKILL.md | 스킬 본문 — Phase 0–5 오케스트레이션 |
| core/interview.md | 6차원 인터뷰 프레임워크 + 명료도 점수 모델 (+ 제안서 장르 보정) |
| core/reference-sources.md | URL·DESIGN.md·갤러리 레퍼런스 사용 정책 — 구조만 빌리고 복제 금지 |
| core/design-tells.md | AI 디자인 텔 금지 목록 (빌드 규율 + 납품 감사 체크리스트) |
| core/design-principles.md | 시니어 디자인 원칙 24종 — 텔의 양성 대응물 (토큰 규율 + 기계 검사 레인) |
| core/asset-library.md | 에셋 인벤토리·라이선스 sidecar 규칙 |
| templates/concept-sheet.md | Phase 2 컨셉 시트 양식 |
| assets/ | 자가호스팅 폰트·이미지·텍스처·아이콘 + .license.txt sidecar (브랜드 마크 포함) |
| src/intake.js | 클레임 추출기 + SSRF 가드 URL fetch |
| src/board.js | Phase 1 옵션 보드 직렬화 — 검증 옵션 모델 → inert 단일 HTML |
| src/preview.js | inert 프리뷰 빌더 — CSP + 무스크립트 토글, 패널별 CSS 스코프 |
| src/inert-html.js | 액티브 콘텐츠 스트립 + 원격 URL 무력화 + INERT_CSP (preview·board 공유) |
| src/audit.js | 정적 design-tell 감사기 — 코드로 판정 |
| src/geometry.js | 시각 텔(L1/S3) — 렌더된 박스 기하 판정 |
| src/screenshot.js | desktop/mobile 풀페이지 캡처 (puppeteer 선택 의존) |
| src/cli.js | intake/board/preview/audit/shot/assets/crawl 진입점 |
MIT. See LICENSE.