用途 prompt-card 用于向读者展示一个作者实际在用的提示词。卡片通常放在博客段落底部或笔记内部，因此要求简短：在 640px 宽时大约 350 至 500px 高。它让读者既能复制提示词，也能理解每个关键部分为什么存在。
主要输入 卡片最多接受三项输入：
- 提示词（必需）：用户实际键入的提示词，含其中的空白占位。缺失时需向用户索取。
- 所依赖的技能或 AGENTS.md 指令（可选）：说明其所在位置以便读取。提示词可以独立存在，此时省略“Interacts with”区块，或压缩为一行说明该提示词无需额外配置。
- 用户对提示词含义的解释（可选）：说明关键词为何出现，以及缺少它们会出什么问题。
理解关键词意图 悬停说明要解释每个词为何存在，因此必须表达用户的真实意图，不能靠猜测。若在本次对话中已与用户迭代过提示词，可直接采用其中所得；若用户已解释含义，则只就缺口提问；否则应简短访谈用户，询问关键词语和空白的用途及缺失后果。若提供了技能，应先阅读，使问题贴合其实际功能，并可给出待用户确认或修正的候选答案。
确定卡片落点 根据上下文（正在编辑的文件、所在文件夹、用户描述）推断目的地，只有不明确时才询问。
- 博客文章或网站：使用独立 HTML 组件，通过 iframe 嵌入，从 assets/template.html 开始。
- Obsidian 笔记：使用笔记内标记加 CSS 片段，因为 Obsidian 会剥离脚本。 “Copy blank template”（复制空白模板）按钮是规范的一部分。所有能运行脚本的卡片（嵌入博客或作为独立页面打开）都必须包含它；Obsidian 笔记内卡片是唯一例外，因为 Obsidian 剥离脚本。无论哪种方式，嵌入文章或笔记的卡片都保持下述精简悬停组件形态，更长的内容应放在周围正文或独立页面。
卡片内容 严格按以下顺序保留这些部分，不加其他内容：
- 页眉：卡片标题、小号“prompt card”标签，以及提示“Hover a highlight to see why it matters”。独立版本把复制按钮放在页眉，提示放在模板正下方。
- 模板：白框中的提示词。最重要的部分为带编号的颜色标记槽位：1 蓝色、2 绿色、3 琥珀色，确实需要第四项时才用 4 石板色。三个槽位是最佳数量。
- 为什么说明（弹出层）：每个槽位在悬停或键盘聚焦时显示说明。不要添加常驻可见的说明列表。同时在槽位的 title= 属性中放入相同文本作为回退。
- 依赖的指令：石板色区块，无编号徽章。用一两句话说明提示词所依赖的常驻指令（智能体技能或 AGENTS.md 指令）及其提供的内容，随后用标签列出名称。这解释了短提示词为何有效。若提示词独立存在，省略此区块或压缩为一行。
- 页脚：一行，包含标签、版本、日期。 省略元数据表格、技能列表、预期用途、示例、限制和后续步骤；若文章需要，应放在卡片周围的正文中。
写作前核实依据 若提示词依赖技能或 AGENTS.md，写任何“为什么”说明或“依赖的指令”文本前，先阅读真实指令，描述它们实际要求智能体做什么。每条说明应基于上文确认的用户意图，而非自己对字面的理解。不要编造能力；若说明暗示了指令未提及的内容，应改写或向用户指出。不要链接私有仓库；私有技能以纯文本命名。仅在确认文件夹存在后链接公开技能。若文章声称与指令实际内容有出入，应报告差距，而不是在卡片上抹平。
写作规则 平实、温和、直接，对读者称“你”。每条“为什么”说明一句，最多两句：该部分做什么，缺少它会出什么问题。不使用行话或内部标签，不使用破折号。标题用句首大写，不加冒号。
样式 若宿主站点已有交互组件，应匹配其样式：先阅读其组件 CSS，复用字体、颜色、边框、圆角与间距。否则使用默认风格：等宽字体、#fafafa 卡片底色、1px #ddd 边框、8px 圆角、0 2px 8px rgba(0,0,0,0.06) 阴影、最大宽度 640px、#0066cc 强调色。槽位配色：蓝色 #0066cc 配 #eef4ff，绿色 #1a7a4b 配 #e7f6ee，琥珀色 #a05a0c 配 #fdf3e3，石板色 #475569 配 #eef1f4。所有字号最小 12px，可用 rg -n 'font-size' <file> 检查。无论何种风格：所有 CSS 作用域限定在 .prompt-card 下，变量以 --pc- 前缀，避免与页面或仓库主题冲突；重新配色只需改变量。弹出层位于卡片内部，最右侧槽位的弹出层加 pc-pop-end 以右对齐并保持在卡片边缘内。共享 CSS 位于 assets/obsidian-snippet.css，assets/template.html 内联相同规则。
两种交付目标
- 独立博客组件：始终从 assets/template.html 开始，保留其复制按钮。它自包含，内联 <style> 与 <script>，无外部依赖。复制按钮从隐藏的 pc-plain textarea 复制纯文本提示词，不含编号标签或“为什么”说明，因此该 textarea 需与模板文本保持同步。优先使用 Clipboard API，失败时回退到临时 textarea 加 execCommand('copy')，在阻止 Clipboard API 的 iframe 中仍可用。点击后短暂显示 Copied，带 aria-label，并通过状态区域播报结果。fit() 先把 iframe 高度设为 0px 再设为 scrollHeight，在加载和调整大小时运行。用无边框 iframe 嵌入： <iframe src="prompt-card.html" width="100%" scrolling="no" style="border:0" onload="this.style.height=this.contentDocument.body.scrollHeight+'px'"></iframe>
- Obsidian 笔记：Obsidian 不渲染指向本地文件的 iframe 且剥离脚本，因此：把 assets/obsidian-note-snippet.html 的标记直接粘贴到笔记中，块内不要留空行（Markdown 遇空行会跳出 HTML），不要包含 <style> 或 <script>。将 assets/obsidian-snippet.css 追加到已启用的仓库 CSS 片段（检查 .obsidian/appearance.json 中的 enabledCssSnippets），或新增片段并启用；操作前先备份片段文件，只添加规则，不修改现有规则。:hover、:focus、:focus-within 显示弹出层；每个弹出层另含内联 style="display:none"，片段关闭时保持隐藏，title= 仍显示说明文本。省略复制按钮，因为它需要脚本，这是唯一没有该按钮的卡片。编辑笔记时只替换确切的卡片块字符串，并与备份做差异对比确认没有其他改动。
交付前验证 在无头 Chromium 或 Playwright 中渲染。Obsidian 版本仅用片段 CSS、不含脚本渲染笔记标记。逐个悬停槽位，再用键盘聚焦一个，确认弹出层的计算 display 从 none 变为 block，并对每次悬停截图。检查无控制台或页面错误（本地测试服务器缺少 favicon 不算）。点击复制并读回剪贴板，内容须与模板文本完全一致，不含编号标签或说明；需通过 http://localhost 提供文件并授予剪贴板权限，因为 file:// 不可用。在同源 iframe 中加载卡片，确认 fit() 设置了高度；跨源宿主无法访问 frameElement。用 grep -nP '\x{2014}' <file> 检查所写文件是否含破折号。
需要注意的坑 含路径通配符（如 blog/*/x.html）的 CSS 注释会在 */ 处提前结束并静默丢弃下一条规则；若那是 :root，所有变量都会消失。更具体选择器上的简写 border: 1px solid 会覆盖按颜色设置的 border-color 类，需提高颜色规则的优先级。整页截图永远不会短于视口，可用较矮视口（如 672×300）获取卡片真实高度。
版本管理 覆盖前将旧文件另存为 *.vN.html（及其 PNG），并提升页脚中的版本号。
文件
- assets/template.html：独立卡片，含必需的复制按钮和占位符（CARD TITLE、WHY 1 至 3、INTERACTS、SKILL-NAME、页脚日期）。
- assets/obsidian-snippet.css：用于仓库片段的限定作用域卡片 CSS，含可选的第 4 槽位。
- assets/obsidian-note-snippet.html：带占位符的笔记内标记。
- assets/examples/ingest-a-source/：为“Ingest <url/file> into my please.”填好的卡片，含 standalone.html、in-note.html、obsidian-snippet.css 和 hover.png。
- assets/examples/make-a-prompt-card/：模板为三行的已填卡片，含 standalone.html、in-note.html、obsidian-snippet.css、default.png 和 hover.png。
- assets/examples/build-a-landing-page/：为“Build a landing page for my please, in .”填好的卡片，含 standalone.html、in-note.html、obsidian-snippet.css、default.png 和 hover.png。
适用场景 适合在博客文章或 Obsidian 笔记中展示可复制的提示词，并用悬停说明解释关键词作用；不适合承载长篇示例、元数据或完整教程，这些应放在正文或独立页面。