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