技能系統總覽
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 直到滿意