showcard
Agents could speak, and act.
Now they can show.
Agent 会说，也会做。
现在，它开始展示。
Between plain HTML and a plugin system there has always been an empty seat: something as light to write as a Skill, that still does most of what a plugin does. showcard fills that seat.
在纯 HTML 和插件系统之间，一直缺一个位置：写起来和写一个 Skill 一样轻，却能干插件的大部分活。showcard 补的就是这个位置。
It is an open standard for HTML-first interactive cards. A card can be one
.card.html file or a package with its own assets. A single-file card opens in any browser with a double-click — and inside your agent it
gains three powers: it can call tools, keep its state, and travel as a file. The specification and reference code are open source (CC BY + MIT).
它是 HTML 交互卡片的开放标准：可以是单文件 .card.html，也可以是带图片等资产的目录包。单文件卡片双击即可打开；放进你的 Agent，它多出三样本事——能调用工具、能把状态存下来、能整个文件发给别人。规范与参考代码开源（CC BY + MIT）。
Straightforward, efficient generative UI.直白高效的生成式 UI
An Agent can create a Mini App in a single turn. With host capabilities, it can access websites, persist state, and live beyond the conversation.
Agent 能在一轮对话内生成 Mini App。接入宿主能力后，它就能访问网站、保存状态，并在对话结束后继续留存与使用。
Simple, yet powerful.简单，却强大。
Weather panels, timers, checklists, little instruments: an Agent can turn an idea into a Mini App, as easy to author as a Skill, designed to cover 95% of everyday plugin work. Host capabilities give it tools, website access, and persistent state. Yet the result stays yours: an ordinary HTML package you can keep, share, version, and open again. It does not have to disappear into a conversation or stay tied to one platform. Simple to make, powerful to use, and worth keeping.
天气面板、计时器、清单、小乐器：Agent 能把想法做成 Mini App，像 Skill 一样好写，目标是承接 95% 的日常插件工作。接入宿主，就有了工具、网站访问和持久状态；做出的东西仍是一份属于你的 HTML 包，可以保存、分享、管理版本，也可以日后重新打开。不必消失在聊天记录里，也不必依附某个平台。简单地做出来，强大地用起来，长久地留下来。
The same card does more, depending on where it lives.同一张卡，放的地方不同，能干的事不同。
-
L0
Any browser任意浏览器
Double-click and it renders and plays. What you write is kept in the browser's own storage; tool calls fail politely and the card stays usable. Nothing to implement — every browser already is this.
双击就能看、能玩。写下的东西存在浏览器本地；工具调用会礼貌地失败，卡片照常可用。无需实现任何东西——每个浏览器天生就是它。
-
L1
State host状态宿主
Your app implements the minimal state read/write, and the host controls how long the card’s state is kept.
你的应用实现最小的状态存取，状态保留多久由宿主决定。
-
L2
Gateway host网关宿主
Cards can now call the tools they declared — fetch a weather update, for example — and every single item is asked of you first, then remembered.
卡片能调用它声明过的工具了——比如取一次天气数据——每一项都先问过你，答过的记住。
-
L3
Full host完全宿主
A full agent app. Cards can be pinned as small resident apps, operated by the agent itself, and exported to share — each copy an independent fork.
完整的 Agent 应用。卡片能被钉成常驻的小应用、能被 Agent 直接操作、能随时导出分享——每份拷贝都是独立的拓本。
Two ladders that do not convert into each other: hosts are graded L1 to L3, and cards are not graded at all. A card has exactly one verdict — the L0 harmlessness test. Passing is qualifying, and there is no higher grade.
两把梯子互不换算：宿主按能力分 L1 到 L3，卡片不分级。一张卡只有一项判定——L0 无害性测试。通过即合格，没有更高一级。
A card can ask. Only you can grant. What a card may reach is frozen in its declaration — permission is asked per named thing, remembered per card, and expires the moment the declaration changes.
卡片可以请求，点头只能是你。它能碰什么，在声明里冻结——授权按名目逐件询问、按卡片记忆，声明一变，授权即失效。
Write a “plugin” in a minute一分钟写一个“插件”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tokyo Weather</title>
</head>
<body>
<script type="application/json" data-card-manifest>
{
"spec": "1.0",
"display": { "preferredWidthPx": 384 },
"toolBindings": {
"refresh": {
"tool": "fetch.request",
"input": { "hosts": ["api.example-weather.com"] },
"description": "Refresh the weather"
}
}
}
</script>
<style>
.wx { font: 15px/1.6 system-ui; padding: 12px 16px; }
.wx b { font-size: 1.6rem; }
</style>
<div class="wx">
<h3>Tokyo Weather</h3>
<p><b><output data-persist="temp">23°C</output></b>
<span data-persist="cond">Cloudy</span></p>
<button data-invoke="refresh" data-result="refresh">Refresh</button>
</div>
</body>
</html>Check it against the static rules of chapter 9 — exit code 0 is clean:
拿第 9 章的静态规则检查它，退出码 0 即干净：
node conformance/bin/check-card.mjs my-card.card.htmlNot one line of JavaScript — three declarative markers do the wiring.
一行 JavaScript 都没有——三个声明式标记完成全部接线。
Compatibility is a command, not a promise.兼容性是一条命令，不是一句承诺。
This repository ships a
reference host you can read
in one sitting, and a
conformance suite any
third party can run against their own implementation: npm test. The rules of chapter 9
are not prose — they are runnable.
仓库里带着一个一口气能读完的参考宿主，和任何第三方都能对自己实现跑起来的一致性套件：npm test。第 9 章的规则不是散文，是可以执行的。
Questions几个问题
Is this another plugin system?这是不是又一个插件系统？
No. There is nothing to install and no registry to join. A card is a document — it opens like one, travels like one, and is inspected like one.
不是。没有东西要安装，也没有市场要入驻。卡片是一份文档——像文档一样打开、像文档一样传递、像文档一样被审视。
How does it relate to plugins and Skills?它和插件、Skill 是什么关系？
Think of it as a Skill you can touch. In the working-agent era, interaction matters and graphical interfaces matter — and the agent's tool infrastructure is reusable: what a card binds is exactly what your agent can already do. A Skill teaches the agent to do things; showcard gives the results a face you can operate.
可以把它理解成能交互的 Skill。我们相信在 Working Agent 时代，交互很重要，图形界面也很重要；而 Agent 已有的工具基础设施可以直接复用——卡片能绑定的，正是你的 Agent 本来就会用的工具。Skill 教 Agent 做事，showcard 让成果长出界面、可以上手。
What can a card do without a host?没有宿主它能干嘛？
Render and interact. Calls to host capabilities fail politely with a defined error envelope, and the card stays usable — the spec calls this graceful degradation, and the suite tests it.
渲染与交互。对宿主能力的调用会以规定的失败信封礼貌地失败，卡片保持可用——规范称之为优雅降级，套件会测它。
Can a card reach the network, or my files?卡片能碰网络或我的文件吗？
Only what its manifest declares, and only after you allow it. Asks are per named host or directory, remembered per card, and reset when the card's declaration changes. URL images and other passive media stay blocked until the host grants the relevant network access; package-local assets travel with the card.
只有声明过的，而且要你点头。询问按具体主机名或目录逐件进行，按卡片记忆，声明一变即重新来过。网址图片等被动媒体在宿主授予相应网络访问前会被拦截；包内图片则随卡片一起携带。
How do I check a card is legal?怎么检查一张卡合规？
One command: node conformance/bin/check-card.mjs my-card.card.html — exit 0
is clean.
一条命令：node conformance/bin/check-card.mjs my-card.card.html，退出码 0 即干净。
Can I build a host?我能实现一个宿主吗？
Yes — that is the point. Start from reference/, a minimal state host in
plain ES modules, and let conformance/ grade you.
能，这正是目的。从 reference/ 起步——纯 ES module 的最小状态宿主，让 conformance/ 给你打分。
Who owns this?这个规范归谁？
The specification is CC BY 4.0 and the reference/conformance code is MIT. Showcase recipes and artwork have their own licenses, listed below. The specification is maintained bilingually, with English canonical.
规范采用 CC BY 4.0，参考实现与一致性套件采用 MIT。展示配方和图片采用下方单独列出的许可。规范双语维护，以英文为准。