範本 · Prototype

59 Prototype.

Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.

場景
  1. 001 部落格文章 長篇文章/部落格——包含頁首、主圖佔位符、帶插圖和引言的正文、作者署名及相關文章推薦。適用於需求中包含'部落格'、'文章'、'貼文'、'隨筆'或'案例研究'等關鍵詞時。 原型 行銷
  2. 002 臨床病例報告 為臨床查房、病例討論會和醫療文件生成結構化病例報告。支援生成SOAP格式或敘述性病例報告,包含生理準確的生命徵象、實驗室數據和實證醫療計畫。 原型 醫療
  3. 003 Codex 互動式能力地圖 將長文、討論串、備忘錄或產品說明轉換為 Codex 風格的可點擊能力地圖,包含工作流程循環、使用案例矩陣和響應式詳情面板。 原型 知識
  4. 004 設計評審 對專案中的任何 HTML 成品進行 5 維度專家設計評審——哲學/視覺層級/細節/功能性/創新性,每項評分 0-10。輸出包含雷達圖、有據可依的評分以及三個清單(保留/修復/快速優化)的獨立 HTML 報告。 原型 設計
  5. 005 儀表板 單檔 HTML 管理/分析儀表板。固定左側邊欄,頂部使用者/搜尋列,主區域顯示 KPI 卡片網格和圖表。適用於需要『儀表板』、『管理後台』、『數據分析』或『控制面板』畫面的場景。 原型 營運
  6. 006 資料視覺化報告 將 CSV、Excel 或 JSON 資料轉換為精美的視覺化報告頁面。 原型 金融
  7. 007 約會網站 消費級約會/配對儀表板,包含左側導航欄、社群動態跑馬燈、核心KPI指標、30天互相配對長條圖和配對率趨勢模組。編輯風格排版,克制的強調色。適用於約會網站、配對服務、社群儀表板或社交網路等消費類產品介面。 原型 個人
  8. 008 DCF估值 為上市公司提供現金流折現估值和內在價值分析。適用於DCF、公允價值、內在價值、目標價、低估或高估分析等需求。 原型 設計
  9. 009 裝置 3D 展示 靜態 iPhone 和 MacBook 3D 風格展示,支援在螢幕上嵌入真實 HTML、玻璃鏡頭折射效果和 360 度轉盤組合。 原型 產品
  10. 010 數位電子指南 雙頁數位電子指南預覽——第1頁為封面(顯示標題、作者、『內含什麼』統計資訊、目錄預覽);第2頁為內頁(課程正文含引用語和步驟清單)。生活風格/創作者品牌調性。適用於需要『電子指南』、『數位指南』、『lookbook』、『引流素材』、『創作者指南』、『手冊』或『PDF指南』的需求。 原型 行銷
  11. 011 文件頁面 文件頁面 — 側邊導覽、可捲動內文和目錄。當需求提到'文件'、'指南'、'API 參考'或'教學'時使用。 原型 工程
  12. 012 電子郵件行銷 品牌產品發布電子郵件範本,包含報頭、主圖、斜體強調標題、正文、主要行動呼籲按鈕和規格表格,採用HTML置中單欄佈局。 原型 行銷
  13. 013 工程運維手冊 工程運維手冊 — 包含服務概覽、告警表、儀表板連結、常用指令操作步驟、值班輪換和事故回應清單。適用於需要運維文件、值班指南、SRE 文件或運維手冊的場景。 原型 工程
  14. 014 財務報告 季度/月度財務報告——包含關鍵指標的報頭、收入與消耗圖表、損益彙總表、重點摘要和展望段落。當需求提到『財務報告』、『Q3報告』、『MRR審查』、『P&L』或『財報』時使用。 原型 金融
  15. 015 Flowai 即時儀表板範本 FlowAI 風格的團隊管理儀表板,包含三個分頁(團隊成員、團隊詳情、活動記錄)、KPI 統計列、成員表格、角色分佈長條圖、線上狀態和活動趨勢圖、頂級貢獻者面板,支援亮暗主題切換、圖表懸停提示、面板點擊縮放和 CSV 匯出功能。 原型 營運
  16. 016 遊戲化應用程式 三屏手機原型展示遊戲化應用介面:封面海報、每日任務與經驗值進度條、任務詳情。適用於遊戲化應用、習慣追蹤、RPG 風格生活應用、升級系統、每日任務、XP/連擊應用等需求。 原型 個人
  17. 017 GitHub 儀表板 GitHub 儲存庫分析儀表板 — 星標、分支、貢獻者、議題、拉取請求、近期活動和主要貢獻者。適用於 GitHub 儲存庫儀表板、開源成長報告、儲存庫健康頁面或 GitHub 分析檢視。 原型 營運
  18. 018 員工入職 單頁新進員工入職計畫——第一週日程安排、夥伴+主管介紹、學習路徑、設備清單以及「完成標誌」目標。當需求提及「入職」、「新進員工」、「第一週計畫」或「onboarding」時使用。 原型 人力資源
  19. 019 Html Ppt Taste Brutalist 16:9 HTML 簡報,戰術遙測 / CRT 終端機風格。失活 CRT 炭黑背景、白色螢光等寬字型、警示紅強調色、掃描線疊加、ASCII 語法,密度優先於裝飾。提取自 Leonxlnx/taste-skill `brutalist-skill`(戰術遙測模式)。 原型 設計
  20. 020 Html Ppt Taste Editorial 16:9 HTML 簡報,編輯極簡風格。溫暖奶油色投影片,襯線標題 + 無襯線內文,細線規則,等寬中繼資料,寬敞留白,單一強調色。萃取自 Leonxlnx/taste-skill `minimalist-skill`。 原型 設計
  21. 021 發票 可列印的發票頁面——包含寄件人和收件人資訊區塊、項目明細表、稅費明細、總計和付款說明。當需求提到'invoice'、'bill'、'billing statement'或'發票'時使用。 原型 金融
  22. 022 Kami Landing 產生印刷級單頁紙質文件——溫暖羊皮紙底色、墨藍強調色、單一襯線字重,無斜體,無冷灰。輸出呈現專業白皮書或工作室單頁效果,而非應用程式 UI。原生多語言支援(EN · zh-CN · ja)。單個獨立 HTML 檔案,零相依性。 原型 行銷
  23. 023 Kami 羊皮紙文件 溫暖的羊皮紙畫布 (#f5f4ed),單色墨藍色強調 (#1B365D),一種襯線字型系列,編輯級排版。 原型 個人
  24. 024 看板 看板/任務面板,包含多個欄位(待辦/進行中/審核中/已完成)、可拖曳樣式的卡片、成員頭像、泳道和頂部篩選列。當需求中提到'kanban'、'task board'、'sprint board'、'trello'、'看板'時使用。 原型 營運
  25. 025 最近30天 最近30天的社群和社交趨勢研究。適用於了解當前輿論、近期情緒、社群反應、社交證明、發布反饋、趨勢掃描或最近30天的背景資訊。 原型 設計
  26. 026 雜誌文章 Huashu / huashu-md-html 風格的雜誌文章版面,可將 Markdown 或筆記轉換為精緻的長篇 HTML 文章。 原型 行銷
  27. 027 雜誌海報 報紙風格的編輯海報,包含新聞紙材質、日期線、超大襯線標題(帶刪除線和斜體)、雙欄正文、6個編號章節及引用註釋。適合需要雜誌海報、編輯排版、新聞紙風格或宣言設計的場景。 原型 行銷
  28. 028 行銷海報 直式海報或限時動態風格分享圖,具有強烈視覺衝擊力。 原型 行銷
  29. 029 會議紀要 會議記錄頁面——包含與會者標題列、議程清單、決策事項區塊、帶負責人和日期的行動項表格,以及'下次會議'頁尾。適用於需要'會議紀要'、'會議記錄'、'1:1 筆記'、'全員會議總結'或'minutes'的場景。 原型 營運
  30. 030 行動應用程式 在頁面中渲染於像素級精確的 iPhone 15 Pro 框架內的行動應用程式畫面。透過複製種子檔案 assets/template.html 並貼上 references/layouts.md 中的一個畫面原型來建構。當需求提到「行動應用程式」、「iOS 應用程式」、「Android 應用程式」、「手機畫面」或「應用程式 UI」時使用。 原型 設計
  31. 031 行動端引導 多螢幕行動引導流程,呈現為三個並排的手機框架——啟動頁、價值主張、登入頁。包含狀態列、滑動指示點和主要CTA按鈕。適用於需要『行動端引導』、『iOS引導』、『手機註冊』或『移动端引导』的場景。 原型 設計
  32. 032 現代履歷 現代簡約風格履歷,單頁 A4 格式,可列印或匯出 PDF。 原型 個人
  33. 033 Motion Frames 單幀動態設計合成,包含循環 CSS 動畫——旋轉文字環、動畫地球、計時器、視差標籤。渲染為影片封面海報,可直接導入 HyperFrames 或任何基於關鍵影格的匯出工具。適用於動態設計、動畫主視覺、循環影片、影片封面、標題卡等需求,搭配 HyperFrames 實現動態匯出。 原型 行銷
  34. 034 Open Design 著陸頁 使用 Atelier Zero 視覺語言(Monocle / Apartamento / Études 編輯拼貼風格)生成單頁編輯著陸頁。從品牌簡報填充 inputs.json,可選透過 gpt-image-2 生成 16 張拼貼素材,輸出獨立 HTML 檔案,內建捲動動畫和黏性導航。 原型 行銷
  35. 035 Orbit 綜合簡報 當使用者連接兩個或更多連接器時,Orbit 自動調用此技能,彙總過去 24 小時內所有已認證連接器(GitHub、Linear、Notion、Slack、飛書、日曆、Gmail、雲端硬碟、Sentry、Vercel 等)的活動資料,在「我的設計」頂部生成自適應網格儀表板。由 Orbit 每日摘要排程器自動觸發。 原型 軌道
  36. 036 Orbit Github 根據 GitHub 連接器自動生成每日摘要的 Orbit 技能。拉取過去 24 小時的 PR、審查請求、問題、CI 運行和合併記錄,以類似 GitHub 原生通知的佈局呈現。由 Orbit 每日摘要調度器自動調用。 原型 軌道
  37. 037 Orbit Gmail 當 Gmail 是使用者唯一連接的服務或使用者明確指定時,自動提取過去 24 小時的收件匣活動並產生每日摘要。由 Orbit 排程器自動觸發,不應手動呼叫。 原型 軌道
  38. 038 Orbit Linear 當 Linear 是用戶唯一連接的資料來源或用戶明確將每日摘要範圍限定為 Linear 時,由 Orbit 管道自動觸發。提取過去 24 小時的問題動態、狀態變更、任務分配和週期進度,並以 Linear 原生收件匣視覺語言呈現。 原型 軌道
  39. 039 Orbit Notion Open Orbit 簡報技能 — 當 Notion 是使用者唯一連接的連接器或使用者明確將每日摘要範圍限定為 Notion 時由 Orbit 管道選擇。提取過去 24 小時內使用者已認證的 Notion 連接中的文件編輯、評論、提及和資料庫列變更,並將摘要呈現為原生 Notion 頁面(標註/摺疊/資料庫表格元素)。此技能不應手動觸發 — 由 Orbit 的每日摘要排程器針對即時 Notion 資料調用。 原型 軌道
  40. 040 產品規格文件 單頁產品規格文件/PRD——包含問題定義、成功指標、範圍、使用者故事、設計筆記、上線計畫、待解決問題。適用於需求文件、產品規格、功能說明等場景。 原型 產品
  41. 041 價格頁面 獨立的價格頁面 — 包含頁首、方案層級、功能對比表和常見問題。適用於需要「價格」、「方案」、「訂閱層級」或「對比方案」頁面的需求。 原型 銷售
  42. 042 Reddit 貼文卡片 逼真的 Reddit 貼文卡片,帶有投票欄和留言數,適用於影片疊加層或故事分享。 原型 行銷
  43. 043 SaaS 著陸頁 單頁 SaaS 著陸頁面,包含主視覺區、功能特色、社會證明、定價方案與行動呼籲。遵循當前 DESIGN.md 的顏色/排版/版面配置規範。觸發關鍵字:"saas landing"、"marketing page"、"product landing"。 原型 行銷
  44. 044 社群媒體輪播圖 三張 1080×1080 方形社群媒體輪播卡片——三個富有電影感和品牌調性的面板,配有連貫的展示標題('繼續前進。' → '到下一個。' → '展望未來。')。每張卡片包含品牌標誌、序號/總數、說明文字和'循環'提示。適用於'輪播貼文'、'社群媒體輪播'、'Instagram 輪播'、'LinkedIn 系列'、'X 系列卡片'或'三連發'等需求。 原型 行銷
  45. 045 社群媒體儀表板 創作者社群媒體分析儀表板,單一 HTML 檔案。包含平台切換器(X / LinkedIn / YouTube / Instagram)、KPI 卡片(追蹤者數、互動率、按讚數、轉發數)、追蹤者成長圖表、本週熱門貼文預覽和熱門話題/留言側邊欄。 原型 創作者
  46. 046 Spotify 正在播放卡片 Spotify 風格的正在播放卡片,包含專輯封面、進度條和播放控制,適用於影片疊加層或個人首頁。 原型 個人
  47. 047 精靈圖動畫 像素風格的動畫解說投影片,配有奶油色背景、粗體年份顯示、像素藝術吉祥物(如花札卡、蘑菇或8位元遊戲機)、動態日文字體和時間軸條帶。純CSS動畫,無需JS,可直接錄製為直式影片。適合像素動畫、8位元解說、復古動畫等需求。 原型 行銷
  48. 048 團隊 OKR OKR 追蹤頁面——季度橫幅,三個目標及其關鍵結果進度條、負責人頭像、狀態標籤,以及「本季度概覽」側邊欄。當需求提及 OKR、關鍵結果、目標時使用。 原型 產品
  49. 049 即時調參 為任何 HTML 元件添加側面板即時控制器,可調整主題色、字體比例、密度、動效等參數,修改即時同步到 CSS 自訂屬性並儲存到 localStorage,讓使用者無需重新提示即可探索設計變體。 原型 設計
  50. 050 Twitter 分享卡片 用於搭配貼文的 Twitter 引用或資料卡片。 原型 行銷
  51. 051 候補名單頁面 簡約的預發布著陸頁,支援電子郵件收集、品牌標誌和可選裝飾層。從 DESIGN.md 讀取顏色、排版和佈局規則。適用於產品發布、Beta 測試註冊、搶先體驗計畫和獨立專案。 原型 行銷
  52. 052 網頁原型 通用桌面網頁原型。透過複製種子檔案 `assets/template.html` 並貼上 `references/layouts.md` 中的版面配置生成單一獨立 HTML 檔案。適用於著陸頁、行銷頁、文件或 SaaS 頁面的預設選項。 原型 設計
  53. 053 Web Prototype Taste Brutalist 瑞士工業印刷風格網頁原型。新聞紙畫布、黑色粗體字、溢出式數字、細線網格分隔、危險紅強調色、ASCII 語法裝飾。源自 Leonxlnx/taste-skill `brutalist-skill`(瑞士工業印刷模式)。 原型 設計
  54. 054 Web Prototype Taste 編輯風格 極簡編輯風格網頁原型。暖色單色調畫布,襯線標題配無襯線內文,1px 細線邊框,柔和粉彩色塊,大量留白,微妙動效。 原型 設計
  55. 055 Web Prototype Taste Soft Apple 等級柔和風格網頁原型。銀灰/奶油色畫布,雙邊框卡片,嵌套按鈕 CTA,大圓角,彈性動效和環境網格。基於 Leonxlnx/taste-skill 的 soft-skill 及第 4-8 節。 原型 設計
  56. 056 線框草圖 手繪風格的線框圖,包含方格紙背景、麥克筆/鉛筆質感、多標籤頁變體、便利貼註解、圖表佔位符和陰影填充。適用於「線框圖」「草圖線框」「手繪」「低保真」「白板」「草稿」「手繪原型」等需求。 原型 設計
  57. 057 X / Twitter 貼文卡片 逼真的 X 貼文卡片,包含互動指標(按讚、轉發、觀看次數),適用於影片疊加層或可分享的圖片卡片。 原型 行銷
  58. 058 X 研究 針對市場、公司、產品或社群議題進行 X/Twitter 公眾情緒研究。當需要了解 X 或 Twitter 上的輿論、加密社群情緒、專家觀點或股票、產業、公司、產品、市場事件的社群反應時使用。 原型 設計
  59. 059 小紅書卡片 小紅書風格的知識卡片,以可滑動的多卡輪播形式呈現。 原型 行銷