2025-7-31 杰睿
Github 的設計系統是開發者設計的絕佳資源。以下是一些明確針對開發者角色定制的原則：
因此，秉承這些原則，以下是我團隊今年發布的一些關鍵界面。需要注意的是，我的團隊只有 4 個人（2 名設計師和 2 名開發人員），我們是一家節奏飛快的初創公司。我們的設計最初都是以 MVP 的形式發布的，上線后會進行迭代，并且經?；诂F有系統進行構建，從 0 到 1，并盡快獲得真正的外部驗證。本文中的所有設計均由我和Will Rust共同創作。設計是一項團隊運動。
我將介紹的屏幕：
作為終端用戶，我們現在對聊天界面非常熟悉。作為開發者，使用 LLM（大型語言模型）進行聊天，與Chat GPT、Duck Assist或Perplexity等 AI 平臺上的終端用戶體驗幾乎完全相同。關鍵在于盡可能簡潔明了，并提供快速簡潔的答案。
主要區別在于，人工智能開發人員還會根據模型的速度、構建的簡易性、兼容性和部署性來評估模型。
保持與傳統搜索引擎一樣簡潔，但提供更細致的第二層信息，展現其底層運作，包括文檔鏈接、展示模型速度的基準數據，以及每個令牌成本等其他數據。以下是我們在 Modular 中解決這個問題的方法。
我們使用的UI 框架：https : //www.gradio.app/、Mantine、Tailwind
屏幕 1 — 簡單的“開始聊天”介紹屏幕，向用戶展示它的型號、運行的硬件以及處理的流量。
當然，所有內容都兼容明暗模式。以下是暗黑模式版本，我們將聊天功能嵌入到了開發者控制臺中。
屏幕 2 — 聊天結果，顯示基準數據，以及教程、代碼和部署此模型的后續步驟的鏈接。
截圖 3 — 嵌入式版本。為了實現此版本，我們使用 RAG 專門針對我們的文檔對 MAX 進行了訓練。此實驗目前僅面向內部用戶，并有望盡快發布。
AI 開發者需要做的最重要的事情之一就是評估 GenAI 模型。首先，你需要搜索模型庫——也稱為“模型花園”、“模型庫”或“模型中心”。出于市場營銷/SEO 的原因，這通常需要用戶注銷登錄，主要目的是向用戶展示你的平臺兼容的所有模型，并鼓勵他們登錄后再進行更深入的模型測試。我們的模型庫位于builds.modular.com。
這里最重要的功能本質上是搜索和過濾。你要確保用戶能夠從包含數百甚至數千個模型的龐大數據集中找到他們想要的內容。
屏幕 2 — 模型詳情頁。此頁面會告訴用戶每個模型有多少個變體，如何在本地快速運行模型，以及如何根據需要將其部署到云端的 GPU。
有一些有趣的技術細節與模型參數大小、量化、硬件兼容性等有關。但最終一切都歸結為格式塔聚類和創建正確的層次結構。
我在這里最常參考的是 Huggingface（因為他們是這個領域的領導者）、Kaggle（因為他們擁有蓬勃發展的社區）、Together AI（因為他們是企業級的）和 Replicate（因為每天 8 萬次點擊量已經很多了）：
與所有成功的 UI 一樣，設計時務必牢記用戶思維。AI 開發者在設計模型時，會考慮模型能夠完成哪些任務、模型的大小、性能以及開發者是誰。
游樂場是指專為實驗、測試和學習而設計的環境，不會影響現有系統或生產環境。對于 AI 開發者來說，更具體地說，它包括試用 AI 模型、測試提示以及微調參數等功能，無需大量的基礎設施。
我們現在才剛剛開始運行，所以我只會談論主要功能并展示一些參考。
主要特點：
這與整個控制臺體驗完美銜接。
從布局和信息架構的角度來看，這與其他桌面控制臺類似。我們使用 Tailwind、Mantine 和 ChartJS 來制作。
這里最有趣的 UI 功能是數據監控儀表盤。如果你曾經設計過企業儀表盤，那么其余部分其實都差不多——基于角色的訪問控制、計費、組織層級結構（內部成員可以邀請其他成員）、通知、設置等等。
好吧，讓我們開始討論最重要的部分——文檔！每個人都喜歡設計文檔 ;)這就是我們的文檔。這實際上是我第一次完全自主設計一個文檔網站。我們使用Docusuarus和Algolia搜索，它的用戶界面非常棒，開箱即用！
就信息架構而言，我們在這里討論了幾種方法，并歸納為兩個總體概念：
無論您選擇哪種方式，重申這一點的登錄頁面都至關重要。
我們訪問量最大的頁面是“快速入門”（這并不奇怪?。Ｎ覀冋诔掷m優化此頁面，以加快競爭速度并提高完成率。
一些參考：
正如我之前提到的，Algolia 搜索功能非常強大。它的效果如下：
食譜（或烹飪書）是一種簡單卻標準化的分步說明。它們最具交互性的形式是筆記本，每個部分都是可執行代碼。最簡單的形式是一系列包含可復制/粘貼代碼片段的說明。
正如我提到的，我們的構建過程極其迭代，所以我們的 MVP 實際上只是渲染一個 GitHub 代碼示例，并在右側標注元數據。我發現，對于這類受眾來說，越簡潔明了越好。內容本身非常密集，設計不應該過于引人注目。
這些文章的設計系統很大一部分在于如何渲染代碼，因此，擁有一個井然有序的明暗模式系統至關重要。我們使用mantine 系統來實現這一點，并在其中設置自定義顏色。您也可以參考 CLI 配色方案的最佳實踐，例如本文所示：https ://hamvocke.com/blog/lets-create-a-terminal-color-scheme/
別忘了體驗一下命令行界面 (CLI)、ASCII 字體和清晰的進度條！至于命令行界面的用戶體驗，我試著教我的工程團隊成員 10 條基本的 NNG 原則，其中最重要的一條就是“系統狀態可見性”。
我非常高興能夠構建更多工作流程并分享它們。我希望接下來專注于代理工作流程和云監控儀表板。
作為參考，以下是我為 Modular 創建的通用角色模型。目前我們的目標人物是“解決方案構建者”。
敬請關注，感謝您的閱讀
