slides-grab 1.2.6 → 1.3.0

package/README-ko.md

@@ -0,0 +1,256 @@
+# 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 skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
+```
+
+이 방법은 일반적인 사용에 충분합니다. slides-grab 자체를 수정하거나 기여하려는 경우에만 저장소를 클론하세요.
+
+## 왜 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`, `convert`, `pdf`는 `slide-*.html` 파일이 들어 있는 슬라이드 작업공간이 필요합니다.
+
+```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       # 번들된 35개 디자인 스타일 표시
+slides-grab preview-styles    # 35개 스타일 미리보기 갤러리를 브라우저에서 열기
+```
+
+## 디자인 스타일 모음
+
+slides-grab은 [corazzon/pptx-design-styles](https://github.com/corazzon/pptx-design-styles)에서 파생된 30개 스타일과 slides-grab 고유 스타일 5개, 총 35개 디자인 스타일을 제공합니다. 에이전트에게 특정 스타일을 요청하거나 완전히 커스텀 디자인을 요청할 수 있습니다.
+
+```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
+```
+
+이 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
 ```
 
@@ -250,7 +252,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

@@ -331,6 +331,115 @@ 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 (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}`);
+        }
+      }
+    } 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.0",
   "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",
@@ -47,7 +47,8 @@
     "src/",
     "templates/",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "README-ko.md"
   ],
   "scripts": {
     "html2pptx": "node scripts/html2pptx.js",
@@ -55,7 +56,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/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": {

package/scripts/editor-server.js

@@ -816,6 +816,7 @@ async function startServer(opts) {
         userPrompt: prompt,
         slideMode: opts.mode,
         selections: normalizedSelections,
+        designBaseDir: slidesDirectory,
       });
 
       const usesClaude = isClaudeModel(selectedModel);

package/skills/slides-grab-design/SKILL.md

@@ -22,7 +22,11 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 
 ## Workflow
 1. Read approved `slide-outline.md` and extract the `style` field from its meta section.
-2. Load the chosen style's full spec from `src/design-styles-data.js` — colors, fonts, layout, signature elements, and things to avoid. If the meta specifies a custom direction instead of a bundled ID, use that custom direction as the design basis.
+2. Load the chosen style's full spec:
+   - If `style` is a bundled id (e.g. `glassmorphism`), load from `src/design-styles-data.js` — colors, fonts, layout, signature elements, and things to avoid.
+   - If `style` ends in `.md` (e.g. `./DESIGN.slides.md` or `./DESIGN.md`), or if a design markdown file exists at the project root, parse it with `slides-grab show-design <path>` and treat the parsed output as the authoritative design system (colors, typography, layout, components, signature, avoid).
+   - **Precedence when both files exist:** `DESIGN.slides.md` takes priority over `DESIGN.md`. The `.slides.md` version is the slide-flavored conversion produced by the plan stage and is the only file safe to apply to slide HTML. If only `DESIGN.md` exists, treat it as web-flavored and follow the slide layout/avoid rules in `references/design-rules.md` strictly to avoid leaking web-only components (top-nav, CTA buttons, footer-band columns, pricing grids) into slides — or, preferably, switch back to the plan stage and produce a `DESIGN.slides.md` first.
+   - If the meta specifies a written custom direction, use that as the design basis.
 3. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), a **system declaration** (reused layout patterns, max two background colors, max two typefaces, image-led vs text-led slides, where section dividers reset tempo), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles). Ground these tokens in the chosen style's spec. Follow `references/beautiful-slide-defaults.md` for the full working model, content discipline, color discipline, and AI slop tropes to avoid.
 4. If you need to confirm or revisit the approved bundled style before designing, re-run `slides-grab list-styles` and open the gallery from `slides-grab preview-styles` so the Stage 2 deck stays aligned with the Stage 1 direction.
 5. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.

package/skills/slides-grab-plan/SKILL.md

@@ -23,10 +23,22 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 
 ## Workflow
 1. Analyze user goal and audience.
-2. **Style selection (mandatory, before outline):** Run `slides-grab list-styles`, shortlist 2–3 styles that match the topic/tone, present the shortlist with reasons, and get explicit user approval. Optionally offer `slides-grab preview-styles` for visual preview. If no bundled style fits, propose a custom direction and get approval.
-3. Create or revise `slide-outline.md` with ordered slides and key messages. Record the approved style ID in the meta section (`style: <id>`).
-4. Present a concise summary to user.
-5. Repeat revisions until explicit approval.
+2. **Style selection (mandatory, before outline):** Three paths are accepted, in priority order:
+   a. **Bundled style** — run `slides-grab list-styles`, shortlist 2–3 styles, and get explicit user approval. Optionally offer `slides-grab preview-styles` for visual preview. Record as `style: <id>`.
+   b. **Custom DESIGN.md path** — if a local `DESIGN.md` exists (e.g. provided directly or fetched via `slides-grab import-design <https-url>`), inspect it with `slides-grab show-design ./DESIGN.md` and confirm with the user.
+   c. **Free-form custom direction** — if neither bundled nor DESIGN.md fits, propose a written custom direction and get approval.
+3. **DESIGN.md → DESIGN.slides.md conversion (mandatory when path 2b was chosen):**
+   - A `DESIGN.md` imported from `voltagent/awesome-design-md` or similar sources describes a **marketing website** (top-nav, hero-band, CTA buttons, pricing cards, footer-band). Slides are **single 720pt × 405pt frames** with no scroll, no nav, no clicks — copying web components into slides produces deck pages that look like landing pages.
+   - Read `references/design-md-to-slides-conversion.md` for the canonical conversion guide.
+   - Translate the imported `./DESIGN.md` into a sibling `./DESIGN.slides.md` next to it. Leave the original `DESIGN.md` untouched. The `DESIGN.slides.md` MUST follow the Output Contract in the reference and apply every row of the web → slide mapping table (top-nav → eyebrow strip, hero-band → cover layout, CTA buttons → kicker text, footer-band → thin footer strip, pricing grids → dropped, etc.).
+   - Present a 5–10 line summary of the conversion to the user (kept tokens + dropped web sections + new slide layouts inferred) and wait for explicit approval before continuing.
+   - After approval, run `slides-grab show-design ./DESIGN.slides.md` to confirm the parser reads it cleanly.
+4. Create or revise `slide-outline.md` with ordered slides and key messages. Record the approved style reference in the meta section:
+   - bundled style → `style: <id>`
+   - converted DESIGN.slides.md → `style: ./DESIGN.slides.md`
+   - free-form custom direction → leave a one-paragraph `style:` block describing it
+5. Present a concise summary to user.
+6. Repeat revisions until explicit approval.
 
 ## Rules
 - **Do not write the outline before the user approves a style.** Style selection comes first.
@@ -40,3 +52,4 @@ Produce an approved `slide-outline.md` before any slide HTML generation.
 If needed, use the bundled outline reference:
 - `references/outline-format.md`
 - `references/plan-workflow-reference.md` — archived detailed planning workflow and organizer-agent guidance
+- `references/design-md-to-slides-conversion.md` — DESIGN.md (web) → DESIGN.slides.md (slide) translation guide, including the structured output template and the web → slide mapping table