Open Design 技能系統
Open Design 提供 118 個技能 + 146 個品牌設計系統。每個技能都係一個獨立嘅 SKILL.md 文件，包含觸發關鍵字、使用場景同輸出規範。
📊 簡報/演示類（54 個技能）
核心簡報（13 個）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| html-ppt | ppt, deck, slides | HTML 簡報工作室 — 多風格/佈局/動畫，所有簡報嘅基礎 |
| html-ppt-pitch-deck | pitch deck, fundraising | 10 頁投資者路演簡報 — 白底 + 藍紫漸變 hero + traction chart |
| guizang-ppt | ppt, deck, slides | 歸藏雜誌 × 電子墨水風格 PPT — WebGL 流體背景 + 橫向翻頁 |
| simple-deck | deck, slides, ppt | 最簡橫向滑動 HTML 簡報 — 基礎 seed template |
| html-ppt-presenter-mode-reveal | presenter mode, 演講者模式 | 演講者模式 — 5 套主題 T 鍵切換 + 逐字稿示例 |
| html-ppt-product-launch | product launch, keynote | 產品發布 keynote — 暗 hero + 亮內容 + 暖橙→桃色 accent |
| html-ppt-tech-sharing | tech sharing, tech talk | 技術分享簡報 — GitHub-dark + JetBrains Mono + terminal code blocks |
| html-ppt-weekly-report | weekly report, 週報 | 團隊週報簡報 — 8-cell KPI grid + shipped list + 8-week bar chart |
| html-ppt-course-module | course module, workshop | 在線課程/工作坊 — Playfair serif + 左側學習目標導航 |
| html-ppt-xhs-post | 小紅書, xhs | 小紅書/Instagram 9 頁 3:4 豎版圖文（810×1080） |
| html-ppt-xhs-pastel-card | pastel, macaron | 柔和馬卡龍慢生活 — 奶油底 + 柔光 blob + Playfair 斜體 |
| html-ppt-xhs-white-editorial | 白底雜誌, 雜誌風 | 白底雜誌風 — 純白 + 10 色彩虹 bar + 紫藍綠橙粉漸變 |
| html-ppt-dir-key-nav-minimal | minimal keynote, 極簡 | 8 頁極簡方向鍵 keynote — 每頁獨立單色（靛/奶/絳/翠/灰/紫/白/炭） |
場景簡報（9 個）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| html-ppt-taste-editorial | — | 編輯極簡 — 暖奶油 + serif display + hairline rules |
| html-ppt-taste-brutalist | — | 戰術遙測/CRT — 木炭幻燈片 + monospace + hard rectangles |
| html-ppt-graphify-dark-graph | 知識圖譜, graph deck | 暗底知識圖譜 — 深夜漸變 + blur orbs + SVG 力導向圖 |
| html-ppt-knowledge-arch-blueprint | architecture, blueprint | 奶油藍圖架構 — 奶油紙 #F0EAE0 + 銹紅 #B5392A + 藍圖網格 |
| html-ppt-hermes-cyber-terminal | terminal review, cli review | 暗終端 honest-review — 賽博網格 + CRT 暗角 + 掃描線 |
| html-ppt-obsidian-claude-gradient | github dark, developer tutorial | GitHub 暗紫漸變 — #0d1117 + 紫藍 radial 環境光 |
| html-ppt-testing-safety-alert | safety alert, incident | 紅琥珀警示 — hazard 條紋 + 紅色刪除線 + L1/L2/L3 tier |
| weekly-update | weekly update, team update | 團隊狀態更新 — shipped/in flight/blocked/metrics/asks |
| replit-deck | replit deck, replit slides | Replit Slides 風格 — 8 種獨特視覺方向可選 |
設計模板（4 個）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| editorial-burgundy-principles-template | editorial burgundy, studio salon | 酒紅/粉紅/啞金 — 高端工作室宣言簡報 |
| after-hours-editorial-template | after hours, dark fashion | 暗黑編輯 — haute couture 三頁電影故事板 |
| open-design-landing-deck | slide deck, 演示文稿 | Atelier Zero — warm-paper + italic-serif emphasis |
| kami-deck | kami deck, 紙 deck | 紙質印刷級 — warm parchment + ink-blue accent |
Zhangzara 風格系列（28 個）
每個都係獨立視覺風格，觸發方式：「用 zhangzara-[風格名] 做簡報」
| 風格 | 觸發關鍵字 | 視覺特徵 | 適用場景 |
|---|---|---|---|
| 8-Bit Orbit | 8-bit-orbit | 像素霓虹街機 + 深海軍藍 | 遊戲、科技 |
| Biennale Yellow | biennale-yellow | 太陽黃 + 羊皮紙 + 深靛藍 serif | 藝術展覽 |
| BlockFrame | block-frame | 新粗野 + 粉彩色塊 + 粗黑邊框 | 大膽衝擊 |
| Blue Professional | blue-professional | 奶油紙 + 電光鈷藍 | 商務專業 |
| Bold Poster | bold-poster | Shrikhand 大字體 + 火紅 accent | 活動宣傳 |
| Broadside | broadside | 暗黑帆布 + 火焰橙 + 雙語排版 | 深度嚴肅 |
| Capsule | capsule | 藥丸形狀卡片 + 粉彩 palette | 年輕活潑 |
| Cartesian | cartesian | 暖中性 + Playfair serifs | 學術安靜 |
| Cobalt Grid | cobalt-grid | 鈷藍斜體 + 方格紙 + glitch 裝飾 | 技術工程 |
| Coral | coral | 奶油珊瑚 + 近黑 + Bebas Neue | 大膽圖形 |
| Creative Mode | creative-mode | 奶油紙 + 多色（綠粉橙黃）+ Archivo Black | 創意多用途 |
| Daisy Days | daisy-days | 手繪雛菊/星星/彩虹 | 溫馨友好 |
| Editorial Tri-Tone | editorial-tri-tone | 三色（粉/芥末/酒紅）+ Bricolage | 高端品牌 |
| Grove | grove | 森林綠 + 奶油字體 + Playfair | 自然有機 |
| Long Table | long-table | 奶油鏽紅 + grotesk 標題 + 燭台排版 | 餐飲社交 |
| Mat | mat | 深鼠尾草 + 骨紙 + burnt-orange | 中世紀現代 |
| Monochrome | monochrome | 象牙紙 + 全黑 + Lora serif | 極簡高端 |
| Neo-Grid Bold | neo-grid-bold | 新粗野 + 霓虹黃 accent | 前衛衝擊 |
| People's Platform | peoples-platform | 活動海報（藍/橙/紅）+ Alfa Slab | 社會公益 |
| Pin & Paper | pin-and-paper | 黃紙 + 安全別針插圖 + Caveat 手寫 | DIY 手工 |
| Pink Script | pink-script | 黑底 + 熱粉 + 珍珠奶油 + Instrument Serif | 晚間奢華 |
| Playful | playful | 暖桃色 + Syne display | 獨立品牌 |
| Raw Grid | raw-grid | 新粗野 + 厚邊框 + 偏移陰影 | 粗野個性 |
| Retro Windows | retro-windows | Win95 chrome + MS Sans Serif + 像素排版 | 懷舊科技 |
| Retro Zine | retro-zine | 米色紙 + 綠色 + riso 印刷風 | 獨立出版 |
| Sakura Chroma | sakura-chroma | 日本復古卡帶包裝 + 彩虹緞帶 | 日系復古 |
| Scatterbrain | scatterbrain | Post-it 便利貼 + Caveat 手寫 | 頭腦風暴 |
| Signal | signal | 海軍藍 + 骨紙 + 啞光金 | 機構權威 |
| Soft Editorial | soft-editorial | Cormorant Garamond + 鼠尾草/粉紅/檸檬 | 溫和優雅 |
| Stencil & Tablet | stencil-tablet | 模版切割標題 + 六色大地 | 考古歷史 |
| Studio | studio | 黑底 + 電光黃字體 | 高壓能量 |
| Vellum | vellum | 海軍藍 + 暖黃 Cormorant italic + 塵青色 | 學術古典 |
🌐 網頁/落地頁類（12 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| web-prototype | prototype, mockup, landing | 通用桌面網頁原型 — 單文件 HTML + seed template |
| saas-landing | saas landing, marketing page | SaaS 落地頁 — hero + features + social proof + pricing + CTA |
| pricing-page | pricing, pricing page | 定價頁 — header + plan tiers + comparison table + FAQ |
| waitlist-page | waitlist page, coming soon | 預發布落地頁 — email capture + brand logo |
| open-design-landing | landing page, 落地頁 | Atelier Zero 編輯風落地頁 — Monocle/Apartments 視覺 |
| kami-landing | kami, 紙 | 紙質印刷級單頁 — warm parchment + serif accents |
| dating-web | dating app, matchmaking | 交友/配對網站 — left rail + ticker bar + community signals |
| web-prototype-taste-brutalist | — | 瑞士工業印刷 — newsprint + monolithic black grotesque |
| web-prototype-taste-editorial | — | 編輯極簡 — serif display + grotesque body + 1px hairline |
| web-prototype-taste-soft | — | Apple 級柔和 — silver/cream + squircle radii + subtle shadows |
| social-carousel | social carousel, instagram | 社交媒體輪播 — 1080×1080 三卡片 cinematic panels |
| live-artifact | live artifact, live dashboard | 可刷新/可審計 artifact — connector/local data backed |
📊 儀表板類（9 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| dashboard | dashboard, admin panel | 管理/分析儀表板 — 固定左側欄 + top bar + KPI grid |
| kanban-board | kanban, task board | 看板/任務板 — To do / In progress / In review / Done |
| live-dashboard | team dashboard, notion dashboard | Notion 風格團隊儀表板 — KPIs + activity + team members |
| social-media-dashboard | social media dashboard | 創作者社交分析 — 平台切換（X/LinkedIn/YouTube/TikTok） |
| github-dashboard | github dashboard, repo dashboard | GitHub 倉庫分析 — stars/forks/contributors/issues/PRs |
| flowai-live-dashboard-template | flowai dashboard | FlowAI 團隊管理 — 三 tabs（Members/Details/Activity） |
| trading-analysis-dashboard-template | trading analysis dashboard | 專業交易分析 — light/dark 切換 + market panel + charts |
| social-media-matrix-tracker-template | social media matrix | 社媒矩陣數據追蹤 — cinematic data-driven UI |
| dating-web | dating app, matchmaking | 交友/配對儀表板 — left rail + ticker bar |
📱 移動應用類（2 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| mobile-app | mobile app, ios app | iPhone 15 Pro 像素精確框架 — 複製 seed app 文件 |
| mobile-onboarding | mobile onboarding | 多屏新手引導 — splash → value-prop → sign-in |
🎨 視覺/動畫/多媒體類（7 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| hyperframes | hyperframes, html video | 視頻合成 — 動畫/標題卡/字幕/語音/audio-reactive |
| motion-frames | motion design, animated hero | CSS 動畫設計 — 旋轉字體環/動畫地球儀/跳動計數器 |
| audio-jingle | music, jingle, bed | 音頻生成 — jingles/音效/配音（Suno V5/Udio/Stable Audio） |
| video-shortform | video, clip, shortform | 短視頻 — 3-10 秒產品展示/teaser/ambient loops |
| image-poster | poster, key art, illustration | 單圖海報 — gpt-image-2 默認，支援多 provider |
| sprite-animation | sprite animation, pixel art | 像素精靈動畫 — cream stage + bold year + pixel character |
| hatch-pet | hatch a pet, codex pet | 動畫寵物精靈圖 — create/repair/validate/package |
🔍 評審/審核類（2 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| critique | critique, design review, 5 维度评审 | 5 維度設計評審 — 哲學/層級/細節/功能/創新（0-10 分）+ 雷達圖 |
| pptx-html-fidelity-audit | pptx fidelity, ppt 跑掉 | PPTX vs HTML 審計 — 布局/內容漂移檢測 + 修復指南 |
📝 文檔/模板類（10 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| docs-page | docs, documentation | 文檔頁 — inline-start nav + scrollable article + inline-end TOC |
| blog-post | blog, blog post, article | 長篇博客 — masthead + hero + article body + pull quotes |
| meeting-notes | meeting notes, minutes | 會議記錄 — title bar + attendees + agenda + decisions + action items |
| hr-onboarding | onboarding, new hire | 新員工入職 — first week + buddy + manager + learning track |
| email-marketing | email, newsletter | 品牌產品發布郵件 — masthead + wordmark + hero + CTA |
| eng-runbook | runbook, ops doc | 工程運維手冊 — service overview + alerts + copy-paste commands |
| design-brief | design brief, ilang brief | 設計簡報解析 — I-Lang protocol → concrete design spec |
| digital-eguide | e-guide, digital guide | 電子指南 — cover + what's inside stats + table of contents |
| pm-spec | prd, spec, product spec | 產品規格/PRD — problem + metrics + scope + user stories + rollout |
| invoice | invoice, bill | 可打印發票 — sender/recipient + line items + tax + totals |
💰 金融/商業類（5 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| dcf-valuation | dcf, discounted cash flow | DCF 估值 — 現金流預測 + 內在價值分析 |
| finance-report | financial report, quarterly report | 財務報告 — KPIs + revenue/burn charts + P&L summary |
| ib-pitch-book | ib pitch book, investment banking | 投行策略簡報 — trading comps + precedent transactions + football field |
| team-okrs | okr, okrs, key results | OKR 追蹤 — quarter banner + objectives + progress bars + owners |
| clinical-case-report | case report, soap note | 醫療案例報告 — SOAP 格式 + clinical rounds 標準 |
🔗 Orbit 信息匯總類（5 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| orbit-general | orbit, daily digest | 通用每日匯總 — 2+ connectors connected 時自動選中 |
| orbit-github | github briefing, pr digest | GitHub PR/issue 匯總 — 唯一/首選 connector 時選中 |
| orbit-gmail | gmail briefing, inbox digest | Gmail 收件箱匯總 — 唯一/首選 connector 時選中 |
| orbit-linear | linear briefing, issue digest | Linear issue 匯總 — 唯一/首選 connector 時選中 |
| orbit-notion | notion briefing, doc digest | Notion 文檔匯總 — 唯一/首選 connector 時選中 |
🛠️ 工具/實用類（4 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| tweaks | tweaks, variants | 實時參數控制面板 — accent color/type scale/density/motion |
| wireframe-sketch | wireframe, sketch | 手繪線框圖 — graph-paper + marker/pencil tone + tab labels |
| last30days | last 30 days, recent sentiment | 近 30 天社區趨勢 — what people saying now |
| x-research | x research, twitter sentiment | X/Twitter 輿情研究 — market/company/product/community discourse |
🎮 遊戲/互動類（1 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| gamified-app | gamified app, habit tracker | 遊戲化手機應用 — three phone frames on dark showcase stage |
🏢 企業協作/其他（2 個技能）
| 技能 | 觸發關鍵字 | 說明 |
|---|---|---|
| swiss-user-research-video-template | swiss user research | 瑞士風格用戶研究 — warm-paper editorial aesthetics |
| magazine-poster | magazine poster, editorial poster | 編輯風格海報 — newsprint + dateline + oversized serif headline |
使用方式
自然語言觸發
直接描述需求：
幫我整一個 seed round 嘅 pitch deck
做一個 SaaS landing page，用 brutalist 風格
評審下剛才個設計
用 zhangzara-studio 風格做一個品牌介紹簡報
指定設計風格
146 個品牌設計系統：
| 類型 | 例子 |
|---|---|
| 科技品牌 | Apple、Vercel、Stripe、Linear、Figma、Cursor |
| 媒體品牌 | Monocle、WIRED、Kinfolk |
| 設計風格 | Burgundy Editorial、Atelier Zero、Kami（紙） |
用 Stripe 風格整 landing page
用 Apple 風格做 pitch deck
工作流
1. 生成 → 「幫我整一個 seed round pitch deck」
2. 評審 → 「critique / 5 维度评审」
3. 修改 → 根據評審意見迭代
4. 循環 → 直到滿意