技能概述
Pin & Paper 係一款黃色紙張搭配安全針插圖、墨水藍色手寫 Caveat 字體同紙張紋理嘅 HTML 簡報技能。適合定性研究發現、創始人反思、長篇品牌故事、工作坊匯報。
11 頁 demo，中等密度，中等正式度。標誌性嘅安全針插圖同紙張紋理使其特別適合想要個性同溫暖而非打磨嘅任何簡報（包括 tech 或商業場景）。
觸發關鍵字
- pin-and-paper、zhangzara-pin-and-paper、Pin & Paper
- crafted、handmade、literary、intimate
- research findings with personality、qualitative report
- html deck、html slides、zhangzara
什麼時候用
- 定性研究發現報告
- 創始人反思 / 自述
- 長篇品牌故事
- 工作坊總結 / debrief
- 想要 personality 同溫暖而非打磨嘅 tech / 商業簡報
什麼時候避免
- 需要數位原生打磨或嚴格數據驅動感覺嘅場景 — 手寫 Caveat 係刻意非正式嘅。
使用方法
自然語言觸發
用 pin-and-paper 整一份定性研究報告
我想要一個手工感、溫暖嘅簡報
zhangzara pin-and-paper，做一份品牌故事
工作流程
- Clone
example.html同assets/資料夾 — 呢個模板附帶assets/deck-stage.js運行時同assets/styles.css樣式表，兩者都必須同 HTML 放喺同一位置。 - 替換佔位內容 — 換上真實標題、正文、數據、名稱、日期同 section label。
- 保留設計系統 — 唔好替換字體、重調色板、重構佈局網格或移除裝飾元素（安全針 SVG、紙張紋理）。
- 調整篇幅 — 多於 demo 就複製最合適嘅佈局；少於就從底部刪除。
- 設計新佈局 — 需要 demo 冇嘅佈局時，用相同字體、色板、裝飾語言從頭設計。
- 保留導航運行時 —
assets/deck-stage.js同assets/styles.css保持原樣。
輸出格式
單文件 HTML 簡報（含外部 JS + CSS 資產）：
<artifact identifier="zhangzara-pin-and-paper" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
實際例子
例子 1：定性研究報告
用戶：「用 pin-and-paper 幫我整一份 qualitative research findings。」
生成 11 頁簡報：
- Cover：黃色紙張底色 + 安全針插圖 + Caveat 手寫標題
- Research Context：paper-grain texture background
- Key Insights：ink-blue handwritten annotations
- User Quotes：speech-bubble style with safety-pin illustrations
- Synthesis：hand-drawn connection diagrams
- Next Steps：warm, intimate closing
例子 2：品牌故事
用戶：「Pin & Paper，做一份長篇品牌故事簡報。」
涵蓋：
- Origin story with handwritten typography
- Brand values with safety-pin illustrations
- Customer stories with paper texture warmth
- Vision with personal, crafted closing