infocard

infocard skill 概覽

infocard skill 可讓你直接在頁面中嵌入 HTML 與 CSS，用 Markdown 製作帶有編輯風格的資訊卡。它最適合那些不能只看起來「有排版」，而是必須「有設計感」的 AI 輸出：摘要、主題快照、重點面板、活動卡、比較區塊，以及適合 UI Design 的展示型內容。如果你想快速做出一張精緻的卡片，又不想先搭建完整版面系統，infocard skill 會給你一個有結構的起點。

infocard skill 的用途

當工作目標是把密集內容轉成一張易讀的卡片，並同時保有清楚層級、視覺節奏與精簡敘事時，就該用 infocard。這個 skill 特別適合知識摘要、資料重點、知識庫提示、產品上線公告，以及需要雜誌感呈現的短內容模組。

何時該選它

如果你的輸出必須留在 Markdown 裡，但仍要看起來是刻意設計過的，就選 infocard skill。當你需要把 HTML/CSS 直接嵌在文件中，而且內容本身適合以卡片而不是整頁來呈現時，它會是合適選擇。若你的目標是圖表或示意圖，這就不是對的 skill；請改用專門的 diagram 或 visualization skill。

infocard skill 的主要差異

infocard 的實用價值在於它以版面為先的工作流程：它會要求你先分析內容密度、選擇骨架，再對齊語氣後才開始寫卡片。這讓它比一般「把它弄漂亮一點」的提示更可靠，尤其在 UI Design 工作中，間距、層級與語氣和文字本身同樣重要。

如何使用 infocard skill

安裝 infocard

使用以下指令安裝 skill：
npx skills add markdown-viewer/skills --skill infocard

安裝完成後，先打開 SKILL.md 了解會影響生成品質的規則。接著再查看 layouts/ 裡的版面範例，以及 styles/ 裡可用的視覺語氣，最後再下提示詞產出定稿卡片。

提示詞中要提供什麼

好的 infocard 提示詞，會把原始內容、目標受眾與輸出目的都交代清楚。例如，不要只說「做一張關於產品分析的卡片」，而是要提供實際事實、主要結論、閱讀層級，以及希望營造的氛圍。更好的寫法像是：Create an infocard for UI Design that summarizes a design system update for product managers, using a calm editorial tone, 3 key benefits, and a short action note.

建議工作流程

先把來源內容修剪到只剩真正重要的事實。接著判斷內容密度：單一訊息用低密度，短清單用中密度，多個主張或數據則屬高密度。然後依內容形狀挑選對應的版面檔案，例如 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 skill 常見問題

infocard skill 會比一般提示詞更好嗎？

會，尤其當你需要可重複的結構時。一般提示詞也許能做出不錯的卡片，但 infocard skill 在 HTML 嵌入、版面選擇與內容分析上提供更強的約束。這通常能減少反覆試錯，特別是當卡片必須在 Markdown 中正常運作、不能有格式破損時。

初學者安裝 infocard skill 值得嗎？

通常值得，尤其是你剛開始處理 Markdown 內嵌 HTML 輸出，並希望有一個更安全的起點時。這個 skill 的風格取向較明確，能幫初學者避開空洞版面與層級不清的問題。如果你本來就很熟手動打造 UI 模式，而且只需要一次性的草稿，它的幫助就比較有限。

infocard skill 不擅長什麼？

它不適合流程圖、架構圖，或重度依賴圖表的報告。當來源內容本身很模糊時，它的效果也會變差，因為卡片在排版之前就需要先做清楚的內容分析。如果訊息無法被整理成卡片大小的結構，換別種格式通常更好。

它如何融入 UI Design 工作流程？

當你需要精簡呈現產品想法、設計原則、功能摘要或版本更新時，infocard skill 會很合適。它對 UI Design 特別有用，因為它會逼你在樣式化之前先思考層級、語氣與密度，讓成果更接近真正的介面元件，而不是只是排版過的文字。

如何改進 infocard skill

提供更好的原始素材

最大的品質提升，通常來自更好的輸入。請提供精確文案、數據、標籤與限制條件，而不是籠統主題。例如，3 benefits, 1 caveat, 1 CTA 會比「寫一些關於 onboarding 的內容」產出更銳利的 infocard。結構越明確，模型需要自行補的東西就越少。

讓版面對應內容形狀

常見失敗多半是把內容硬塞進錯的骨架裡。單一訊息不該塞進密集的 grid 裡；而以數據為主的更新，也不該被當成 quote card 來處理。請先依內容實際形狀選版面，再用 style 去微調語氣。

先調整層級，不要只改措辭

如果第一次輸出感覺不對，先改內容層級，再要求更漂亮的文字。把最重要的事實往上移、減少次要文字，並刪掉任何不會改變讀者決策的句子。對 infocard 而言，清晰度通常來自更緊密的結構，而不是更多形容詞。

邊界要說清楚

當你明確告訴它不要做什麼時，infocard skill 表現最好：不要圖解、不要圖表式包裝、不要額外章節，也不要裝飾性填充。如果你要做的是 UI Design 的 infocard，就直接說它應該偏編輯風、產品導向、正式，還是溫暖。這些限制能幫助輸出保持聚焦，也更容易直接上線。