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