一个Claude 技能，用于构建精致、互动的HTML解释，既能做成单页，也可以做幻灯片。给它一个主题，回答几个问题，它就生成了一个真实的页面，用户可以冷静地看到它，并且理解了基础知识。

这是一个过程，不是模板：质量来自一个迭代循环（研究→ 学习建筑师 → 10×视觉设计→渲染和实际呈现→修改），不是 从填补空白开始。

观看实际操作：现场示例图库

最佳效果：用Claude Code搭配Opus 4.8运行，且工作量更高（或更好）。 它既更快又质量更高，因为更强的初稿意味着更少的质量循环修复周期。Claude Code在真正的无头浏览器中渲染，因此能捕捉Claude App或Cowork无法捕捉的视觉bug。

它的作用

给定一个主题（或你自己的素材），技能是：

• 先看范围 — 简短且必问的访谈：基础、受众深度、形式 （滚动页面与幻灯片）、视觉风格、测验、AI聊天。
• 准确事实——基于你的材料和/或原始资料;引用它们。
• 学习架构师 — 以一个心智模型为导向，层叠深度，围绕

HTML Explainer

A Claude Skill for building polished, interactive HTML explainers as a single page OR a slide deck. Give it a topic, answer a few questions, and it produces a real page that someone can land on cold and come away understanding the basics.

It’s a process, not a template: the quality comes from an iterative loop (research → architect for learning → 10× the visual design → render-and-actually-look → revise), not from filling in blanks.

See it in action: live examples gallery

Best results: run it in Claude Code with Opus 4.8 at high effort (or better). It’s both faster and higher quality, since stronger first drafts mean fewer quality-loop fix cycles. Claude Code renders in a real headless browser, so it catches visual bugs the Claude App or Cowork cannot.

What it does

Given a topic (or your own source material), the skill:

• Scopes first — a short, must-ask interview: grounding, audience/depth, format (scrolling page vs slide deck), visual style, quiz, AI chat.
• Gets the facts right — grounds in your material and/or primary sources; cites them.
• Architects for learning — leads with one mental model, layers depth, builds around a single clear centerpiece.
• Hits a 10× visual bar — editorial typography, a semantic palette, real use of the horizontal space, and an explicit anti-“AI-slop” checklist (no emoji-as-icons, no decorative gradients, no generic bento grids).
• Shows, doesn’t tell — favors small playable micro-demos over paragraphs.
• Runs a real quality loop — renders the page in a headless browser, screenshots it (desktop + mobile + interactive states), critiques it like a human, and fixes what’s weak.
• Ships a real .html file with an optional in-page Review & edit overlay so non-technical reviewers can annotate or edit in place (and download a copy with both the edits and the notes embedded).

Examples

Built with this skill, hosted on GitHub Pages — each is a self-contained .html file: