slides-grab 1.2.6 → 1.3.1

package/README-ko.md

@@ -0,0 +1,258 @@
+# slides-grab 한국어 README
+
+<p align="center">AI가 만든 HTML 슬라이드에서 원하는 영역을 직접 선택하고, 그 영역을 다시 AI에게 편집시킬 수 있는 에이전트 우선 발표 자료 프레임워크입니다.</p>
+
+<p align="center">
+  <a href="README.md">English README</a> | <strong>한국어</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/vkehfdl1/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
+    <img src="docs/assets/demo.gif" alt="slides-grab 데모" width="720">
+  </a>
+</p>
+
+<p align="center">
+  <strong>👉 slides-grab으로 무엇을 만들 수 있는지 확인하세요:</strong>
+  <a href="https://vkehfdl1.github.io/slides-grab/"><strong>라이브 쇼케이스 갤러리</strong></a><br>
+  slides-grab으로 만든 실제 발표 자료를 열고 슬라이드를 넘겨볼 수 있습니다.
+</p>
+
+---
+
+## 빠른 시작
+
+slides-grab은 슬라이드를 HTML과 CSS로 작성하고, 브라우저 기반 편집기에서 영역을 드래그해 수정 요청을 보낸 뒤 PDF 또는 실험적/불안정한 PPTX·Figma용 PPTX로 내보내는 도구입니다.
+
+AI 코딩 에이전트에 아래 안내 중 하나를 붙여넣어 설치를 시작할 수 있습니다.
+
+**Claude Code:**
+
+```text
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.
+```
+
+**Codex:**
+
+```text
+Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.
+```
+
+저장소를 직접 개발하거나 수정하려면 다음을 실행합니다.
+
+```bash
+git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
+npm ci && npx playwright install chromium
+```
+
+> Node.js **20 이상**이 필요합니다.
+
+### 설치: 저장소를 클론하지 않는 방법
+
+CLI와 공유 에이전트 스킬만 사용하려면 npm 패키지를 설치하면 됩니다.
+
+```bash
+npm install slides-grab
+npx playwright install chromium
+npx slides-grab install-skills --target all --scope user
+```
+
+이 방법은 일반적인 사용에 충분합니다. slides-grab 자체를 수정하거나 기여하려는 경우에만 저장소를 클론하세요.
+
+이 명령은 같은 공유 Agent Skills와 얇은 런타임 adapter를 Codex 런타임과 Claude Code 런타임 위치에 모두 설치합니다. 패키지된 워크플로우는 번들된 `SKILL.md`, `references/`, `slides-grab` CLI만 사용합니다. `slides-grab pdf`, `slides-grab convert`, `slides-grab figma` export는 현재 슬라이드 파일에 대한 최신 `slides-grab design-gate` `proceed` 기록이 없으면 차단됩니다.
+
+## 왜 slides-grab인가요?
+
+많은 AI 도구가 슬라이드 HTML을 생성하지만, 사용자가 화면에서 **수정하고 싶은 부분을 직접 가리키고** 그 자리에서 반복 편집할 수 있게 해 주는 도구는 드뭅니다. slides-grab은 다음 흐름을 제공합니다.
+
+- **Plan** — 에이전트가 주제나 파일을 바탕으로 슬라이드 아웃라인을 만듭니다.
+- **Design** — 에이전트가 각 슬라이드를 독립적인 HTML 파일로 작성합니다.
+- **Edit** — 브라우저 편집기에서 bbox 영역 선택, 직접 텍스트 편집, 에이전트 기반 재작성을 수행합니다.
+- **Export** — 한 명령으로 PDF를 만들고, 실험적/불안정한 PPTX 또는 Figma 가져오기용 PPTX도 생성할 수 있습니다.
+
+## CLI 명령어
+
+워크플로 명령은 `--slides-dir <path>`를 지원하며 기본값은 `slides`입니다.
+
+새 클론에서는 `--help`, `list-templates`, `list-styles`, `preview-styles` 같은 탐색 명령은 덱 없이도 동작합니다. `edit`, `build-viewer`, `validate`, `png`, `design-gate`는 `slide-*.html` 파일이 들어 있는 슬라이드 작업공간이 필요하고, `convert`, `pdf`, `figma`는 추가로 최신 `Proceed` design gate가 필요합니다.
+
+```bash
+slides-grab edit              # 시각적 슬라이드 편집기 실행
+slides-grab build-viewer      # 단일 viewer.html 생성
+slides-grab validate          # Playwright 기반 슬라이드 HTML 검증
+slides-grab convert           # 실험적/불안정한 PPTX로 내보내기
+slides-grab convert --resolution 2160p  # 고해상도 래스터 PPTX 내보내기
+slides-grab figma             # Figma Slides 가져오기용 실험적/불안정한 PPTX 생성
+slides-grab pdf               # 캡처 모드 PDF 내보내기(기본값)
+slides-grab pdf --resolution 2160p  # 고해상도 이미지 기반 PDF 내보내기
+slides-grab pdf --mode print  # 검색/선택 가능한 텍스트 PDF 내보내기
+slides-grab png               # 슬라이드별 PNG 렌더링(기본 2160p)
+slides-grab png --slide-mode card-news  # 인스타그램용 정사각형 PNG 렌더링
+slides-grab image --prompt "..."    # 로컬 슬라이드 이미지 생성
+slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # yt-dlp로 동영상 에셋 다운로드
+slides-grab tldraw            # .tldr 다이어그램을 슬라이드 크기의 로컬 SVG로 렌더링
+slides-grab list-templates    # 사용 가능한 슬라이드 템플릿 표시
+slides-grab list-styles       # 번들된 95개 디자인 스타일 표시
+slides-grab preview-styles    # 95개 스타일 미리보기 갤러리를 브라우저에서 열기
+```
+
+## 디자인 스타일 모음
+
+slides-grab은 [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles)에서 파생된 30개 스타일, slides-grab 고유 스타일 5개, [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity)에서 파생된 PPT 팩 60개를 포함해 총 95개 디자인 스타일을 제공합니다. 에이전트에게 특정 스타일을 요청하거나 완전히 커스텀 디자인을 요청할 수 있습니다.
+
+```bash
+slides-grab list-styles
+slides-grab preview-styles
+```
+
+## 에셋 규칙
+
+슬라이드에서 사용하는 로컬 이미지와 동영상은 `<slides-dir>/assets/`에 저장하고 각 `slide-XX.html`에서는 `./assets/<file>` 형식으로 참조하세요.
+
+- 권장 이미지: `<img src="./assets/example.png" alt="...">`
+- 권장 동영상: `<video src="./assets/demo.mp4" poster="./assets/demo-poster.png"></video>`
+- 허용: 완전한 자체 포함 슬라이드를 위한 `data:` URL
+- 저장된 슬라이드에서 금지: 원격 `http(s)://` 이미지 URL
+- 지원하지 않음: `/Users/...` 또는 `C:\...` 같은 절대 파일 경로
+- 저장된 슬라이드에서 지원하지 않음: 원격 동영상 URL. 먼저 `<slides-dir>/assets/`로 다운로드하세요.
+
+내보내기 전에 다음 명령으로 누락된 로컬 에셋과 권장하지 않는 경로 형식을 확인하세요.
+
+```bash
+slides-grab validate --slides-dir <path>
+```
+
+## 이미지 생성
+
+`slides-grab image`는 프롬프트로 슬라이드용 이미지를 생성하고 결과를 `<slides-dir>/assets/`에 저장한 뒤 HTML에서 사용할 `./assets/<file>` 참조를 출력합니다.
+
+```bash
+codex login
+slides-grab image --slides-dir decks/my-deck --prompt "Editorial hero image of a robotics warehouse at dawn"
+```
+
+기본 이미지 생성 공급자는 로컬 Codex ChatGPT 로그인(`~/.codex/auth.json`)을 재사용할 수 있습니다. 선택적으로 `--provider codex`에는 `OPENAI_API_KEY`, `--provider nano-banana`에는 `GOOGLE_API_KEY` 또는 `GEMINI_API_KEY`가 필요할 수 있습니다.
+
+> 경고: 일부 이미지 생성 경로는 지원되지 않는 비공개 백엔드 또는 계정 권한에 의존할 수 있으므로, 실패하면 웹 검색과 로컬 다운로드 방식으로 대체하세요.
+
+내보내기 전에는 항상 `slides-grab validate --slides-dir <path>`를 실행해 누락된 로컬 에셋과 권장하지 않는 경로 형식을 먼저 확인하세요.
+
+`slides-grab pdf`는 이제 기본적으로 `--mode capture`를 사용합니다. 이 모드는 렌더링된 각 슬라이드를 PDF 안에 래스터 이미지로 캡처해 시각적 충실도를 높입니다. 브라우저 텍스트를 검색하거나 선택할 수 있는 PDF가 더 중요하다면 `--mode print`를 사용하세요.
+
+슬라이드에 `<video>`가 포함되어 있으면 PDF 내보내기는 라이브 자동 재생 프레임 대신 동영상의 poster/썸네일 정지 이미지를 사용합니다. 안정적인 출력이 필요하면 `poster="./assets/<file>"`를 지정하는 방식을 권장합니다.
+
+`slides-grab pdf`와 `slides-grab convert`는 더 선명한 결과물을 위해 기본적으로 `2160p` / `4k` 래스터 출력을 사용합니다. 더 작거나 빠른 산출물이 필요하면 `--resolution <preset>`으로 `720p`, `1080p`, `1440p`, `2160p`, `4k` 중 하나를 지정할 수 있습니다.
+
+### 웹 동영상을 덱 에셋으로 다운로드
+
+원본 동영상이 YouTube 또는 `yt-dlp`가 지원하는 다른 페이지에 있다면 먼저 덱의 assets 폴더로 다운로드하세요.
+
+```bash
+slides-grab fetch-video \
+  --url https://www.youtube.com/watch?v=EXAMPLE \
+  --slides-dir decks/my-deck \
+  --output-name hero-video
+```
+
+이 명령은 저장된 파일 경로와 슬라이드 HTML에 붙여 넣을 `./assets/<file>` 참조를 출력합니다. `PATH`에서 동작하는 `yt-dlp` 바이너리가 필요합니다.
+
+## 여러 덱 작업 흐름
+
+먼저 `decks/my-deck/`에 덱을 만들거나 생성한 뒤 다음처럼 작업할 수 있습니다.
+
+```bash
+slides-grab edit       --slides-dir decks/my-deck
+slides-grab validate   --slides-dir decks/my-deck
+slides-grab pdf        --slides-dir decks/my-deck --output decks/my-deck.pdf
+slides-grab pdf        --slides-dir decks/my-deck --mode print --output decks/my-deck-searchable.pdf
+slides-grab png        --slides-dir decks/my-deck --output-dir decks/my-deck/out-png
+slides-grab convert    --slides-dir decks/my-deck --output decks/my-deck.pptx
+slides-grab figma      --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
+```
+
+> **주의:** `slides-grab convert`와 `slides-grab figma`는 현재 **실험적/불안정한** 기능입니다. 출력은 최선의 결과이며 PowerPoint 또는 Figma에서 수동 정리가 필요할 수 있습니다.
+
+## 카드뉴스 작업 흐름
+
+인스타그램식 카드뉴스는 720pt × 720pt 정사각형 프레임을 사용합니다. 모든 단계에서 `--mode card-news` 또는 `--slide-mode card-news`를 맞춰 사용하고, 최종 배포물은 `slides-grab png`를 우선 권장합니다.
+
+```bash
+slides-grab edit     --slides-dir decks/my-cards --mode card-news
+slides-grab validate --slides-dir decks/my-cards --mode card-news
+slides-grab png      --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p
+slides-grab pdf      --slides-dir decks/my-cards --slide-mode card-news --output decks/my-cards.pdf
+slides-grab convert  --slides-dir decks/my-cards --mode card-news --output decks/my-cards.pptx
+```
+
+## Tldraw 다이어그램 에셋
+
+정확한 슬라이드 영역에 맞고 내보내기에 안전한 로컬 SVG 다이어그램을 새로 만들고 싶다면 `slides-grab tldraw`를 사용하세요. 이 명령은 현재 형식의 `.tldr` 파일과 store-snapshot JSON을 지원합니다. 오래된 pre-records `.tldr` 파일은 먼저 최신 `tldraw` 빌드에서 다시 열고 저장해야 합니다.
+
+```bash
+slides-grab tldraw \
+  --input decks/my-deck/assets/system.tldr \
+  --output decks/my-deck/assets/system.svg \
+  --width 640 \
+  --height 320 \
+  --padding 16
+```
+
+생성된 SVG는 일반 로컬 이미지처럼 슬라이드 HTML에서 참조하세요.
+
+```html
+<img src="./assets/system.svg" alt="System architecture diagram">
+```
+
+내장 `diagram-tldraw` 템플릿은 이 작업 흐름을 시작하기 위한 간단한 출발점입니다.
+
+## Figma 작업 흐름
+
+```bash
+slides-grab figma --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
+```
+
+이 명령은 HTML→PPTX 파이프라인을 재사용해 Figma Slides의 `Import`로 수동 가져오기 할 수 있는 `.pptx` 덱을 만듭니다. Figma에 직접 업로드하지 않습니다. Figma 내보내기 경로는 **실험적/불안정**하며 최선의 결과만 기대해야 합니다.
+
+## 설치 가이드
+
+자세한 에이전트별 설치 안내는 아래 문서를 참고하세요.
+
+- [Claude 상세 가이드](docs/installation/claude.md)
+- [Codex 상세 가이드](docs/installation/codex.md)
+
+## npm 패키지
+
+독립 실행형 CLI와 스킬 사용을 위해 npm 패키지로도 사용할 수 있습니다.
+
+```bash
+npm install slides-grab
+```
+
+Vercel Agent Skills로 공유 에이전트 스킬을 설치하려면 다음을 실행하세요.
+
+```bash
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy --full-depth
+```
+
+이 npm 설치 경로는 일반적인 사용에 충분합니다. slides-grab 자체를 수정하거나 기여하려는 경우에만 저장소를 클론하세요.
+
+## 프로젝트 구조
+
+```text
+bin/              CLI 진입점
+src/editor/       시각 편집기(HTML + JS 클라이언트 모듈)
+scripts/          빌드, 검증, 변환, 편집기 서버 스크립트
+templates/        슬라이드 HTML 템플릿(cover, content, chart 등)
+src/              디자인 스타일 데이터, 스타일 설정, 경로 해석
+skills/           공유 가능한 에이전트 스킬과 참고 문서
+docs/             설치 및 사용 가이드
+showcase/         GitHub Pages로 배포되는 정적 갤러리
+```
+
+## 라이선스
+
+[MIT](LICENSE)
+
+## 감사의 말
+
+이 프로젝트는 Builder Josh의 [ppt_team_agent](https://github.com/uxjoseph/ppt_team_agent)를 바탕으로 만들어졌습니다. 감사드립니다!

package/README.md

@@ -1,5 +1,7 @@
 <h1 align="center">slides-grab</h1>
 
+<p align="center"><a href="README-ko.md">한국어 README</a> | <a href="README.md">English</a></p>
+
 <p align="center">Select context for agents directly from AI-generated HTML slides</p>
 
 <p align="center">
@@ -17,14 +19,14 @@ The editor is pure javascript file. You can easily add up new features like addi
 </p>
 
 <p align="center">
-  <a href="https://github.com/vkehfdl1/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
+  <a href="https://github.com/NomaDamas/slides-grab/releases/download/v0.0.1-demo/demo.mp4">
     <img src="docs/assets/demo.gif" alt="slides-grab demo" width="720">
   </a>
 </p>
 
 <p align="center">
   <strong>👉 See what slides-grab can do:</strong>
-  <a href="https://vkehfdl1.github.io/slides-grab/"><strong>Live Showcase Gallery</strong></a><br>
+  <a href="https://nomadamas.github.io/slides-grab/"><strong>Live Showcase Gallery</strong></a><br>
   Real presentations built with slides-grab — open any deck and flip through the slides.
 </p>
 
@@ -39,19 +41,19 @@ Paste one of these into your coding agent:
 **Claude Code:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/claude.md and follow every step.
+Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md and follow every step.
 ```
 
 **Codex:**
 
 ```
-Read https://raw.githubusercontent.com/vkehfdl1/slides-grab/main/docs/installation/codex.md and follow every step.
+Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/codex.md and follow every step.
 ```
 
 Or use the repo directly if you want to develop on slides-grab itself:
 
 ```bash
-git clone https://github.com/vkehfdl1/slides-grab.git && cd slides-grab
+git clone https://github.com/NomaDamas/slides-grab.git && cd slides-grab
 npm ci && npx playwright install chromium
 ```
 
@@ -62,9 +64,11 @@ npm ci && npx playwright install chromium
 ```bash
 npm install slides-grab
 npx playwright install chromium
-npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+npx slides-grab install-skills --target all --scope user
 ```
 
+This installs the same shared Agent Skills plus lightweight runtime adapters into Codex and Claude Code locations. The packaged workflow relies on bundled `SKILL.md` files, bundled `references/`, and the `slides-grab` CLI. Exports through `slides-grab pdf`, `slides-grab convert`, and `slides-grab figma` are blocked until `slides-grab design-gate` records a fresh `proceed` receipt for the current slide files.
+
 ## Why This Project?
 
 There are many AI tools that generate slide HTML. Almost none let you **visually point at what you want changed** and iterate in-place. slides-grab fills that gap:
@@ -78,7 +82,7 @@ There are many AI tools that generate slide HTML. Almost none let you **visually
 
 Workflow commands support `--slides-dir <path>` (default: `slides`).
 
-On a fresh clone, the discovery commands (`--help`, `list-templates`, `list-styles`, and `preview-styles`) work without a deck. `edit`, `build-viewer`, `validate`, `convert`, and `pdf` require an existing slides workspace containing `slide-*.html`.
+On a fresh clone, the discovery commands (`--help`, `list-templates`, `list-styles`, and `preview-styles`) work without a deck. `edit`, `build-viewer`, `validate`, `png`, and `design-gate` require an existing slides workspace containing `slide-*.html`; `convert`, `pdf`, and `figma` additionally require a fresh `Proceed` design gate.
 
 ```bash
 slides-grab edit              # Launch visual slide editor
@@ -96,13 +100,13 @@ slides-grab image --prompt "..."    # Generate a local slide image with god-tibo
 slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck  # Download a local video asset with yt-dlp
 slides-grab tldraw           # Render a .tldr diagram into a slide-sized local SVG asset
 slides-grab list-templates    # Show available slide templates
-slides-grab list-styles       # Show 35 bundled design styles (browse, preview, select)
-slides-grab preview-styles                        # Open the 35-style visual gallery in browser
+slides-grab list-styles       # Show 95 bundled design styles (browse, preview, select)
+slides-grab preview-styles                        # Open the 95-style visual gallery in browser
 ```
 
 ## Design Style Collections
 
-slides-grab bundles 35 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles) plus 5 slides-grab originals. Agents can also create fully custom designs beyond the bundled collection.
+slides-grab bundles 95 design styles: 30 derived from [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles), 5 slides-grab originals, and 60 PPT packs derived from [epoko77-ai/design-diversity](https://github.com/epoko77-ai/design-diversity). Agents can also create fully custom designs beyond the bundled collection.
 
 ```bash
 slides-grab list-styles                           # Browse the catalog
@@ -235,7 +239,7 @@ npm install slides-grab
 Install shared agent skills with Vercel Agent Skills:
 
 ```bash
-npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy --full-depth
 ```
 
 This npm-install path is enough for normal usage. Clone the repo only when you want to modify or contribute to `slides-grab` itself.
@@ -250,7 +254,7 @@ templates/        Slide HTML templates (cover, content, chart, ...)
 src/              Design styles data, style config, path resolution
 skills/           Shared Vercel-installable agent skills + references
 docs/             Installation & usage guides
-showcase/         Static gallery deployed to GitHub Pages (https://vkehfdl1.github.io/slides-grab/)
+showcase/         Static gallery deployed to GitHub Pages (https://nomadamas.github.io/slides-grab/)
 ```
 
 ## License

package/bin/ppt-agent.js

@@ -9,6 +9,7 @@ import {
   getFigmaImportCaveats,
   getFigmaManualImportInstructions,
 } from '../src/figma.js';
+import { assertDesignGateReady } from '../src/design-gate-state.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(__dirname, '..');
@@ -64,6 +65,17 @@ async function runCommand(relativePath, args = []) {
   }
 }
 
+async function ensureDesignGateForExport(slidesDir, label) {
+  try {
+    await assertDesignGateReady(resolve(process.cwd(), slidesDir), { label });
+  } catch (error) {
+    console.error(`[slides-grab] ${error.message}`);
+    process.exitCode = 1;
+    return false;
+  }
+  return true;
+}
+
 function collectRepeatedOption(value, previous = []) {
   return [...previous, value];
 }
@@ -109,6 +121,66 @@ program
     await runCommand('scripts/validate-slides.js', args);
   });
 
+program
+  .command('design-gate')
+  .description('Record the required visual QA gate evidence before export')
+  .option('--slides-dir <path>', 'Slide directory', 'slides')
+  .option('--slide-mode <mode>', 'Slide mode: presentation or card-news', 'presentation')
+  .option('--resolution <preset>', 'PNG evidence resolution preset: 720p, 1080p, 1440p, 2160p, or 4k', '2160p')
+  .requiredOption('--verdict <verdict>', 'Gate verdict: proceed, revise, or rethink')
+  .requiredOption('--pass-a-report <path>', 'Pass A review report file')
+  .requiredOption('--pass-b-report <path>', 'Pass B review report file')
+  .option('--output-dir <path>', 'PNG evidence directory (default: <slides-dir>/.slides-grab/gate-preview)')
+  .action(async (options = {}) => {
+    const args = [
+      '--slides-dir',
+      options.slidesDir,
+      '--slide-mode',
+      options.slideMode,
+      '--resolution',
+      options.resolution,
+      '--verdict',
+      options.verdict,
+      '--pass-a-report',
+      options.passAReport,
+      '--pass-b-report',
+      options.passBReport,
+    ];
+    if (options.outputDir) {
+      args.push('--output-dir', String(options.outputDir));
+    }
+    await runCommand('scripts/design-gate.js', args);
+  });
+
+function registerInstallSkillsCommand(commandName) {
+  program
+    .command(commandName)
+    .description('Install slides-grab skills and lightweight runtime adapters for Codex and Claude Code')
+    .option('--target <target>', 'Runtime target: all, codex, or claude-code', 'all')
+    .option('--runtime <target>', 'Alias for --target')
+    .option('--scope <scope>', 'Install scope: project or user', 'project')
+    .option('--project-dir <path>', 'Project directory for project scope')
+    .option('--target-root <path>', 'Root directory for user-style installs')
+    .option('--dry-run', 'Print planned writes without copying')
+    .option('--json', 'Print JSON result')
+    .action(async (options = {}) => {
+      const args = [
+        '--target',
+        String(options.runtime || options.target),
+        '--scope',
+        String(options.scope),
+      ];
+      if (options.projectDir) args.push('--project-dir', String(options.projectDir));
+      if (options.targetRoot) args.push('--target-root', String(options.targetRoot));
+      if (options.dryRun) args.push('--dry-run');
+      if (options.json) args.push('--json');
+      await runCommand('scripts/install-runtime.js', args);
+    });
+}
+
+registerInstallSkillsCommand('install-skills');
+registerInstallSkillsCommand('install-runtime');
+
 program
   .command('convert')
   .description('Convert slide HTML files to experimental / unstable PPTX')
@@ -117,6 +189,7 @@ program
   .option('--mode <mode>', 'Slide mode: presentation or card-news', 'presentation')
   .option('--resolution <preset>', 'Raster size preset: 720p, 1080p, 1440p, 2160p, or 4k (default: 2160p)')
   .action(async (options = {}) => {
+    if (!(await ensureDesignGateForExport(options.slidesDir, 'PPTX export'))) return;
     const args = ['--slides-dir', options.slidesDir, '--mode', options.mode];
     if (options.output) {
       args.push('--output', String(options.output));
@@ -136,6 +209,7 @@ program
   .option('--slide-mode <mode>', 'Slide mode: presentation or card-news', 'presentation')
   .option('--resolution <preset>', 'Capture raster size preset: 720p, 1080p, 1440p, 2160p, or 4k (default: 2160p in capture mode)')
   .action(async (options = {}) => {
+    if (!(await ensureDesignGateForExport(options.slidesDir, 'PDF export'))) return;
     const args = ['--slides-dir', options.slidesDir];
     if (options.output) {
       args.push('--output', String(options.output));
@@ -196,6 +270,7 @@ program
   .option('--mode <mode>', 'Slide mode: presentation or card-news', 'presentation')
   .addHelpText('after', figmaHelpText)
   .action(async (options = {}) => {
+    if (!(await ensureDesignGateForExport(options.slidesDir, 'Figma export'))) return;
     const args = ['--slides-dir', options.slidesDir, '--mode', options.mode];
     if (options.output) {
       args.push('--output', String(options.output));
@@ -320,7 +395,7 @@ program
 
 program
   .command('preview-styles')
-  .description('Print the path to the bundled 35-style visual preview gallery')
+  .description('Print the path to the bundled 95-style visual preview gallery')
   .action(async () => {
     try {
       const { getPreviewHtmlPath } = await import('../src/design-styles.js');
@@ -331,6 +406,125 @@ program
     }
   });
 
+program
+  .command('import-design')
+  .description('Fetch a remote DESIGN.md (https only) and save it locally as a custom slide design source')
+  .argument('<url>', 'HTTPS URL to a DESIGN.md / markdown design system file')
+  .option('--output <path>', 'Output path for the saved file', 'DESIGN.md')
+  .option('--max-bytes <number>', 'Maximum allowed response size in bytes', '262144')
+  .option('--timeout-ms <number>', 'Fetch timeout in milliseconds', '15000')
+  .action(async (url, options = {}) => {
+    try {
+      const { fetchDesignMarkdown, formatImportedDesignMarkdown, saveImportedDesign } =
+        await import('../src/design-import.js');
+      const maxBytes = Number(options.maxBytes) || 262144;
+      const timeoutMs = Number(options.timeoutMs) || 15000;
+      const result = await fetchDesignMarkdown(url, { maxBytes, timeoutMs });
+      const markdown = formatImportedDesignMarkdown({
+        url: result.url,
+        content: result.text,
+        fetchedAt: result.fetchedAt,
+      });
+      const savedPath = saveImportedDesign({ outputPath: options.output, markdown });
+      console.log(`Saved ${result.bytes} bytes to ${savedPath}`);
+      console.log(
+        'Saved web-flavored design source. Next convert it to DESIGN.slides.md, then set ' +
+        '"style: ./DESIGN.slides.md" in your slide-outline.md.',
+      );
+    } catch (error) {
+      reportCliError(error);
+    }
+  });
+
+program
+  .command('show-design')
+  .description('Parse a local design markdown file (DESIGN.slides.md preferred, falls back to DESIGN.md) or a bundled style id and print the slides-grab design summary the agent will use')
+  .argument('<ref>', 'Path to DESIGN.slides.md / DESIGN.md / a directory containing one, or a bundled style id (e.g. glassmorphism)')
+  .action(async (ref) => {
+    try {
+      const { loadDesignStyleRef, detectLocalDesignMarkdown } = await import('../src/design-styles.js');
+      const { renderDesignStyleForPrompt } = await import('../src/design-md-parser.js');
+      const { existsSync, statSync } = await import('node:fs');
+      const { dirname, resolve } = await import('node:path');
+
+      let effectiveRef = ref;
+      let detection = null;
+      let explicitWebShadowed = false;
+      const absoluteRef = resolve(ref);
+      if (existsSync(absoluteRef) && statSync(absoluteRef).isDirectory()) {
+        detection = detectLocalDesignMarkdown({ baseDir: absoluteRef });
+        if (!detection.path) {
+          console.error(`No DESIGN.slides.md or DESIGN.md found in directory "${ref}".`);
+          process.exitCode = 1;
+          return;
+        }
+        effectiveRef = detection.path;
+      } else if (existsSync(absoluteRef) && statSync(absoluteRef).isFile() && absoluteRef.endsWith('/DESIGN.md')) {
+        const siblingDetection = detectLocalDesignMarkdown({ baseDir: dirname(absoluteRef) });
+        if (siblingDetection.kind === 'slides') {
+          detection = siblingDetection;
+          explicitWebShadowed = true;
+          effectiveRef = siblingDetection.path;
+        }
+      }
+
+      const style = loadDesignStyleRef(effectiveRef);
+      if (!style) {
+        console.error(`No design style or design markdown file found at "${ref}".`);
+        process.exitCode = 1;
+        return;
+      }
+      const isCustom = style?.source?.type === 'design-md';
+      if (isCustom) {
+        if (detection) {
+          const activeName = detection.kind === 'slides' ? 'DESIGN.slides.md' : 'DESIGN.md';
+          const otherPresent = detection.kind === 'slides' && detection.webPath;
+          console.log(`# Active file: ${activeName} (${detection.path})`);
+          if (otherPresent) {
+            const explicitPrefix = explicitWebShadowed ? ' explicit DESIGN.md reference was redirected;' : '';
+            console.log(`# Note:${explicitPrefix} DESIGN.md is also present at ${detection.webPath} but is shadowed by DESIGN.slides.md.`);
+          } else if (detection.kind === 'web') {
+            console.log('# Note: only the web-flavored DESIGN.md was found. Consider converting it to DESIGN.slides.md before generating slides (see skills/slides-grab-plan/references/design-md-to-slides-conversion.md).');
+          }
+          console.log('');
+        }
+        console.log(renderDesignStyleForPrompt(style));
+      } else {
+        console.log(`# Bundled style: ${style.title} (${style.id})`);
+        console.log(`Mood: ${style.mood}`);
+        console.log(`Best for: ${style.bestFor}`);
+        if (style.source?.repo) console.log(`Source: ${style.source.repo}`);
+        if (style.source?.url) console.log(`Source URL: ${style.source.url}`);
+        if (Array.isArray(style.background)) {
+          console.log('\n## Background');
+          for (const b of style.background) console.log(`- ${b}`);
+        }
+        if (Array.isArray(style.colors)) {
+          console.log('\n## Colors');
+          for (const c of style.colors) console.log(`- ${c.role}: ${c.label} (${c.hex})`);
+        }
+        if (Array.isArray(style.fonts)) {
+          console.log('\n## Typography');
+          for (const f of style.fonts) console.log(`- ${f}`);
+        }
+        if (Array.isArray(style.layout)) {
+          console.log('\n## Layout');
+          for (const l of style.layout) console.log(`- ${l}`);
+        }
+        if (Array.isArray(style.signature)) {
+          console.log('\n## Signature');
+          for (const s of style.signature) console.log(`- ${s}`);
+        }
+        if (Array.isArray(style.avoid)) {
+          console.log('\n## Avoid');
+          for (const a of style.avoid) console.log(`- ${a}`);
+        }
+      }
+    } catch (error) {
+      reportCliError(error);
+    }
+  });
+
 program
   .command('show-template')
   .description('Print the contents of a template file')

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "slides-grab",
-  "version": "1.2.6",
+  "version": "1.3.1",
   "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vkehfdl1/slides-grab.git"
+    "url": "git+https://github.com/NomaDamas/slides-grab.git"
   },
-  "homepage": "https://github.com/vkehfdl1/slides-grab#readme",
+  "homepage": "https://github.com/NomaDamas/slides-grab#readme",
   "bugs": {
-    "url": "https://github.com/vkehfdl1/slides-grab/issues"
+    "url": "https://github.com/NomaDamas/slides-grab/issues"
   },
   "keywords": [
     "presentation",
@@ -39,15 +39,20 @@
     "scripts/generate-image.js",
     "src/god-tibo-imagen.js",
     "scripts/figma-export.js",
+    "scripts/design-gate.js",
     "scripts/html2pdf.js",
+    "scripts/html2png.js",
     "scripts/html2pptx.js",
+    "scripts/install-runtime.js",
     "scripts/render-tldraw.js",
     "scripts/validate-slides.js",
+    "runtimes/",
     "skills/",
     "src/",
     "templates/",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "README-ko.md"
   ],
   "scripts": {
     "html2pptx": "node scripts/html2pptx.js",
@@ -55,7 +60,7 @@
     "build:showcase": "node showcase/scripts/build-manifest.js",
     "validate": "node scripts/validate-slides.js",
     "convert": "node convert.cjs",
-    "test": "node --test --test-concurrency=1 tests/design/design-styles.test.js tests/editor/editor-codex-edit.test.js tests/editor/edit-subprocess-abort.test.js tests/editor/editor-server.test.js tests/editor/editor-server-orphan-prevention.test.js tests/editor/editor-model-dispatch.test.js tests/god-tibo/god-tibo.test.js tests/nano-banana/nano-banana.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/viewer/build-viewer.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
+    "test": "node --test --test-concurrency=1 tests/docs/readme-ko.test.js tests/design/design-styles.test.js tests/design/design-md-parser.test.js tests/design-gate/design-gate.test.js tests/runtime/install-runtime.test.js tests/editor/editor-codex-edit.test.js tests/editor/edit-subprocess-abort.test.js tests/editor/editor-server.test.js tests/editor/editor-server-orphan-prevention.test.js tests/editor/editor-model-dispatch.test.js tests/god-tibo/god-tibo.test.js tests/nano-banana/nano-banana.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/tldraw/render-tldraw.test.js tests/validation/validate-slides.test.js tests/viewer/build-viewer.test.js tests/skills/installable-skills.test.js tests/video/download-video.test.js",
     "test:e2e": "node --test tests/editor/editor-ui.e2e.test.js tests/editor/editor-concurrency.e2e.test.js"
   },
   "dependencies": {