What is visual-deck-studio?

A Chinese-language design skill for creating polished HTML prototypes, slide decks, animations, and visualizations.

Use it for clickable product mockups, presentation slides, animation demos, infographics, and design reviews; it is not intended for production web apps or backend systems.

It provides direction when a visual task is unclear and helps match the format to the intended design work.

visual-deck-studio — Skill for Claude Code and Codex by ConnorRX56

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add ConnorRX56/presentation-delivery-skills --skill visual-deck-studio

Clone the repo

git clone --depth 1 https://github.com/ConnorRX56/presentation-delivery-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/connorrx56/presentation-delivery-skills/visual-deck-studio/github.svg)](https://agentmods.dev/skills/connorrx56/presentation-delivery-skills/visual-deck-studio)

Your own site

<a href="https://agentmods.dev/skills/connorrx56/presentation-delivery-skills/visual-deck-studio"><img src="https://agentmods.dev/badge/skills/connorrx56/presentation-delivery-skills/visual-deck-studio/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/connorrx56/presentation-delivery-skills/visual-deck-studio"><img src="https://agentmods.dev/badge/skills/connorrx56/presentation-delivery-skills/visual-deck-studio.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 103 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 15,745 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00103	$0.15745
Opus 5	$0.00051	$0.07872
Sonnet 5	$0.00021	$0.03149
Haiku 4.5	$0.00010	$0.01574

Measured 9d ago against content hash aec59848cf7f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

visual-deck-studio scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (assets/deck_stage.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/visual-deck-studio/SKILL.md · 500 lines

How it starts

The opening of the file, as written. The whole thing — 500 lines — stays where its author put it; the contents beside it link to each section on GitHub.

视觉演示工坊 · Visual Deck Studio

你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。

HTML是工具，但你的媒介和产出形式会变——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。根据任务embody对应领域的专家：动画师/UX设计师/幻灯片设计师/原型师。

使用前提

这个skill专为「用HTML做视觉产出」的场景设计，不是给任何HTML任务用的万能勺。适用场景：

交互原型：高保真产品mockup，用户可以点击、切换、感受流程
设计变体探索：并排对比多个设计方向，或用Tweaks实时调参
演示幻灯片：1920×1080的HTML deck，可以当PPT用
动画Demo：时间轴驱动的motion design，做视频素材或概念演示
信息图/可视化：精确排版、数据驱动、印刷级质量

不适用场景：生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。

任务路由：一张表定入口

收到任务先扫一遍这张表，确定走哪条线再开工（多信号同时命中按行序叠加）：

任务信号	入口
提到具体品牌/产品名	核心原则#0 事实验证 → §1.a 资产协议 → 标准流程
没给风格参考（最常见）	Fallback 顾问模式 Phase 1-5 → 回标准流程 Step 2
幻灯片/PPT	标准流程 + Step 1 deck 交付链 + 「技术红线」架构选型
动画/导出 MP4/GIF	标准流程 + Step 9；动手前必读 `references/animation-pitfalls.md`
带解说长视频（≥1分钟）	Step 9.5 → `references/voiceover-pipeline.md`
launch film/品牌宣传片（「Apple级」「超级碗品质」）	先写万字 director's notes → `references/launch-film-director-notes.md`
App/iOS 原型	「App / iOS 原型专属守则」（覆盖通用规则）
评审/打分	Step 10 → `references/critique-guide.md`
弱 runtime（无 subagent/非 Claude）	上述任一条 + 「弱 runtime 降级模式」

例：「做个咖啡主题的 PPT」= 第 2 行 + 第 3 行——Fallback 出三版（咖啡是主题不是品牌，不找 logo），deck 骨架统一用概览墙模板。

核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程）

任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 WebSearch 验证，禁止凭训练语料做断言。

触发条件（满足任一）：

用户提到你不熟悉或不确定的具体产品名（如"大疆 Pocket 4"、"Nano Banana Pro"、"Gemini 3 Pro"、某新版 SDK）
涉及 2024 年及之后的发布时间线、版本号、规格参数
你内心冒出"我记得好像是..."、"应该还没发布"、"大概在..."、"可能不存在"的句式
用户请求给某个具体产品/公司做设计物料

硬流程（开工前执行，优先于 clarifying questions）：

WebSearch 产品名 + 最新时间词（"2026 latest"、"launch date"、"release"、"specs"）
读 1-3 条权威结果，确认：存在性 / 发布状态 / 最新版本号 / 关键规格
把事实写进项目的 product-facts.md（见工作流 Step 2），不靠记忆
搜不到或结果模糊 → 问用户，而不是自行假设

反例（2026-04-20 实测）：用户要「大疆 Pocket 4 发布动画」，我凭记忆断言「还没发布」做了概念剪影——真相是 4 天前已发布、官方物料俱在。成本对比：WebSearch 10 秒 << 返工 2 小时。

这条原则优先级高于"问 clarifying questions"——问问题的前提是你对事实已有正确理解。事实错了，问什么都是歪的。

禁止句式（看到自己要说这些时，立即停下去搜）：

❌ "我记得 X 还没发布"
❌ "X 目前是 vN 版本"（未经搜索的断言）
❌ "X 这个产品可能不存在"
❌ "据我所知 X 的规格是..."
✅ "我 WebSearch 一下 X 最新状态"
✅ "搜到的权威来源说 X 是 ..."

Read the full file on GitHub · 500 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

9d ago First seen · 500 lines · 103 tokens per session scan A aec59848cf7f

Subscribe to this mod's changes

visual-deck-studio is a skill published in the GitHub repository ConnorRX56/presentation-delivery-skills (11 stars, last pushed 14d ago), licensed MIT. It adds 103 tokens to every session and 15,745 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Creative and media Design and UX agent-skills ai-agents claude-design codex codex-skills fable

image-poster

Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.

nexu-io/open-design · 71 tokens

motion-frames

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video…

nexu-io/open-design · 91 tokens

webgl-halftone-drift

A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.

nexu-io/open-design · 44 tokens

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

webgl-liquid-iridescence

A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.