{"id":51475261,"url":"https://github.com/devswha/design-interview","last_synced_at":"2026-07-06T20:03:17.294Z","repository":{"id":365863931,"uuid":"1267920255","full_name":"devswha/design-interview","owner":"devswha","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-19T08:38:44.000Z","size":3459,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-19T09:22:00.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devswha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-13T01:20:30.000Z","updated_at":"2026-06-19T08:38:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/devswha/design-interview","commit_stats":null,"previous_names":["devswha/design-interview"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/devswha/design-interview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devswha%2Fdesign-interview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devswha%2Fdesign-interview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devswha%2Fdesign-interview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devswha%2Fdesign-interview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devswha","download_url":"https://codeload.github.com/devswha/design-interview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devswha%2Fdesign-interview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35204421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-06T20:03:16.105Z","updated_at":"2026-07-06T20:03:17.260Z","avatar_url":"https://github.com/devswha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/icons/design-interview-mark.svg\" alt=\"design-interview mark\" width=\"148\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003edesign-interview\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eInterview-driven page tailoring. No AI slop.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"#install\"\u003e\u003cimg alt=\"Skill: Claude Code | Codex | Cursor | OpenCode | gajae\" src=\"https://img.shields.io/badge/Skill-Claude%20Code%20%7C%20Codex%20%7C%20Cursor%20%7C%20OpenCode%20%7C%20gajae-blueviolet\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"runtime deps: 0\" src=\"https://img.shields.io/badge/runtime%20deps-0-brightgreen\"\u003e\n  \u003cimg alt=\"audit: deterministic\" src=\"https://img.shields.io/badge/audit-deterministic-blue\"\u003e\n  \u003cimg alt=\"node \u0026gt;= 22.12\" src=\"https://img.shields.io/badge/node-%3E%3D22.12-339933\"\u003e\n\u003c/p\u003e\n\nslop 소스를 받아 **디자인 인터뷰**로 컨셉·방향을 사용자에게 받아낸 뒤, AI 티 안 나는 랜딩/상세/제안서 페이지를 만드는 에이전트 스킬. 금지 목록(`design-tells`)과 시니어 원칙(`design-principles`)을 양면 규율로 쓰고, 납품 직전 **결정론적 감사**로 슬롭 지문을 코드로 차단한다.\n\nAI가 혼자 디자인하지 않는다 — 라운드마다 디자이너가 방향을 *추천*하되 결정은 사용자가 하고, 컨셉이 사용자 승인으로 잠기기 전에는 한 줄의 HTML도 생성하지 않는다.\n\n탐지 우회 도구가 아니다. 허용된 AI 보조 제작에서 사람 손맛을 입히고, 검수 화면은 스크립트가 돌지 않는 **inert HTML**(CSP 잠금, 원격 리소스 없음)로 남긴다.\n\n## Workflow\n\n```text\nslop 소스\n  → Phase 0  인테이크       소스 파싱, 클레임(숫자·사실) 동결\n  → Phase 1  디자인 인터뷰   6차원 게이팅, 한 번에 한 질문 + 라운드별 추천(쉬운 말)\n                            ↳ 선택지는 브라우저 옵션 보드(inert HTML)로 보여주고 사용자가 고른다\n  → Phase 2  컨셉 잠금       컨셉 시트 승인 — 승인 전 빌드 금지\n  → Phase 3  빌드           단일 HTML, design-tells 금지 목록 적용\n  → Phase 4  브라우저 프리뷰  built / original / both 토글 검수 루프\n  → Phase 5  슬롭 감사 + 납품  design-tell 체크리스트 + 클레임 대조\n```\n\n## Install\n\n**Claude Code — 플러그인 마켓플레이스 (클론 없이, 권장):**\n\n```text\n/plugin marketplace add devswha/design-interview\n/plugin install design-interview@design-interview\n```\n\n**Claude Code · Codex CLI · Cursor · OpenCode — 설치 스크립트:**\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/devswha/design-interview/main/install.sh | bash\n```\n\n설치 후 스킬을 호출한다:\n\n```text\n/design-interview --standard ./slop-draft.md\n/design-interview --quick   https://example.com/landing\n```\n\n비시각 레인(`intake`/`audit`/`preview`/`assets`/`crawl`)은 **런타임 의존성 0**이라 클론만으로 동작한다. 시각 레인(`shot`, `audit --visual` — 풀페이지 스크린샷 + 렌더 기하 텔)은 puppeteer가 필요하다:\n\n```bash\ncd ~/.claude/skills/design-interview \u0026\u0026 npm install   # 없으면 정적 레인으로 자동 폴백\n```\n\n설치 제어 환경변수: `DI_REF=\u003ctag-or-sha\u003e` (체크아웃 핀), `DI_REPO_URL=\u003curl-or-path\u003e` (소스 repo), `INSTALL_{CLAUDE,CODEX,CURSOR,OPCODE}=true|false`.\n\n**Gajae Code (`gjc`) — 네이티브 스킬:**\n\ngjc는 `native` 스킬만 인식한다(`~/.gjc/agent/skills/\u003cname\u003e/SKILL.md` 또는 `\u003cproject\u003e/.gjc/skills/\u003cname\u003e/SKILL.md`). 위 스크립트로 엔진을 깐 뒤 심볼릭 링크로 노출한다:\n\n```bash\nmkdir -p ~/.gjc/agent/skills\nln -sfn ~/.claude/skills/design-interview ~/.gjc/agent/skills/design-interview\n```\n\n`~/.gjc/agent/config.yml`에서 네이티브 스킬 탐색을 켜고(`skills.enabled: true`, 유저 레벨이면 `enablePiUser: true`) `/skill:design-interview`로 호출한다. 엔진(`src/cli.js`)은 SKILL.md의 `$DI` 리졸버가 경로를 풀어 cwd와 무관하게 동작한다. gjc의 \"묻지 말고 바로 실행\" 기본값은 이 스킬의 **인터뷰-우선 실행 계약**이 덮어쓴다 — 인터뷰 없이 마무리하지 않는다.\n\n\u003e gjc 주의: 빌드 단계에서 쓰기 도구가 막히면 'interview' 키워드로 시드된 번들 `deep-interview` 가드일 수 있다 — `gjc state clear --mode deep-interview`로 해제한다(우리 인터뷰와 무관한 cwd 가드).\n\n## Commands\n\nCLI 진입점은 `node src/cli.js \u003ccommand\u003e`. 모든 서브커맨드는 미지 플래그·잉여 인자에 즉시 exit 2(usage)로 실패한다.\n\n| Command | Phase | Purpose |\n|---|---|---|\n| `intake \u003csrc\u003e [--json]` | 0 | 클레임(가격·수량·기간·기능) 구조화 추출·동결. URL은 SSRF 가드 통과 필수 |\n| `board \u003copts.json\u003e --out \u003cf\u003e [--serve --port \u003cn\u003e]` | 1 | 검증된 옵션 모델 → inert 옵션 보드 HTML (시각 인터뷰) |\n| `assets \u003cdir\u003e [--concept-sheet \u003cf\u003e] [--json]` | 1/2 | prebuild readiness — sidecar 있는 시각 앵커 존재 확인 |\n| `crawl \u003curl\u003e --out \u003cdir\u003e [--name \u003cf\u003e]` | 1/2 | consent-gated 외부 에셋 수집 + provenance sidecar |\n| `preview \u003cbuilt\u003e [--against \u003cslop\u003e]` | 4 | inert built/original/both 토글 프리뷰 HTML |\n| `shot \u003cbuilt\u003e` | 4 | desktop/mobile 풀페이지 캡처 (puppeteer 필요) |\n| `audit \u003cbuilt\u003e [--visual]` | 5 | 결정론적 design-tell 감사 — LLM 자기 채점 없이 코드로 판정 |\n\n핵심 흐름:\n\n```bash\n# Phase 1 — 시각 인터뷰: 옵션 카드를 브라우저로 비교, 추천 배지 표시\nnode src/cli.js board round2.options.json --out board.html\n#   → file:///…/board.html   (file:// 막는 호스트는 --serve로 localhost 폴백)\nnode src/cli.js board round2.options.json --out board.html --serve --port 8787\n# Codex Desktop처럼 file://가 막히는 호스트는 안전한 임의 포트를 써도 된다.\nnode src/cli.js board round2.options.json --out board.html --serve --port 0\n\n# Phase 4 — 검수: built ⇄ original 토글, 풀페이지 스크린샷 자기검수\nnode src/cli.js preview built.html --against slop-source.html   # → built.preview.html\nnode src/cli.js shot built.html\n\n# Phase 5 — 결정론적 슬롭 감사 (FAIL이면 exit 1, 납품 불가)\nnode src/cli.js audit built.html --visual\n#   FAIL  C1 purple-gradient    ← linear-gradient(135deg,#667eea,#764ba2)\n#   FAIL  S3 perfect-symmetry   ← 8/8 text blocks render center-aligned\n#   slop score: 71% (5/7 tells)\n```\n\n옵션 보드와 프리뷰 출력은 inert 보안 모델을 공유한다: 무스크립트, 원격 리소스 없음, 모든 사용자 텍스트 escape, `--against` 토글은 스크립트 없는 radio-hack. `imageFile` 카드는 pre-sized 실제 파일(+sidecar)만 magic-byte 검증 후 임베드한다(생성·리사이즈 금지).\n\n## Layout\n\n| 경로 | 역할 |\n|---|---|\n| `SKILL.md` | 스킬 본문 — Phase 0–5 오케스트레이션 |\n| `core/interview.md` | 6차원 인터뷰 프레임워크 + 명료도 점수 모델 (+ 제안서 장르 보정) |\n| `core/reference-sources.md` | URL·DESIGN.md·갤러리 레퍼런스 사용 정책 — 구조만 빌리고 복제 금지 |\n| `core/design-tells.md` | AI 디자인 텔 금지 목록 (빌드 규율 + 납품 감사 체크리스트) |\n| `core/design-principles.md` | 시니어 디자인 원칙 24종 — 텔의 양성 대응물 (토큰 규율 + 기계 검사 레인) |\n| `core/asset-library.md` | 에셋 인벤토리·라이선스 sidecar 규칙 |\n| `templates/concept-sheet.md` | Phase 2 컨셉 시트 양식 |\n| `assets/` | 자가호스팅 폰트·이미지·텍스처·아이콘 + `.license.txt` sidecar (브랜드 마크 포함) |\n| `src/intake.js` | 클레임 추출기 + SSRF 가드 URL fetch |\n| `src/board.js` | Phase 1 옵션 보드 직렬화 — 검증 옵션 모델 → inert 단일 HTML |\n| `src/preview.js` | inert 프리뷰 빌더 — CSP + 무스크립트 토글, 패널별 CSS 스코프 |\n| `src/inert-html.js` | 액티브 콘텐츠 스트립 + 원격 URL 무력화 + INERT_CSP (preview·board 공유) |\n| `src/audit.js` | 정적 design-tell 감사기 — 코드로 판정 |\n| `src/geometry.js` | 시각 텔(L1/S3) — 렌더된 박스 기하 판정 |\n| `src/screenshot.js` | desktop/mobile 풀페이지 캡처 (puppeteer 선택 의존) |\n| `src/cli.js` | `intake`/`board`/`preview`/`audit`/`shot`/`assets`/`crawl` 진입점 |\n\n## Principles\n\n- **클레임 보존** — 디자인이 바뀌어도 소스의 숫자·기능·가격·인과는 불변 ([patina](https://github.com/devswha/patina)의 MPS 원칙).\n- **Inert preview** — 검수 화면은 스크립트 실행 불가이며 원격 stylesheet 링크를 보존하지 않는다. patina browser preview의 보안 모델을 따른다.\n- **Visual interview** — 인터뷰 선택지는 텍스트가 아니라 브라우저 옵션 보드로 보여준다. 보드는 판단하지 않고 검증된 옵션 모델을 inert HTML로 직렬화만 한다(추천·점수·열기는 호스트 레이어).\n- **Asset-first** — font-only·0-asset 상태에서는 컨셉을 잠그지 않는다. 최소 1개 이상의 sidecar 있는 logo/image/texture가 필요하다.\n- **Reference-safe** — `DESIGN.md`와 레퍼런스 갤러리는 시각 언어 *구조*를 빌리는 입력이다. 브랜드별 토큰·원문·이미지·pixel layout은 복제하지 않는다.\n- **결정론적 게이트** — 하드 텔은 blocking, 표현 항목은 advisory. advisory는 납품을 막지 않고, blocking은 항상 막는다. 회귀는 baseline 벤치마크가 union으로 잡는다.\n\n## Test\n\n```bash\nnpm test            # unit + e2e (e2e는 intake→audit→preview→shot 실CLI 파이프라인)\nnpm run benchmark   # baseline 회귀 게이트 — miss(탐지 후퇴)/fp(오탐 후퇴) 시 exit 1\n```\n\n## License\n\nMIT. See [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevswha%2Fdesign-interview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevswha%2Fdesign-interview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevswha%2Fdesign-interview/lists"}