2026-08-17-Cursor圖示系統

The making of Cursor’s icons

後設資料

• URL：https://www.minoradventures.co/blog/the-making-of-cursors-icons
• 作者：Marek Minor（Minor Adventures founder & designer）
• 發表日：2026-07-30
• 語言：en
• 來源類型：Minor Adventures 文章；以 Cursor 新圖示系統的設計、遷移與交付為主。
• 相關產品：Cursor

一句話濃縮

這篇把 Cursor 的新圖示系統拆成一個完整設計系統案例：圖示不是零散素材，而是產品語彙、視覺一致性、工程相容、文件與發布 pipeline 共同維護的介面基礎設施。

提取要點

• 從繼承圖示集長出自有語彙：Cursor 原本繼承 VS Code 生態的 Codicons，再加上長期累積的客製圖示，風格、數量與 codepoint 狀態都開始漂移。新系統的任務不是單純重畫，而是重畫成同一套系統、補上 Cursor 特有概念，並以 icon font 取代舊系統而不破壞既有引用。
• AI coding tool 需要自己的圖示語彙：AI agents、parallel / sequential execution、single / parallel threads、thinking effort、cost、compute、Bugbot 等概念不是通用 icon library 一定涵蓋的語彙；當產品概念變得專屬，圖示也需要跟著產品化。
• 兩個尺寸、兩種樣式：新系統有 16px 與 24px 兩套 optical size，也有 outline 與 filled 兩種樣式。16px 以 1.25px stroke 為主，24px 使用較厚 stroke 與更多細節；這不是把同一張圖放大縮小，而是為不同顯示尺寸分別設計。
• 圖示像技術圖，不像裝飾插圖：整套圖示以水平、垂直、45 度線與少量必要角度為骨架，再用圓角與 round caps 降低冷感。物件比例不強迫塞滿方形框，方向規則也跟 Cursor pointer 對齊，讓 600+ 圖示看起來像同一隻手畫出來。
• 小尺寸品質靠 optical adjustments：文章提到 junction notch、stroke thinning、dot sizing、overlap gap、0.25px 等級的微調。這些細節在 16px 可能難以命名，但會影響整組圖示的重量、清晰度與一致感。
• 一致性需要基礎設施，不靠記憶：作者維護三個核心 Figma 檔：Explorations、Overviews、Icons。Overviews 用來追蹤 optical shapes、cuts、modifiers、filled styles、dots、perspective、folders、files、arrows 等 155+ recurring elements / properties，確保同一元素每次出現都一致。
• 遷移是工程相容問題：舊 icon font 有 645 個 codepoints。新系統需要讓 replacement 留在同一 codepoint，避免產品內既有 reference 斷裂；作者為此建立 migration dashboard，追蹤待處理、已處理、移除與對應完成等狀態。
• 交付包含 companion site 與發布 pipeline：交付物不只 Figma / SVG / font 檔，也包含內部 companion site。網站支援 grid、size / style / search、hover copy / download、detail view、concept-to-icon table、file type mapping 與 documentation；ship it command 則自動註冊 SVG、分配 codepoints、編譯 fonts、重建 metadata / site / docs，最後 commit / push。

提取概念

連結到此來源衍生 / 更新的 wiki 頁：

• 圖示系統 — 新建；承接 icon system / iconography 作為設計系統子系統的概念頁。
• 設計系統 — 補入圖示系統不只是 atomic icon asset，而是可治理、可遷移、可採納的介面語彙。
• 使用者介面設計 — 補入圖示在 UI 中的語意承載、掃視、操作與小尺寸可讀性。
• Figma — 補入 Figma 在 icon system 中作為探索、總覽、元件與一致性稽核基礎設施的角色。
• MOC-UX — 補入 圖示系統 到工具層。
• MOC-視覺設計 — 將既有未來方向「Iconography / 圖標設計」落地為 圖示系統。

Ingest 筆記

2026-08-17

候選判斷

• 新建 圖示系統：MOC-視覺設計 既有未來方向已列出 Iconography / 圖標設計，本來源是 vault 第一份專門拆解產品 icon system 的深度來源，足以建立 durable concept。
• 更新 設計系統：本來源把 icon 從 Atomic Design 的 atom 推進到「產品語彙 + 一致性規則 + codepoint 相容 + 文件 + pipeline」的設計系統治理案例。
• 更新 使用者介面設計：圖示是使用者實際掃視與操作介面的語意提示，不是裝飾。Cursor 的 AI agent / thread / compute 等例子補上產品專屬概念如何變成 UI vocabulary。
• 更新 Figma：本來源提供 Figma 作為系統性探索、總覽稽核、元件管理與實機檢視的具體案例，補強既有 Figma 頁不只介紹工具教學，也可作為設計系統基礎設施。
• 不新建 Cursor、Marek Minor、Minor Adventures、Codicons entity：本次主軸是 圖示系統 方法與設計系統治理；Cursor 在 vault 既有 AI coding / harness 脈絡雖多次出現，但仍缺少以 Cursor 產品本身為主題的一手來源。若後續 ingest Cursor IDE / agent workflow / company material，再評估 Cursor entity。
• 不新增觀察清單條目：Cursor entity 的待累積方向先留在本來源頁；本次沒有需要全庫觀察清單追蹤的新未建頁候選。

跨頁整合

• 圖示系統：整理成「產品語彙、optical sizes、一致性基礎設施、工程相容、採納與發布」五段。
• 設計系統：補入 icon system 不是 asset pack，而是設計系統中最容易漂移、最需要治理的子系統之一。
• 使用者介面設計：補入圖示與文字、狀態、操作回饋共同構成 UI 可理解性的觀點。
• Figma：補入 Explorations / Overviews / Icons 三檔案結構，以及用手機檢查 16px 實際尺寸的工作流。
• MOC-UX / MOC-視覺設計：補入 圖示系統 並記錄來源累積。

元命題

一套成熟的產品圖示不是「畫得好看的小圖」，而是把產品概念壓縮成可掃視、可辨識、可維護、可被工程替換、可由團隊持續新增的視覺語言；圖示系統的品質同時存在於像素、命名、codepoint、文件與發布流程裡。

原文（可選）

本次未保存完整原文；保留 URL、後設資料、整理後重點與 ingest 決策。若後續需要逐字校準，應回到原站或使用已授權的原文來源。