Cursor 的圖示設計集,顯示一個新創團隊裡有設計師是一種完全不同的體驗 :馬瑞克.麥諾(Marek Minor)在部落格 Minor Adventures 花了將近一年的時間,替 Cursor 重新設計超過 600 個圖示,橫跨兩種尺寸與兩種風格,而且每一個探索版本、每一個最終定案,都是他親手畫出來的。

事情的起點是,Cursor 原本沿用 VS Code 開源圖示庫 Codicons 的一套系統,裡頭大約有四百多個圖示,但隨著公司逐漸脫離 VS Code 的生態圈,這套系統開始顯得力不從心,像是文件記錄不完整,風格也慢慢跑掉。更重要的是,團隊需要畫出全新的概念,包括AI 代理、平行與循序執行、單一與多重執行緒、不同程度的思考量、成本與運算資源,還有 Bugbot 之類的產品,都不在原有的VS Code架構裡。

麥諾主要把16px / 24px兩種圖示尺寸,分別配上 1.25px / 1.5px 的線條粗細,並特別提到 1.25px 這個數字是為了和公司自訂字體 Cursor Gothic 取得比例上的平衡,而且刻意不對齊像素,因為圖示會以各種尺寸顯示,把它們當成符號SVG,反而在各種情境下表現更好。

他也提到視覺系統背後有一套不太顯眼卻極其講究的邏輯:形狀盡量用水平、垂直與 45 度角構成,轉角統一做圓角處理,幾乎不使用自由曲線,線條端點一律是圓頭。文章裡也提到不少「光學修正」的細節,舉例來説,他會在太密的地方開一個小缺口避免視覺混亂,以及收斂處適度削薄線條來平衡份量,重疊形狀之間至少要留三個單位的間距。麥諾自己也承認,「有些拿來比較的版本,差距只有 0.25px」,而光是一個漢堡選單圖示,他就畫過 156 種版本才定案。

文章裡還提到一套叫「ship it」的自動化指令,設計師畫完圖示、發布 Figma 元件庫之後,只要一行指令就能自動編號、編譯字型、更新網站與文件,整套流程被打理得很乾淨,不太需要額外的專業知識就能持續擴充。

不過我仍覺得最打動我的,還是文章最後那句話,「儘管 Cursor 本身是一間把 AI 公司,但輪到這幾百個圖示、幾百個微小決定時,他們還是找了一個人,一筆一筆親手畫出來。」

The making of Cursor’s icons