tweakcn

視覺化調整 shadcn/ui 主題，在元件預覽中比較樣式。

  • 介面
前往 tweakcn 官方網站

這是什麼

tweakcn 是針對 Tailwind CSS 與 shadcn/ui 的視覺化主題編輯器。可以從預設主題開始調整，直接觀察樣式套用到元件後的效果。

為何推薦

替現有介面挑選主題時，只看一組色票很難判斷效果。把樣式放進元件預覽，可以先比較視覺方向，再決定要帶回專案的設定。

適合誰

使用 shadcn/ui 的前端工程師，以及需要和工程師一起確認介面風格的設計師。

常用情境

  • 從預設主題挑選專案的視覺起點
  • 調整主題並比較元件呈現，確認介面風格

Onlook

把既有 React 元件放上視覺畫布，直接修改並回寫程式碼的開源編輯器。

  • visual-editor
  • react
  • tailwindcss

Figma

可共同設計產品介面、原型與團隊協作內容的設計畫布。

  • design
  • collaboration
  • prototyping

Framer

可從可編輯頁面概念走到網站發布的視覺化網頁設計環境。

  • web-design
  • publishing
  • prototyping