infocard

infocard 技能概览

infocard 技能帮助你通过在页面中直接嵌入 HTML 和 CSS，用 Markdown 创建具有编辑风格的信息卡片。它最适合那些需要“看起来经过设计”而不只是“排版整齐”的 AI 输出：摘要、主题快照、高亮面板、活动卡片、对比模块，以及适合 UI Design 的展示型内容。如果你想快速做出一张精致的卡片，而不必从头搭建完整的布局系统，infocard 技能会给你一个结构清晰的起点。

infocard 的用途

当任务是把密集内容转成一张易读、层级清晰、节奏紧凑、叙事简洁的卡片时，就用 infocard。这个技能尤其适合知识摘要、数据亮点、知识库提示、发布公告，以及需要杂志感呈现的短内容模块。

什么时候选择它

如果你的输出必须留在 Markdown 里，但又要明显带有刻意设计感，就选 infocard 技能。它很适合需要把 HTML/CSS 直接嵌入文档的场景，也适合内容可以被表达成一张卡片而不是整页的情况。如果你的目标是流程图或图表，那就不是这个技能的用武之地；应改用专门的 diagram 或 visualization 技能。

主要区别

infocard 的实际价值在于它的“先布局，后写文案”的工作流：它会先让你分析内容密度、选择骨架，再去匹配语气后开始起卡。这让它比一个泛泛的“把它变好看一点”提示更可靠，尤其在 UI Design 相关工作里，间距、层级和语气和文字本身一样重要。

如何使用 infocard 技能

安装 infocard

使用以下命令安装技能：
npx skills add markdown-viewer/skills --skill infocard

安装后，先打开 SKILL.md，了解会影响生成质量的规则。然后在给出最终卡片提示词之前，先查看 layouts/ 里的布局示例和 styles/ 里的可用视觉语气。

提示词里该提供什么

一份高质量的 infocard 提示词，应该同时给出原始内容、目标受众和输出目的。比如，不要只说“做一张关于 product analytics 的卡片”，而要提供具体事实、核心结论、阅读层级和希望传达的氛围。更好的写法是：“为 UI Design 创建一张 infocard，总结一项 design system 更新，面向 product managers，使用平静的 editorial 语气，包含 3 个关键收益和一条简短行动说明。”

建议的工作流

先把源内容裁剪到最关键的事实。接着判断内容密度：单一信息用低密度，短列表用中密度，多条主张或指标用高密度。然后选择一个和内容形状相匹配的布局文件，比如 layouts/hero-card.md、layouts/data-highlight.md 或 layouts/comparison.md。最后从 styles/ 里套用匹配的风格，让语气服务信息，而不是和信息打架。

先读哪些文件

先读 SKILL.md，掌握关键规则；如果不确定该用哪种结构，再预览 layouts/badge-grid.md、layouts/bento-grid.md、layouts/data-highlight.md 和 layouts/comparison.md。如果输出需要特定氛围，在动笔前先看看 styles/editorial-warm.md、styles/clean-modern.md 或 styles/soft-neutral.md。

infocard 技能 FAQ

infocard 比普通提示词更好吗？

在你需要可重复结构时，是的。普通提示词也能生成一张不错的卡片，但 infocard 技能为 HTML 嵌入、布局选择和内容分析提供了更强的约束。这样通常能减少反复试错，尤其是在卡片必须稳定嵌入 Markdown、且不能出现格式损坏时。

初学者安装 infocard 值得吗？

通常值得，前提是你刚接触 HTML-in-Markdown 输出，并希望有一个更稳妥的起点。这个技能带有明确偏好，能帮助新手避开空洞布局和层级薄弱的问题。如果你已经习惯手工搭 UI 模式，只是偶尔需要一版草稿，它的价值就没那么高了。

infocard 不擅长什么？

它不适合流程图、架构图，或者重图表的报告场景。另一个短板是源内容过于模糊时，因为卡片依赖先做清晰的内容分析，再去决定布局。如果信息无法压缩成卡片级结构，换一种格式通常会更合适。

它如何融入 UI Design 工作流？

当你需要紧凑呈现产品想法、设计原则、功能摘要或发布说明时，infocard 技能就很合适。它在 UI Design 场景里尤其有用，因为它会迫使你在开始排版前先思考层级、语气和密度，这样最终结果会更接近一个真实的界面组件。

如何改进 infocard 技能

提供更好的源材料

质量提升最大的来源是更好的输入。不要只给一个宽泛主题，而要提供准确文案、指标、标签和约束。例如，提供“3 个收益、1 个注意点、1 个 CTA”，得到的 infocard 会比“写点关于 onboarding 的内容”更清晰。结构越明确，模型需要自己编造的内容就越少。

让布局匹配内容形状

常见失败往往发生在内容被硬塞进错误的骨架里。单一信息不该被挤进密集网格，而以指标为主的更新也不该按引语卡片来处理。先根据内容的真实形状选布局，再用风格去修正语气。

改的是层级，不只是措辞

如果第一次输出不对，先改内容层级，再要求更漂亮的语言。把最重要的信息提到最上面，减少次要文字，删除任何不会改变读者判断的句子。对 infocard 来说，清晰度通常更多来自更紧的结构，而不是更多形容词。

把边界说清楚

infocard 技能在你明确告诉它“不要做什么”时表现最好：不要图示、不要图表式表达、不要额外分区、不要装饰性填充。如果你要做一张面向 UI Design 的 infocard，也要说明它应该更像 editorial、product-led、formal 还是 warm。把这些限制说清楚，输出才更聚焦，也更容易直接交付。