What does this skill do, and when should you use it?
slides-grab-design is the Stage 2 design skill of the slides-grab toolchain, used after a Stage 1 outline (slide-outline.md) is approved. It generates one self-contained HTML file per slide (default 720pt × 405pt) following a chosen design style, paired with a browser-based visual editor for pointing-at-area edits. The skill ships 95 bundled design styles, Chart.js charts, tldraw diagrams, local image/video asset management, and Playwright-based validation. Before PDF/PPTX export, the deck must survive a Design Gate run by two independent vision-capable critic passes that block unreadable text, palette violations, and AI-slop treatments.
Reads the approved slide-outline.md and extracts its style field; loads the design spec from the bundled style library (src/design-styles-data.js), a DESIGN.slides.md design system, or an imported template pack; writes a visual thesis, content plan, system declaration, and design tokens before generating slide-01.html and onward. It calls slides-grab image for bespoke imagery (default codex-imagen provider reusing the local Codex login — no API key), slides-grab tldraw for complex diagrams, Chart.js for charts, and slides-grab fetch-video for web video. It then runs slides-grab validate, captures PNG render evidence via slides-grab png, executes two adversarial critic passes (System Contract and Audience Impact), and records a Proceed receipt with slides-grab design-gate to unlock export. An interactive editor (slides-grab edit) and single-file viewer (slides-grab build-viewer) support the review loop.
- Designers or engineers who want a full presentation generated from topic files directly inside Claude Code or Codex
- Teams with an existing corporate deck or brand pages who want new slides to follow that visual system via import-template
- Data analysts producing chart-heavy reports where charts must pass pixel-level validation (blank canvases fail as empty-canvas)
- Social media creators making Instagram-style 1:1 card news or slides needing per-card visual polish
- Anyone worried about AI-slop slide treatments (gradient abuse, generic font stacks) who wants a mandatory quality gate before shipping
How do you install this skill?
- Default image provider reuses local Codex login credentials against an unsupported private backend that may break without notice; in sensitive environments prefer explicit API-key providers.
- Image/video/CDN dependencies are overseas services; verify reachability from mainland-China networks.
- design-gate.md appears truncated in the supplied material; verify packaged completeness.
- PPTX/Figma exports are experimental and may need heavy manual cleanup.
- Publisher is unverified by FollowSkills; identity unknown, and maintenance/update responsibility is unclear.
- Shell / CLI
- Network access
- Local filesystem
Node.js >= 20Playwright (Chromium)slides-grab CLI (npm install slides-grab)yt-dlp (optional, for video download)Codex ChatGPT login (optional, for codex-imagen image generation)
No clone required: npm install slides-grab && npx playwright install chromium, then npx slides-grab install-skills --target all --scope user to install shared skills into Codex and Claude Code; or have your coding agent read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md (or codex.md) and follow every step. Requires Node.js >= 20. This skill lives at skills/slides-grab-design/SKILL.md in a repository bundling 7 skills.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/NomaDamas/slides-grab.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/slides-grab-design" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- generate the slides per the approved outline using the glassmorphism style
After Stage 1 (the plan skill) produces an approved slide-outline.md whose meta contains style: <id>, style: template-pack, or an approved custom style direction, invoke this skill — e.g. tell the agent "generate the slides per the approved outline using the glassmorphism style". The agent generates slides/slide-01.html and onward, runs validation and the design gate, then opens slides-grab edit so you can drag-select regions and request changes. Once edits are confirmed, run slides-grab build-viewer for a final preview, then proceed to export (PDF/PPTX).
What are this skill's strengths and limitations?
- Rigorous quality control: Playwright validation plus PNG render evidence plus an adversarial two-critic gate, where Critical findings hard-block export
- Clear asset contract: images/videos localized under assets/, charts must genuinely render, blank canvases and invented data are treated as failures
- Large style system: 95 bundled styles plus support for a custom DESIGN.slides.md design system and imported template packs
- Default image generation needs no extra API key (reuses Codex ChatGPT login), with OpenAI and Google fallback providers
- Explicit anti-slop guidance: AI-trope blacklist, font-size floors, and color discipline reduce template-looking output
- Heavyweight workflow: every round of visual edits requires re-validation and a two-pass design gate, which feels cumbersome for light needs
- The default codex-imagen provider calls an unsupported private Codex backend that may break without notice, and not all ChatGPT accounts have image-generation entitlement
- PPTX and Figma export paths (CLI/sibling-skill layer) are officially labeled experimental/unstable, expecting manual cleanup
- The design gate requires separate vision-capable critic agents; single-agent or HTML-only review is explicitly not accepted as visual approval
- No public test suite or third-party benchmarks — only a demo video and showcase gallery as evidence
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Slides Grab Design Skill this page | 51 · Use with care | ★ 1.2k | 1mo ago | MIT |
| Slides Grab HTML Skill | 60 · Recommended | ★ 1.2k | 1mo ago | MIT |
| Slides Grab Image-Native Skill | 53 · Use with care | ★ 1.2k | 1mo ago | MIT |
| Huashu Design | 42 · Not recommended | ★ 25k | 12d ago | MIT |
| baoyu-design: Run Claude Design Locally as an Agent Skill | 53 · Use with care | ★ 4.4k | 1mo ago | MIT |
The repo bills itself as a "Claude Design Open Source Alternative": unlike a proprietary design flow, slides-grab-design emphasizes HTML/CSS slides with drag-to-select visual editing, a mandatory design gate, and a local asset contract, while working in both Claude Code and Codex. The project also acknowledges being built on ppt_team_agent by Builder Josh.
How did FollowSkills review this skill?
Skill explicitly treats imported template-pack data as untrusted, forbids executing imported text, restricts assets to local paths and bans remote URLs; data-flow disclosure is fairly complete. Deducted because the default codex-imagen provider reuses local Codex login credentials (~/.codex/auth.) against an unsupported private backend; external effects and rollback are incomplete.
Workflow instructions are self-consistent with clear failure feedback via validate/design-gate and a CLI-enforced report contract; deducted for static-only review — no evidence of behavior on abnormal inputs, and repo tests were not confirmed as executed evidence covering this skill's key paths.
Inputs, outputs, stage boundary (requires an approved slide-outline.md) and non-fit ranges are fairly clear; deducted because triggers depend on Stage 1 artifacts and core image generation depends on overseas services (OpenAI/Google/unsupported Codex backend), a reachability risk from mainland China.
Good layered docs (SKILL.md → references), known limitations disclosed (codex-imagen instability, experimental PPTX), MIT license clear; deducted for missing versioning/changelog, unclear maintenance/update path within the skill, and design-gate.md appears truncated.
Claims directly exportable HTML slide output with a validation/review loop and clear marginal value; deducted because no execution evidence confirms the output is directly usable, capping the score under static review.
Auditable material exists — concrete commands, file structure, named test scripts in package., corroborating EN/KO READMEs; deducted for absence of third-party execution evidence or independent reproduction.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →