技能系統總覽
Open Design 提供 118 個技能，覆蓋 13 大類別，每個技能都係單文件 HTML artifact，可以由你現有的 coding agent 直接執行。
使用方式：用自然語言描述你想做嘅嘢，我會自動匹配對應技能；或者直接指定技能名稱。
📊 簡報/演示類（54 個）
最大嘅技能家族。涵蓋投資者路演、產品發布、週報、技術分享、小紅書貼文、以及 32 個 Zhangzara 設計風格。
核心簡報
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| html-ppt | ppt, deck, slides | HTML 簡報工作室（多風格基礎版） |
| html-ppt-pitch-deck | pitch deck, fundraising | 10 頁投資者路演簡報 |
| guizang-ppt | ppt, deck, slides | 歸藏雜誌風 PPT（WebGL 流體背景） |
| simple-deck | deck, slides, ppt | 橫向滑動簡報（最簡版） |
| html-ppt-presenter-mode-reveal | presenter mode, 演講者模式 | 演講者模式（5 套主題 + 逐字稿） |
場景簡報
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| html-ppt-product-launch | product launch, keynote | 產品發布簡報 |
| html-ppt-tech-sharing | tech sharing, 技術分享 | 技術分享簡報 |
| html-ppt-weekly-report | weekly report, 週報 | 團隊週報簡報 |
| html-ppt-course-module | course module, workshop | 在線課程/工作坊模塊 |
| html-ppt-xhs-post | 小紅書, xhs | 小紅書 9 頁 3:4 豎版圖文 |
| html-ppt-xhs-pastel-card | pastel, macaron, lifestyle | 柔和馬卡龍風格簡報 |
| html-ppt-xhs-white-editorial | 白底雜誌, 雜誌風 | 白底雜誌風簡報 |
| html-ppt-testing-safety-alert | safety alert, incident | 紅琥珀警示簡報 |
| html-ppt-graphify-dark-graph | 知識圖譜, graph deck | 暗底知識圖譜簡報 |
| html-ppt-knowledge-arch-blueprint | architecture, blueprint | 奶油藍圖架構簡報 |
| html-ppt-obsidian-claude-gradient | github dark, developer tutorial | GitHub 暗紫漸變簡報 |
| html-ppt-hermes-cyber-terminal | terminal review, cli review | 暗終端 honest-review |
| html-ppt-dir-key-nav-minimal | minimal keynote, 極簡 | 8 頁極簡方向鍵 keynote |
| html-ppt-taste-editorial | — | 編輯極簡風格簡報 |
| html-ppt-taste-brutalist | — | 粗野主義/終端風格簡報 |
| weekly-update | weekly update, team update | 團隊狀態更新簡報 |
| replit-deck | replit deck, replit slides | Replit Slides 風格簡報 |
| editorial-burgundy-principles-template | editorial burgundy, studio salon | 酒紅/粉色編輯工作室簡報 |
| after-hours-editorial-template | after hours, dark fashion | 暗黑編輯風三頁故事板 |
| open-design-landing-deck | slide deck, 演示文稿 | Atelier Zero 視覺語言簡報 |
| kami-deck | kami deck, 紙 deck | 紙質印刷級簡報 |
| swiss-creative-mode-template | swiss creative mode | 瑞士編輯風 + 幾何色塊 |
Zhangzara 設計風格系列（32 個）
32 個獨特設計風格，每個都有完整排版系統同視覺語言：
| 風格 | 適合場景 |
|---|---|
| 8-Bit Orbit | 像素霓虹街機風，遊戲/科技主題 |
| Biennale Yellow | 太陽黃 + 羊皮紙，藝術/展覽 |
| BlockFrame | 新粗野主義 + 粉彩色塊，大膽/衝擊 |
| Blue Professional | 奶油紙 + 鈷藍，專業/商務 |
| Bold Poster | 編輯海報 + Shrikhand 大字體，活動/宣傳 |
| Broadside | 暗黑帆布 + 火焰橙，深度/嚴肅 |
| Capsule | 藥丸形狀卡片 + 粉彩流行，活潑/年輕 |
| Cartesian | 溫暖中性 + 古典 Playfair，學術/沉靜 |
| Cobalt Grid | 鈷藍斜體 + 方格紙，技術/工程 |
| Coral | 奶油珊瑚 + Bebas Neue，大膽/圖形 |
| Creative Mode | 奶油紙 + 多色強調，創意/多用途 |
| Daisy Days | 粉彩雛菊 + 手繪，溫馨/可愛 |
| Editorial Tri-Tone | 三色編輯（粉/芥末/酒紅），高端品牌 |
| Grove | 森林綠 + 奶油字體，自然/有機 |
| Long Table | 奶油鏽紅晚餐俱樂部，餐飲/社交 |
| Mat | 深鼠尾草 + 骨紙，中世紀現代 |
| Monochrome | 象牙紙 + 全黑字體，極簡/高端 |
| Neo-Grid Bold | 新粗野主義 + 霓虹黃，前衛/衝擊 |
| People's Platform | 活動海報能量（藍/橙/紅），社會/公益 |
| Pin & Paper | 黃紙 + 安全別針插圖，DIY/手工 |
| Pink Script | 黑底 + 熱粉 + 珍珠奶油，晚間/奢華 |
| Playful | 暖桃色 + Syne，友好/獨立品牌 |
| Raw Grid | 厚邊框 + 粉/鼠尾草/墨，粗野/個性 |
| Retro Windows | Windows 95 復古，懷舊/科技 |
| Retro Zine | 米色紙 + riso 印刷，獨立出版 |
| Sakura Chroma | 日本復古卡帶包裝，日系/復古 |
| Scatterbrain | 便利貼 + 手寫體，頭腦風暴 |
| Signal | 海軍藍 + 啞光金，機構/權威 |
| Soft Editorial | Garamond + 鼠尾草/粉紅，溫和/優雅 |
| Stencil & Tablet | 模版切割 + 六色大地，考古/歷史 |
| Studio | 黑底 + 電光黃，高壓/能量 |
| Vellum | 海軍藍 + 暖黃襯線，學術/古典 |
💡 使用方式：「用 Zhangzara Studio 風格做一個 seed round pitch deck」
🌐 網頁/落地頁類（12 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| web-prototype | prototype, mockup, landing | 通用桌面網頁原型 |
| web-prototype-taste-brutalist | — | 瑞士工業印刷風格網頁 |
| web-prototype-taste-editorial | — | 編輯極簡風格網頁 |
| web-prototype-taste-soft | — | Apple 級柔和網頁 |
| saas-landing | saas landing, marketing page | SaaS 落地頁（hero + features + pricing + CTA） |
| open-design-landing | landing page, 落地頁 | Atelier Zero 編輯風落地頁 |
| kami-landing | kami, 紙 | 紙質印刷級單頁 |
| pricing-page | pricing, plans | 定價頁面（plan tiers + comparison + FAQ） |
| waitlist-page | waitlist page, coming soon | 預發布落地頁（email capture） |
| dating-web | dating app, matchmaking | 交友/配對網站 |
| social-carousel | social carousel, instagram | 社交媒體輪播（1080×1080 三卡片） |
| live-artifact | live artifact, live dashboard | 可刷新、可審計嘅實時數據 artifact |
📊 儀表板/數據面板類（9 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| dashboard | dashboard, admin panel, analytics | 管理/分析儀表板（左側欄 + KPI cards） |
| kanban-board | kanban, task board, sprint board | 看板/任務板（To do / In progress / Done） |
| live-dashboard | team dashboard, notion dashboard | Notion 風格團隊儀表板 |
| social-media-dashboard | social media dashboard, creator dashboard | 社交媒體分析儀表板（X/LinkedIn/YouTube 切換） |
| github-dashboard | github dashboard, repo dashboard | GitHub 倉庫分析儀表板 |
| flowai-live-dashboard-template | flowai dashboard, team dashboard | FlowAI 團隊管理儀表板（三 tabs） |
| trading-analysis-dashboard-template | trading analysis, wall street | 專業交易分析儀表板 |
| social-media-matrix-tracker-template | social media matrix tracker | 社媒矩陣數據追蹤面板 |
| dating-web | dating app, matchmaking | 交友/配對儀表板 |
📱 移動應用類（2 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| mobile-app | mobile app, ios app, android app | iPhone 15 Pro 框架內嘅手機應用原型 |
| mobile-onboarding | mobile onboarding, ios onboarding | 多屏手機新手引導流程（splash → value → sign-in） |
🎨 視覺/動畫/多媒體類（7 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| hyperframes | hyperframes, html video | 視頻合成、動畫、標題卡、字幕、語音 |
| motion-frames | motion design, motion graphic, animated hero | 單幀 CSS 動畫設計（旋轉字體環、動畫地球儀） |
| audio-jingle | music, jingle, bed | 音頻生成（jingles、音效、配音） |
| video-shortform | video, clip, shortform | 短視頻生成（3-10 秒產品展示/teaser） |
| image-poster | poster, key art, illustration | 單圖海報/關鍵藝術/編輯插圖 |
| sprite-animation | sprite animation, pixel art animation | 像素精靈動畫（full-bleed 奶油舞台） |
| hatch-pet | hatch a pet, codex pet | 創建/修復/驗證 Codex 兼容嘅動畫寵物精靈圖 |
🔍 評審/審核類（2 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| critique | critique, design review, design audit, 5 维度评审 | 5 維度專家設計評審（哲學/層級/細節/功能/創新，含雷達圖） |
| pptx-html-fidelity-audit | pptx fidelity, pptx audit, ppt 跑掉 | 審計 python-pptx 導出同源 HTML 之間嘅差異 |
📝 文檔/模板類（10 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| docs-page | docs, documentation, guide | 文檔頁面（內聯導航 + 滾動文章 + TOC） |
| blog-post | blog, blog post, article | 博客文章（masthead + hero + article body + pull quotes） |
| meeting-notes | meeting notes, minutes, 1:1 notes | 會議記錄（attendees + agenda + decisions + action items） |
| hr-onboarding | onboarding, new hire, first week | 新員工入職計劃（first week + buddy + learning track） |
| email-marketing | email, email template, newsletter | 品牌產品發布郵件（masthead + hero + headline + CTA） |
| eng-runbook | runbook, ops doc, on-call | 工程運維手冊（service overview + alerts + procedures） |
| design-brief | design brief, create a design brief | 解析 I-Lang 協議格式嘅設計簡報為具體 spec |
| digital-eguide | e-guide, digital guide, lead magnet | 兩頁電子指南預覽（cover + table of contents） |
| pm-spec | prd, spec, product spec | 產品規格/PRD（problem + metrics + scope + user stories） |
| invoice | invoice, bill, billing statement | 可打印發票（sender/recipient + line items + tax + totals） |
💰 金融/商業類（5 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| dcf-valuation | dcf, discounted cash flow, intrinsic value | DCF 現金流估值 + 內在價值分析 |
| finance-report | financial report, quarterly report | 季度/月度財務報告（KPIs + revenue chart + P&L） |
| ib-pitch-book | ib pitch book, investment banking pitch | 投行策略簡報（trading comps + precedent transactions + valuation） |
| team-okrs | okr, okrs, key results | OKR 追蹤器（quarter banner + objectives + progress bars） |
| clinical-case-report | case report, case presentation, soap note | 結構化醫療案例報告（SOAP 格式） |
🔗 Orbit 信息匯總類（5 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| orbit-general | orbit, daily digest, morning briefing | 通用每日匯總（2+ 個 connector 連接時） |
| orbit-github | github briefing, github digest, pr digest | GitHub PR/issue 匯總 |
| orbit-gmail | gmail briefing, inbox digest, email summary | Gmail 收件箱匯總 |
| orbit-linear | linear briefing, linear digest, issue digest | Linear 工單匯總 |
| orbit-notion | notion briefing, notion digest, doc digest | Notion 文檔匯總 |
🛠️ 工具/實用類（4 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| tweaks | tweaks, variants | 為任何 HTML artifact 添加實時參數控制面板（accent color, type scale, density, motion） |
| wireframe-sketch | wireframe, sketch, lo-fi mockup | 手繪風格線框圖（graph-paper 背景 + marker/pencil 色調） |
| last30days | last 30 days, last30days, recent sentiment | 近 30 天社區/社交趨勢研究 |
| x-research | x research, twitter sentiment | X/Twitter 公眾輿情研究（市場/公司/產品/社區） |
🎮 遊戲/互動類（1 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| gamified-app | gamified app, habit tracker, rpg app | 多幀遊戲化手機應用原型（cover → progress → stats） |
📋 其他/雜項類（3 個）
| 技能 | 觸發關鍵字 | 用途 |
|---|---|---|
| swiss-user-research-video-template | swiss user research | 瑞士風用戶研究敘事視頻模板 |
| magazine-poster | magazine poster, editorial poster, newsprint | 編輯風格海報（newsprint 紙 + oversized serif headline） |
| tweaks | tweaks, variants | 實時參數控制面板 |
使用指南
基本用法
用自然語言描述你想做嘅嘢：
幫我整一個 pitch deck
做一個 SaaS landing page
評審下剛才個設計
指定技能
用 critique 技能評審
用 web-prototype-taste-editorial 整網頁
用 zhangzara-studio 風格做簡報
指定設計風格
Open Design 提供 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 / 評審下剛才個設計」
3. 修改 → 「根據評審意見修改」
4. 迭代 → 重複 2-3 直到滿意