deckmark

deckmark

In-browser annotation for AI-generated presentations. Close the feedback loop without screenshots — works with any AI coding agent that speaks MCP.

You install deckmark once into your agent. Then you type /deckmark:use-deckmark <topic> and the agent asks about mode, style, and motion, builds a slide deck, opens it in your browser with an annotation overlay, you click directly on elements to leave change requests, and when you come back to the agent it reads those annotations and applies them. No screenshots, no copy-paste, no terminal–browser ping-pong.

---

Install

Claude Code

/plugin marketplace add sowenzhang/deckmark
/plugin install deckmark@deckmark-marketplace

Quit and reopen Claude Code so the MCP server spawns. Verify with /mcp — deckmark should show as connected. Then /deckmark:use-deckmark <topic> is available.

Other MCP-aware agents (Gemini CLI, Codex, GitHub Copilot CLI, Cursor, …)

deckmark ships an MCP server bundled in a GitHub Release tarball, fetched on demand via npx. Add the following to your agent's MCP config (typical paths: ~/.gemini/settings.json, ~/.codex/config.toml, ~/.cursor/mcp.json, etc. — consult your agent's docs for the right file):

{
  "mcpServers": {
    "deckmark": {
      "command": "npx",
      "args": [
        "-y",
        "--package",
        "https://github.com/sowenzhang/deckmark/releases/latest/download/deckmark.tgz",
        "deckmark-mcp"
      ]
    }
  }
}

Restart the agent. The seven deckmark MCP tools become callable. (Note: the slash command /deckmark:use-deckmark and the design-system skill are Claude Code–specific packaging conventions and won't appear in other agents. The tools themselves work everywhere — just describe your intent in natural language and the agent will call them.)

Updating to a new release

When a new version ships:

/plugin marketplace update deckmark-marketplace
/plugin install deckmark@deckmark-marketplace

Restart Claude. The npx invocation always fetches the latest release tarball, so a Claude restart is usually enough on its own.

For non-Claude agents, no update step is needed — latest/download/deckmark.tgz is a redirect that always points at the newest release. Restart the agent and npx will pick up the new tarball automatically.

---

Usage

After install, in your agent's chat:

/deckmark:use-deckmark Build a deck about Q2 results for the engineering org, dark mode, technical style

The agent will:

1. Confirm three design choices: mode (light/dark), style (professional/academic/fashion/technical/fun), and motion (slide transitions / fragment reveals / auto-animate, multi-select). Skip what you've already specified.
2. Ask audience and approximate length.
3. Scaffold a project folder, write content.md from your brief, build the deck, and launch a local annotation server at http://127.0.0.1:<port>.
4. Tell you the URL. You open it. Press A to enter annotation mode, click any slide element, type a comment, repeat. Click ✓ Done when finished.
5. After you click Done, the agent reads your structured feedback, edits content.md, and rebuilds. (If you return later, you can still say “apply the comments”.)
6. When the deck is final, ask the agent to publish. It'll offer two options: a single self-contained .html (good for email/USB/attachment), or a published/ folder with index.html + cacheable assets (good for hosting on GitHub Pages, Netlify, S3, etc.).

---

How it works

user types /deckmark:use-deckmark <topic>
        ↓
agent asks: mode? style? motion? audience? length?
        ↓
agent + user align on storyline outline (core argument per slide)
agent: init_deck → writes content.md → build_deck
        ↓
agent: start_review → "open <url>, press A to annotate, click Done"
        ↓
user annotates elements in the browser, clicks Done
        ↓
agent: get_annotations → applies each comment to content.md → build_deck
        ↓
agent: "Want another round, or shall I publish?"
        ↓
agent: publish_deck (single-file or multi-file)

Annotations live in ./annotations/session-<timestamp>.json next to your deck. Writes are atomic (temp-file + rename) and serialized per-deck. Each annotation captures the slide index, CSS selector, DOM path, bounding box, element text, the user's comment, and optional overall summary.

The seven MCP tools