Juxt
JUXT Design
文章 · 收錄於 2026.08
MGN-BLOG-CURSOR-I
索引 · 部落格

Cursor 的新圖示,不只是換皮

1 分鐘閱讀

很多產品的 icon 都是這樣長出來的:先借一套現成的,之後缺什麼就補什麼。久而久之,同一個產品裡會出現幾種不同的線條、圓角和比例。每一個 icon 單獨看好像沒什麼,但放在一起,就會有一種「不是同一個人畫的」的感覺。

Cursor 最近換上了一套全新的 icon system。Minor Adventures 的設計師 Marek Minor 在一篇文章裡分享了整個製作過程:大約一年、600 多個 icon、兩種尺寸、兩種風格,而且每一個探索和最後版本都是手工繪製。

這件事最有趣的地方,不是 Cursor 的 icon 變漂亮了,而是它示範了一個成熟產品如何把視覺細節變成可以長期運作的系統。

▍從「繼承」走向自己的語言

Cursor 最初沿用了 VS Code 的 Codicons,再加上一些不同時期慢慢累積的 custom icons。這很合理,產品早期最重要的是先把功能做出來。但當 Cursor 開始擁有自己的 AI agent、Bugbot、平行執行、思考層級和 compute 概念之後,一套為另一個產品、另一個年代設計的 icon library 就開始不夠用了。

問題不只在風格不一致,更在於產品沒有自己的 vocabulary。

所以這次的 brief 很清楚:重新畫成同一個系統、補足 Cursor 自己的概念,而且要在不破壞既有 reference 的情況下取代舊字型。這最後一點很關鍵——設計不是只交付一堆 SVG,而是要能安全地進入一個已經運作中的產品。

▍細節不是規則的敵人

新系統有 16px 和 24px 兩種 optical size。16px 版本使用 1.25px stroke,主要應付較小的介面;24px 版本使用 1.5px stroke,並在空間允許時保留更多細節。

這不是把同一個 icon 放大縮小而已。就像字體有 Text 和 Display 的不同 cut,icon 也需要針對實際尺寸重新設計。

文章裡有一個我很喜歡的觀察:1px 太薄,1.5px 太重,1.25px 才剛好。這個數字不是先從規則推導出來的,而是眼睛比較過很多次之後,替那個判斷留下的紀錄。

還有一些幾乎沒有人會明確注意到的處理:交會處要留 optical break,避免線條堆在一起變黑;某些地方要把 stroke 變薄;重疊圖形之間至少保留 3 個 grid units 的空間;同一個 folder、arrow 或 badge 在不同 icon 裡必須長得一樣。

❖ 好的設計系統,往往不是讓人看見更多,而是讓人少感覺到不對勁。

▍一致性其實是一種 infrastructure

這個專案最值得學的,可能不是畫 icon 的技巧,而是它沒有把一致性寄託在設計師的記憶力上。

Marek 維護三個核心 Figma files:一個放所有探索、一個整理和檢查 recurring patterns,最後一個才是可交付的 icon components。Overviews file 會追蹤超過 155 個元素、物件和視覺屬性,甚至包括不同 icon 裡的 folder 是否真的為同一個 folder。

他也做了一個 migration dashboard,管理舊字型的 645 個 codepoints。每個舊 icon 都必須被標記為已處理、移除,或對應到新的 replacement,讓新字型可以直接替換而不需要整個產品重新尋找 icon。

最後,ship it 變成一個 command:匯出 SVG、分配 codepoint、編譯不同格式的 font、更新 stylesheet、重建 companion site、檢查文件,再 commit 和 push。原本需要一個下午、而且很容易漏步驟的工作,被壓縮成一個可重複的流程。

這裡的 lesson 很實際:當一件事會一直發生,就不要只靠某個人的細心。把判斷寫進檔案結構、工具和 pipeline 裡,系統才有機會在原作者離開之後繼續成長。

▍「不被注意」是一種成功

Marek 對這套 icon system 的標準,不是讓 icon 搶走注意力。它們應該實用、精準,不過度友善,也不故意賣弄巧思;它們只是在需要的時候完成自己的工作,然後退到背景裡。

我覺得這也是 Cursor 這次更新最好的設計方向:不是再做一套很有個性的圖示,而是建立一套讓產品概念可以穩定被看見的 visual language。

一個好的 icon system,最後會像字體一樣變得近乎透明。大家不會說「這個 paragraph 的字體很漂亮」,但換成不對的字體,整個產品就會立刻變得奇怪。Icon 也是一樣:使用者未必能指出是哪一條線、哪一個圓角出了問題,但他們會感覺到這個產品是不是屬於同一個世界。

❖ 【小結】

這篇文章提醒我三件事:

第一,產品長大之後,借來的 vocabulary 終究會不夠用,設計系統要回應產品自己的概念。

第二,一致性不是最後的 polish,而是需要被記錄、檢查和自動化的 infrastructure。

第三,最成熟的視覺設計不一定讓人稱讚它,而是讓人不需要分心去想它。

這些 icon 之所以看起來簡單,是因為有人替它們做了很多不簡單的決定。設計的價值,有時候就藏在那些沒有人會特別指出來的 0.25px 裡。

來源: The Making of Cursor's Icons,Marek Minor / Minor Adventures,2026 年 7 月 30 日。

索引 · 相關文章

延伸閱讀

Ai

用 Agentation 把 UI 註解直接餵給 AI agent

跟 AI coding agent 說「這個按鈕往左一點」、「這裡間距怪怪的」,最後往往變成一大段文字描述,模型還是抓錯元素。這篇主要想分享給:平常用 Cursor、Claude Code 改前端,但又懶得截圖標箭頭的人。 Agentation 的做法很直接——在瀏覽器裡點元素、留註解,輸出結構化 context 給 agent 讀。我最近在這個站的 Next.js 專案裝好了,從 React component 到 Cursor MCP 都走過一遍,紀錄如下。 ⸻ ▍Agentation 是什麼? dev-only 的 React overlay。開發模式下你可以: - 點頁面上任何元素 - 寫要改什麼 - 複製 markdown,或同步到本機 MCP server 預設資料不會離開你的電腦。註解先留在瀏覽器,除非你手動複製,或接上 `localhost`。對設計師跟前端來說,跟 Cur

AiCursorNextjs
Git

給設計師的 Git for Dummies

前幾天在 Threads 隨口寫了一句:凡採用 AI 工作流程的 UI/UX 設計師(或非工程人員),都該先從 Git 學起,否則會很難跟人協作。 底下很快出現兩種聲音。一種是「開一堂給設計師的 Git 101 啊」,另一種是「套 skill 就好,學什麼學」。還有人問得更直接:設計師出的圖檔,本來就不能 `git commit` 吧?每個版本都是獨立檔案,也沒有「很多人共同畫一份 pages」這種事。 這篇主要想分享給開始用 AI 碰程式、但又還沒把 Git 當成自己工具的人。不是要你變成工程師,也不是叫你把 Figma 檔丟進 GitHub。只是我自己越來越覺得:當你真的能開 branch、交 coded prototype,有幾個詞不懂,跟工程師講話會卡住,叫 AI 救場也會救錯地方。 Claude Code 幫你生出一頁 HTML,那還只是你自己的草稿。要讓別人打開、留言、一起改,

GitAiCursor