· 設計與設計系統
不就一個下拉選單，是能有多難？
一顆下拉選單，我手刻了八個版本才勉強能用，後面還排著十一版沒動。這篇講每一版壞在哪——Portal、鍵盤、ARIA、輸入法、手機、螢幕閱讀器，以及為什麼一個人重構跟一群人重構，難的完全不是同一件事。
🎨 設計與設計系統
Design System、Design Token、Figma 與 UI · 共 29 篇
· 設計與設計系統
開發登入系統
登入系統是使用者對產品的第一印象。Auth0、Cognito、Firebase 這些工具省時省力，但要細緻化 UI Flow 時就會被 API 和架構綁住。
· 設計與設計系統
Frontend 和 UI/UX 整合
工程師背景的我想找開源的 UI 設計資源來加速，結果發現設計圈的開源遠不如工程圈蓬勃。這大概也解釋了為什麼「造輪子」在設計端這麼普遍。
· 設計與設計系統
光是權限管理系統就很複雜
RBAC 看起來只有 User、Role、Permission 三塊，實際上遠比想像複雜。權力下放、組織管理、權限本身的層級關係，每一層都要另外設計。
· 設計與設計系統
沒講就不做
Token 過期被踢出去，重新登入該回首頁還是回剛剛那頁？兩個答案都合理，但 Spec 沒寫。這篇談需求方與開發方的立場，以及背後的責任歸屬問題。
· 設計與設計系統
當我作為一個產品設計師時
PM 從無到有直接產出 Spec 非常困難，尤其對商業模式還不熟的時候。wireframe 看似浪費時間，其實是幫助思考、及早擋掉邏輯謬誤的過程。
· 設計與設計系統
設計要懂技術還是不要懂呢？
「太懂技術會限制創意」是常見說法。我幹過前端也幹過設計，我的做法是設計時不想怎麼實現、實作時不回頭改設計——換個位置換腦袋。
· 設計與設計系統
Figma Auto Layout
Auto Layout 某種程度模擬了 CSS Flexbox，打破了設計與前端之間的溝通橫溝。從「太花時間了不可能都用」到現在出現歧視鏈，這個變遷很有趣。
· 設計與設計系統
Design Token：設計與前端之間的溝通語言
Design Token 讓 CSS 的共用被規範化，也讓設計師參與了開發流程，代價是知識門檻。這篇講 System、Seed、Alias 三層 Token，以及實務上的普及率。
· 設計與設計系統
造一個 UI 輪子 ep1
暫停了一群人的 UI Library 專案，改成自己一個人做。從最基礎的 Button 開始，光是 Variants、Theme、Size、Shape 加上 Token 關聯性就複雜到不行。
· 設計與設計系統
給前端了解的 Design System
前端拿到 Design System 就像拿到加速工作的標準，但這只可能發生在產品開發，接案公司初期根本定義不出來。這篇講設計師那側的難點。
· 設計與設計系統
Pixel Perfect
就算前端有實力也有意願，還原設計稿依然做不到完美。這篇講三個原因：RWD 不可能每個 pixel 都出到、沒有 Guidelines 的獨特元件，以及那些不可執行的需求。
· 設計與設計系統
設計系統到底是誰的責任？
工程師說那是設計的問題，設計師說 CSS 是工程師的問題。這些工具本來就只是溝通橋樑，而它最有價值的地方是「一致的設計語言」，不是效率。
· 設計與設計系統
Side Project 宣傳
從零打造一套 UI Library，不基於任何現有框架，從 bundle script 到每個元件細節都自己做。目標是能同時跑在 SSR 與微前端架構下。
· 設計與設計系統
UI Framework Side Project
今年大部分心力都投在這個 Side Project：從零造一套像 antd、mui、vuetify 的 UI Library。UI 設計師相對好找，前端反而少之又少。
· 設計與設計系統
設計一個 Design System
設計系統最關鍵的是一致性，但前期該關注的不是 component，而是更包容的 Design Language。這篇講為什麼一開始需要更多發散。
· 設計與設計系統
UI/UX 設計的思維模型
平面設計師用發散思維、工程師用收斂思維，UI/UX 設計師卻要兩個一起來。這篇講為什麼太早煩惱「能不能做到」會把設計綁死。
· 設計與設計系統
元件真的別亂自己刻
光是用 div 刻一個 Custom Select，就有八個坑等著你。這篇講手刻元件的隱形成本：測試、Storybook、元件文件、打包成 package，全都是長期技術債。
· 設計與設計系統
UI 框架的選用
前些陣子在社群上討論了一個話題，「哪一個 UI 框架好用？」這件事。 基本上在 React 的生態系中，毫無疑問的是對應 Material Design 的 mui，和對應 Ant Design 的 antd。有 Google 和螞蟻金服兩
· 設計與設計系統
設計一套 UI 元件庫
從輪播、下拉選單到彈窗，手刻元件累積的都是經年累月的智慧。這篇講顏色系統、多國語言排版、無障礙互動與 API 接口設計各自的難處。
· 設計與設計系統
Design Token：可替換版型與識別形象的前置設計
Design Token 是一組類似 key word alias 的標籤，把「什麼場景用什麼顏色」定義下來，換 Dark Mode 時只要換掉 Token。這篇講它跟一般顏色表的差別。
· 設計與設計系統
設計一個頁面，設計一個元件，設計一個服務
頁面不可複用，元件要考慮通用性，到了微服務層級則是任何改動都會牽扯全部產品。這三種設計是完全不同的層級。
· 設計與設計系統
在聯禦科技的最後一天：半年裡學到的四件事
半年裡做了 Canvas 渲染與多線程、花最多功夫的 UI/UX 設計、最心累的重構，還有幫忙設計面試流程。這是一間我還真想繼續待的公司。
· 設計與設計系統
UI 設計不是靠感覺
被問「為什麼要這樣設計」時，只能回答「我覺得比較好看」是不夠的。顏色、間距、圓角、流程，每個細節背後都該有成本、市場與體驗的理由。
· 設計與設計系統
設計與工程的萬年戰爭
設計師要發散，工程師要收束，爭執的本質是不了解對方的工作。這篇分別講兩邊的職責與立場，以及「做不到」其實通常是「時程內做不到」。
· 設計與設計系統
作為一個UI/UX的面試官心得 ep3
白板題可以把一個人的應變能力和經驗值快速榨出來。這篇講幾場面試看到的五件事，以及為什麼設計師說「我很願意學前端」其實很不加分。
· 設計與設計系統
作為一個UI/UX的面試官心得 ep2
公司沒有任何一位 UI，我是首開先例徵這個職位，沒有規範可循。這篇講怎麼在一分鐘內過濾履歷，以及我設計的那道互動式需求釐清題。
· 設計與設計系統
作為一個UI/UX的面試官心得 ep1
工程師去徵 UI/UX 是什麼感受？看完三十幾份履歷後的八點感觸：作品別清一色官網電商、Component 要能表示狀態、圖層請好好命名。
· 設計與設計系統
設計要不要懂前端？
設計的知識領域已經一大塊了，還要懂前端嗎？我的答案是看公司：老闆願意為畫面付出成本就去要求前端，老闆只要求快，那你真的得懂前端。