에이전트를 위해 만들어진 슬라이드 프레임워크. 덱을 자연어로 설명하세요 — 코딩 에이전트가 React를 작성합니다. open-slide는 캔버스, 스케일링, 내비게이션, 핫 리로드, 그리고 프레젠테이션 모드를 처리하여 에이전트가 콘텐츠에 집중할 수 있도록 합니다.

모든 슬라이드는 고정된 1920 × 1080 캔버스로 렌더링됩니다. 페이지는 임의의 React 컴포넌트이지, 제한된 DSL이 아닙니다.

왜 오픈 슬라이드인가

슬라이드는 시각 코드입니다. 에이전트는 코드를 작성하는 데 뛰어납니다. 오픈 슬라이드는 "X 관련 슬라이드 만들기"를 채팅을 떠나지 않고도 다듬어지고 보기 좋은 덱으로 만드는 빠진 런타임입니다.

하이라이트

🤖 에이전트 네이티브 저작

클로드 코드, 코덱스, 커서 등 모든 코딩 에이전트와 함께 작동합니다. 비계 함선은 내장된 기술을 갖추고 있습니다:

• /create-slide — 덱을 끝까지 초안을 작성합니다. 주제와 미학, 페이지 수, 텍스트 밀도, 움직임 대 정적 등 네 가지 스코핑 질문을 하고, ID 선택, 구조 계획, 페이지 작성 작업.
• /slide-authoring — 1920 × 1080 캔버스, 활자 축척, 팔레트 및 레이아웃 규칙에 대한 기술 참고 자료. 에이전트는 작성 전에 이 문서를 읽습니다.

한 줄짜리 프롬프트에서 다듬어진 덱으로, 고정된 틀 없는 덱으로.

🎯 브라우저 내 검사관

open-slide

The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.

Every slide renders into a fixed 1920 × 1080 canvas. Pages are arbitrary React components, not a constrained DSL.

npx @open-slide/cli init my-slide

Why open-slide

Slides are visual code. Agents are great at writing code. open-slide is the missing runtime that turns “make slides about X” into a polished, presentable deck — without you ever leaving the chat.

Highlights

🤖 Agent-native authoring

Works with any coding agent (Claude Code, Codex, Cursor, …). The scaffolder ships with built-in skills:

• /create-slide — drafts a deck end-to-end. Asks four scoping questions (topic & aesthetic, page count, text density, motion vs. static), picks an id, plans the structure, and writes the pages.
• /slide-authoring — the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The agent reads this before writing.

From a one-line prompt to a polished deck, no boilerplate.

🎯 In-browser inspector

Switch the dev server toolbar to comment mode, then click any element or drag across a region and leave a note — “make this red”, “change to ‘Open Slide Rocks’”, “shrink the headline”. Each comment floats as a pin beside its target and is persisted as an @slide-comment marker in source. Run /apply-comments and the agent applies every pending edit, then clears the markers.

The loop: present → comment → /apply-comments → repeat.

🧑‍💻 In-app agent panel

Connect your locally installed Claude Code or Codex once and the whole loop moves into the browser: draft a deck, answer the scoping questions as option cards, apply comments with one click, and edit the selected element by describing the change. Without a connected agent the dev server keeps the terminal-driven flow above.

🖼️ Assets manager + svgl logo search