返回觀點
文章 編號: SC-2026-DESIGNING-WITHOUT-A-UI-KITZH-HK

不靠 UI Kit,也可以設計得更輕更穩.

2026年3月12日 4 分鐘 Build Notes

當產品只需要少量可靠模式,自建一層較輕的設計 token 同元件,往往更容易維持清晰同耐用。

不靠 UI Kit,也可以設計得更輕更穩 hero image
Build Notes

放下 UI kit,並不等於放下結構。真正的分別在於,我們是否更清楚知道這套結構究竟是為了什麼而存在。

重用與殘留,並不是同一回事

在成熟的前端程式庫裡,很多舊元件一開始都曾經解決過真實問題。之後它們慢慢留下來,卻未必仍然有價值:

  • wrapper 只為了再包另一層 wrapper
  • style utility 還帶著上一個階段的設計決定
  • 某些互動元件被引用了,但這一頁其實根本不需要

真正要問的不是「可不可以重用」,而是「這個東西現在還有沒有必要存在」。

輕一點,不代表隨便一點

如果產品表面很小,通常不需要先帶進一整套 UI kit 才開始工作。更合理的做法,往往是先整理真正會反覆使用的模式:

  • 版面 spacing
  • typography
  • card 與 section 容器
  • navigation
  • form 或 CTA 的核心狀態

當這些基本面已經夠穩,設計系統自然可以慢慢長出來,而不是一開始就背著一大堆未必會用到的抽象。

清楚的限制,反而讓設計更一致

少一點元件選項,很多時候會令畫面更一致,因為每一個模式都經過取捨,而不是因為「套件裡本來就有」而被沿用。

這種做法的好處很實際:

  • 更容易維持品牌語氣
  • CSS 與 component 結構更容易理解
  • 之後加入新頁面時,不需要先穿過一大層舊抽象

對這次 Astro 重建來說,這種較輕的做法不是妥協,而是刻意保留清晰度。

下一篇

更多同一批工作延伸出嚟嘅筆記。

繼續睇交付決策、取捨同實作細節。