infocard

Infocard Generator

快速入門： 分析內容（密度 × 結構 × 氛圍）→ 自動感知色調以選取色板 → 挑選佈局骨架 → 直接在 Markdown 中使用 <style scoped> 嵌入 HTML。

關鍵規則

規則 1：直接嵌入 HTML

重要：將資訊卡片以直接 HTML 寫入 Markdown。絕對不要使用程式碼區塊（```html）。HTML 應直接嵌入文件中，不加任何圍籬。

規則 2：HTML 結構中不留空行

關鍵：請勿在 HTML 資訊卡片結構內加入任何空行。保持整個 HTML 區塊連續，以避免解析錯誤。

規則 3：設計前先分析內容

必要：設計前先從三個面向分析內容：

密度（決定呼吸節奏）：

密度	內容量	視覺處理
低	≤ 50 字核心	「大字」構圖。一個超大元素主導。大量留白。
中	50–200 字	主視覺 + 輔助面板。2–3 個主要區塊，層次分明。
高	200 字以上	不對稱多欄網格。主要/次要/輔助區塊。避免等重拼貼。

結構（決定佈局幾何）：

結構	訊號	佈局模式
單一觀點	一個核心概念	一個錨點元素主導，其餘退居次要
對比	A vs B，舊 vs 新	分割面板，兩個極點
層級	層層堆疊	堆疊模組，金字塔
流程	循序步驟	垂直串聯，編號項目
輻射	核心 + 衍生	中心樞紐搭配周圍面板
平行	多個同等概念	不對稱網格（絕不使用等寬欄位）

氛圍（決定色溫）：

氛圍	視覺感受
反思性	較多留白，偏襯線字體，低對比
銳利	強對比，粗體字型，鮮明強調色
溫暖	大地色系，圓潤感，溫和節奏
技術性	等寬字體強調，網格狀密度

規則 4：色調感知

必要：根據內容主題自動選取色板。掃描內容關鍵字並比對最接近的色調：

內容色調	背景	強調色	觸發關鍵字
哲學性	#FAF8F4	#7C6853	認知、思考、意義、哲學、本質
技術性	#F5F7FA	#3D5A80	架構、演算法、系統、API、程式碼
文學性	#FBF9F1	#6B4E3D	故事、敘事、寫作、詩歌、角色
科學性	#F4F8F6	#2D6A4F	實驗、數據、研究、論文、發現
商業性	#F4F3F0	#2D6A4F	市場、策略、成長、財務、投資
創意性	#F6F3F2	#B8432F	設計、藝術、美學、靈感、創作
預設	#FAFAF8	#4A4A4A	無明確比對時 — 寧可選預設也不要錯配

當明確選擇樣式模板時，其顏色優先於色調感知。未指定樣式時，預設使用色調感知。

規則 5：標題保護

如果使用者明確提供標題，請直接用作主標題。將編輯性解讀放在副標題、摘要或側邊模組中。請勿擅自改寫使用者的標題。

規則 6：字體層級

維持清晰的字體尺度並一致使用：

• 主標題：32px–48px，粗細 700–900，緊密字距（-0.02em）
• 副標題 / 摘要：16px–20px，粗細 400–500
• 內文：14px–16px，粗細 400，行高 1.6–1.7
• 元資料 / 標籤 / 說明：11px–13px，粗細 500–700，大寫並加字距
• 內文顏色：絕不使用純黑 — 使用 #1a1a1a、#333 或 #4a4a4a

規則 7：視覺重量分配

至少有一個模組的視覺重量應明顯重於其他模組。避免每個面板使用完全相同的處理方式。透過尺寸、背景色調、字體粗細或強調規則來區分。

規則 8：品味規則（反 AI 檢查清單）

在定稿任何卡片前，檢查以下常見的 AI 生成視覺模式：

佈局：

• 無置中主視覺 — 不要預設將標題置中。偏好靠左對齊或不對稱
• 無等寬拼貼 — 三個等寬欄位並排是 AI 的第一號特徵。使用 2fr 1fr、不對稱網格或交錯佈局
• 無統一面板 — 至少一個面板在尺寸、重量或處理方式上必須不同

字體：

• 無純黑 #000000 — 使用接近黑色（#1a1a1a、#2d2a26）或暖/冷深色
• 無僅靠尺寸的層級 — 使用粗細和顏色建立層級，而非僅靠字體大小

顏色：

• 最多 1 個強調色，飽和度 < 80%
• 無霓虹漸層 — 無紫藍 AI 光暈，無漸層填充標題
• 色溫一致 — 不要在同一張卡片中混用暖灰和冷灰

內容：

• 無填充數據 — 避免 99.99%、50%、1234567。使用自然數字（47.2%、3.8M）
• 無 AI 用語 — 避免「賦能」、「無縫」、「釋放」、「次世代」

間距：

• 內距和外距必須數學精確，無尷尬空隙
• 相鄰元素必須視覺對齊

樣式範例

先選擇視覺家族，再從該家族中挑選特定模板。這樣可以保持資料庫廣泛，而無需每次強制掃描 29 種樣式。

樣式家族

溫暖編輯與說故事

當卡片應呈現反思、人性、敘事或文化質感時使用。

樣式	檔案	適用場景
Editorial Warm	styles/editorial-warm.md	知識摘要、讀書筆記、散文、分析報告
Customer Spotlight	styles/customer-spotlight.md	客戶故事、案例研究、成功回顧、品牌敘事、採用故事
Sunset Warm	styles/sunset-warm.md	社群回顧、活動筆記、生活風格摘要、正向故事
Midcentury	styles/midcentury.md	品牌故事、復古現代行銷活動、文化筆記、設計敘事

柔和生活與教學

當卡片應呈現平靜、平易近人且低壓力時使用。

樣式	檔案	適用場景
Soft Neutral	styles/soft-neutral.md	生活風格內容、健康、教育、溫和品牌、創意工作坊
Slate Chalk	styles/slate-chalk.md	教學內容、課程、概念說明、工作坊筆記
Education Studio	styles/education-studio.md	教學筆記、課程模組、學習摘要、工作坊指南

紙本、研究與治理

當卡片應讀起來像備忘錄、報告、簡報或證據摘要時使用。

樣式	檔案	適用場景
Paper Minimal	styles/paper-minimal.md	產品筆記、任務摘要、會議記錄、簡潔文件
Lab Journal	styles/lab-journal.md	研究摘要、科學說明、醫療內容、學術論文
Academic Paper	styles/academic-paper.md	研究摘要、論文摘要、文獻回顧、證據密集型說明
Policy Paper	styles/policy-paper.md	治理筆記、政策說明、法律相關摘要、內部規則
Navy Formal	styles/navy-formal.md	投資人簡報、高階主管簡報、季度報告、企業提案
Japanese Minimal	styles/japanese-minimal.md	品牌敘事、文化筆記、低調產品散文、反思性公告
Clinical Brief	styles/clinical-brief.md	醫療保健摘要、醫療筆記、病患教育、臨床快照

商業、金融與信任

當卡片應呈現營運、高階或商業可信度時使用。

樣式	檔案	適用場景
Corporate Clean	styles/corporate-clean.md	產品發表、B2B 簡報、高階摘要、正式報告、投資人相關資料
Pitch Deck VC	styles/pitch-deck-vc.md	募資卡片、市場機會快照、新創公司動能摘要
Sales Room	styles/sales-room.md	管道檢視、客戶快照、交易策略筆記、營收簡報
Trust Center	styles/trust-center.md	安全筆記、合規摘要、稽核更新、信任相關報告
Partner Channel	styles/partner-channel.md	合作夥伴簡報、聯盟更新、通路活動、共同銷售摘要

技術與營運

當精確性、系統語言或實作細節需要主導時使用。

樣式	檔案	適用場景
Tech Blueprint	styles/tech-blueprint.md	技術規格、系統設計文件、架構摘要、工程計畫
Engineering Whiteprint	styles/engineering-whiteprint.md	架構筆記、API 簡報、實作計畫、技術白皮書
Terminal Green	styles/terminal-green.md	基礎設施狀態卡片、CLI 指南、事件筆記、復古運算主題

廣播、聲明與高對比

當卡片應公告、傳達緊急訊息或產生強烈視覺衝擊時使用。

樣式	檔案	適用場景
Bold Contrast	styles/bold-contrast.md	數據亮點、KPI 儀表板、活動公告
News Broadcast	styles/news-broadcast.md	即時更新、報告重點、媒體簡報、公開公告
Incident Desk	styles/incident-desk.md	事件檢討、中斷筆記、事後檢討、可靠性更新
Neo Brutalism	styles/neo-brutalism.md	大膽行銷卡片、宣言式摘要、新創公司發表、強烈聲明
Swiss Grid	styles/swiss-grid.md	結構化編輯佈局、設計導向報告、字體排版聲明

標誌性視覺識別

當視覺識別本身即為訊息的一部分時使用。

樣式	檔案	適用場景
Deep Night	styles/deep-night.md	娛樂、創意展示、產品發表、遊戲內容
Glassmorphism	styles/glassmorphism.md	高階產品發表、功能亮點、活動邀請、未來導向展示

佈局骨架

先選擇內容結構家族，再選擇具體線框。佈局保持樣式無關。

佈局家族

核心單主題卡片

當一個論點應主導，且輔助內容應保持次要時使用。

佈局	檔案	最佳用途
Hero Card	layouts/hero-card.md	單一主題，包含標題 + 摘要 + 一個輔助面板
Quote Card	layouts/quote-card.md	引文、使命宣言、主題演講引句並附出處
Split Panel	layouts/split-panel.md	雙欄佈局：主要內容 + 側邊欄或左右對比
Stacked Modules	layouts/stacked-modules.md	多區塊垂直流程，包含不同重量的區塊

指標與營運讀數

當數字、狀態或營運訊號需要快速掃描時使用。

佈局	檔案	最佳用途
Metric Board	layouts/metric-board.md	KPI 卡片、效能儀表板、季度檢討、健康檢查、指標驅動公告
Financial Snapshot	layouts/financial-snapshot.md	營收摘要、現金狀況、效能快照、單位經濟
Sales Brief	layouts/sales-brief.md	管道檢視、交易策略、區域銷售更新、營運營收
Terminal Window	layouts/terminal-window.md	狀態快照、指令逐步解說、事件更新、營運摘要

序列、路線圖與進展

當讀者需要階段、步驟或方向性移動時使用。

佈局	檔案	最佳用途
Timeline Flow	layouts/timeline-flow.md	循序步驟、里程碑、流程階段，搭配垂直時間軸
Station Workflow	layouts/station-workflow.md	詳細工作流程分解，每個步驟帶有結構化屬性（輸入/處理/輸出/關卡/持續時間）
Roadmap Board	layouts/roadmap-board.md	現在 / 下一步 / 未來規劃、策略排序、階段性推出
Staircase Progression	layouts/staircase-progression.md	成熟度曲線、階段性範圍累積、逐步建構故事
Funnel Stack	layouts/funnel-stack.md	銷售漏斗、轉換流程、招募管道、決策收斂
Incident Review	layouts/incident-review.md	事後檢討、中斷檢討、可靠性事件、補救快照

比較與決策

當卡片需要明確的取捨、優先排序或並列框架時使用。

佈局	檔案	最佳用途
Pros & Cons	layouts/pros-cons.md	取捨分析、決策框架、風險 vs 報酬、平衡評估
Quadrant Matrix	layouts/quadrant-matrix.md	優先順序對應、風險報酬框架、投資組合檢視、2x2 分類
Matrix Table	layouts/matrix-table.md	MxN 分類網格，包含兩個有意義的軸線及原型標記的儲存格
Comparison	layouts/comparison.md	並列對比、選項框架、前/後或 A/B 比較
Principle Grid	layouts/principle-grid.md	編號原則，每張卡片搭配反模式與應用對比

網格與清單

當卡片需要重複模組、混合尺寸拼貼或易於掃描的清單時使用。

佈局	檔案	最佳用途
Bento Grid	layouts/bento-grid.md	多主題概覽、功能展示、混合尺寸網格單元
Badge Grid	layouts/badge-grid.md	功能列表、能力目錄、技能清單、效益展示
Checklist Board	layouts/checklist-board.md	執行追蹤、上市準備、品質關卡、營運檢查清單

系統與關係對應

當結構、鄰接性或網路關係比順序更重要時使用。

佈局	檔案	最佳用途
Architecture Map	layouts/architecture-map.md	分層系統、平台概覽、服務邊界、技術藍圖
Layered Sidebar Map	layouts/layered-sidebar-map.md	分層堆疊，兩側附帶情境軌道，包含跨領域線索、KPI 或價值鏈錨點
Radial Hub	layouts/radial-hub.md	生態系統概覽、核心加功能、樞紐與輻條關係

文件與備忘錄邏輯

當卡片應讀起來像結構化簡報，包含明確章節時使用。

佈局	檔案	最佳用途
Research Abstract	layouts/research-abstract.md	摘要卡片、研究發現、證據綜合、論文快照
Board Memo	layouts/board-memo.md	高階更新、決策備忘錄、季度董事會筆記、領導摘要
Policy Memo	layouts/policy-memo.md	內部政策變更、治理決策、流程規則、指導說明
Education Module	layouts/education-module.md	課程摘要、學習路徑、工作坊模組、教學卡片
Healthcare Summary	layouts/healthcare-summary.md	臨床概覽、病患摘要、照護快照、健康教育

治理、風險與稽核

當所有權、控制狀態與緩解細節必須明確時使用。

佈局	檔案	最佳用途
Risk Register	layouts/risk-register.md	風險追蹤、緩解規劃、合規檢討、計畫治理
Compliance Audit	layouts/compliance-audit.md	稽核摘要、控制檢討、安全狀態檢查、合規追蹤

敘事與利害關係人更新

當內容關於人員、團隊、客戶或合作夥伴動態時使用。

原始備註：org-update、customer-story 和 partner-brief 現在共用輕量化的 card-brief-* 外部節奏。除非結構實際上是關於關係或利害關係人動態而非標題節奏，否則將 news-bulletin 保持獨立。

佈局	檔案	最佳用途
News Bulletin	layouts/news-bulletin.md	突發更新、摘要卡片、狀態公告、新聞稿風格回顧
Org Update	layouts/org-update.md	團隊變更、招聘更新、所有權轉移、領導溝通
Customer Story	layouts/customer-story.md	案例研究、前/後成果、客戶成功、採用敘事
Partner Brief	layouts/partner-brief.md	聯盟更新、共同銷售筆記、合作夥伴摘要、通路檢討

家族對齊備註

• 在發明新類別名稱前，優先使用現有家族原始元素。目前對齊的佈局家族包括 card-doc-*、card-kpi-*、card-sequence-*、card-tile-*、card-map-*、card-compare-*、card-review-*、card-topic-* 和 card-brief-*。
• 當新佈局明顯屬於其中一個家族時，先變化幾何和修飾符。不要為相同角色建立平行的原始詞彙。
• 明確的特殊案例保持獨立：quote-card、terminal-window、news-bulletin 以及最強烈的識別驅動樣式主題，如 deep-night 和 glassmorphism。
• 如果佈局或樣式僅共享氛圍而非結構，請以文字記錄家族關係，而非強制進行額外的原始元素收斂。

設計原則

空間與呼吸感

• 卡片內距：距邊緣 32px–48px
• 模組間距：16px–24px
• 標題區域必須有寬裕的行高（1.1–1.3）並與內文清楚區隔
• 切勿將內容擠壓到卡片邊緣

視覺強調

• 使用 4px–6px 粗的線條作為章節分隔線或強調邊框
• 使用微妙的淡色背景（rgba(0,0,0,0.03) 或樣式特定淡色）用於次要面板
• 強調色應節制：一個亮色用於線條、標籤或關鍵數字
• 可選：4% 噪點疊加用於紙張紋理（請見樣式模板）

內容節奏

• 高密度卡片：分組為概覽 → 核心判斷 → 輔助模組 → 結論
• 排名內容：不對稱主視覺 + 結構化列表（避免等寬拼貼）
• 教學/分析內容：概覽 → 核心見解 → 細節區塊 → 邊界/注意事項 → 摘要

樣式參考

通用類別（所有樣式共用）

• .card-frame — 外部容器，包含最大寬度與內距
• .card — 主要卡片表面，包含背景、內距與可選噪點疊加
• .card-meta — 元資料行（分類、日期、版本），小型大寫
• .card-title — 主標題
• .card-subtitle — 副標題或摘要
• .card-bar — 粗的強調分隔線
• .card-body — 內文段落
• .card-body.dropcap — 首段具有首字下沉（編輯開場）
• .card-highlight — 獨立短句（< 25 字元），帶左側強調邊框，用於關鍵見解
• .card-grid — 網格容器；.card-grid-2 用於雙欄
• .card-panel — 內容面板，帶上邊框強調
• .card-panel.heavy — 較重的面板，內距更大
• .card-panel.light — 較輕的面板，邊框更細
• .card-panel-title — 面板標題，小型大寫
• .card-panel-text — 面板內文
• .card-item — 帶標題的內容區塊（標籤 + 描述配對）
• .card-item-label — 項目標題/標籤
• .card-tag — 行內標籤/徽章
• .card-stat — 超大數字/指標顯示
• .card-stat-label — 指標下方的標籤
• .card-divider — 章節間的細水平分隔線
• .card-footer — 底部區域，用於來源、出處或備註
• .card-endmark — 內容結束標記（∎），用於編輯結尾

富文字元素

首字下沉（僅第一段 — 創造編輯開場儀式）：

<p class="card-body dropcap">第一段文字...</p>

強調引句（獨立見解，< 25 字元，帶左側強調邊框）：

<p class="card-highlight">關鍵見解短語</p>

帶標題項目（標籤 + 描述配對，用於結構化列表）：

<div class="card-item">
  <p class="card-item-label">項目標題</p>
  <p class="card-panel-text">項目描述文字。</p>
</div>

章節分隔線：

<div class="card-divider"></div>

結束標記（編輯結尾，置於內容末端）：

<span class="card-endmark">∎</span>

最佳實務

內容指南

1. 僅直接嵌入 — 始終將 HTML 直接嵌入 Markdown，絕不使用 ```html 程式碼區塊
2. 結構中不留空行 — 保持整個 HTML 區塊連續
3. 先判斷密度 — 在選擇佈局前決定低/中/高
4. 保護使用者標題 — 絕不擅自改寫使用者提供的標題
5. 平衡視覺重量 — 至少一個重區塊、一個中區塊、一個輕區塊
6. 一致使用字體尺度 — 遵循上述定義的大小層級
7. 節制強調 — 一個強調色，節制地用於線條和亮點
8. 有目的地填充空間 — 如果某個區塊看起來空蕩，先重組層級，而非添加填充內容