Danilo Leal | Designer

在 Zed 工作的設計工程師。我很喜歡讀他的文章，尤其是他對設計、工程和產品的思考方式。

Flora Guo

一位設計工程師，部落格分享她的職涯歷程、正在閱讀的內容，以及從設計師轉職為設計工程師期間的實用資源。

Re-mind

Resent 設計工程師 Danilo 所精選的連結彙編

Good websites - Brian lovin

目前在 Notion 擔任設計師的 Brian lovin 所精選的靈感網站

Composio

Landing Page 非常吸引閱覽者的目光，推薦！

COSS UI

一個基於 Base UI 構建的全新現代化 UI 元件庫。

v0 by Vercel

v0 是 Vercel 內部創業所打造出來的產品，與其他 AI 網頁生成平台不同的是 Vercel 有很完整的生態系以及所產出頁面的質感相較於競品有明顯的差別，非常推薦大家使用看看！

Base UI

無樣式使用者介面元件，用於建構具備無障礙功能的網頁應用程式與設計系統。

Floating UI - 建立工具提示、彈出視窗、下拉選單等元件

一個用於定位浮動元素並為其建立互動的 JavaScript 函式庫。radix-ui 和 base-ui 皆採用此函式庫。

設計競技場

Design Arena 是全球規模最大的群眾外包設計評比平台。發起挑戰、參與投票、加冕冠軍。

Framer Gallery：探索使用 Framer 打造的最佳網站

從我們精選的網路最佳網站設計畫廊中汲取靈感。使用 Framer 的無程式碼網站建構工具打造網站，並提交至 Framer 網站設計畫廊，即有機會贏得每月網站設計大獎。

探索你最愛應用程式背後的故事與技術堆疊

探索您最愛應用程式的獨特之處——從它們的起源故事、技術架構，到開發團隊日常依賴的工具。向頂尖典範學習，打造更出色的產品。

Variant – 為你的創意提供無限設計，只需滾動瀏覽

輸入一個應用程式或網站的想法，只需滾動瀏覽就能看到無盡的設計選項。

Spotted in Production

該網站收集了許多優質應用的 UI/UX. 非常值得參考！

mitchellh.com

米切爾·橋本的個人網站，詳細介紹了他作為開發者和 HashiCorp 共同創辦人的背景，以及他目前正在進行的新終端模擬器 Ghostty 的工作。

Jakub Krehel

設計工程師

Phosphoricons

繼 Lucide 之後小編最喜歡 Icon 套件，風格非常現代也美觀，推薦使用在個人的 Project 上！

Claude Code in Action

Claude Code in Action 是 Anthropic 推出的線上課程，內容涵蓋多項提升生產力的 Claude Code 使用技巧，非常值得一看！

Awwwards

Awwwads 是小編非常喜歡的網站，網站收集了世界頂尖、最具啟發性的網頁設計案例，非常適合當作靈感來源。

components.build

由 Hayden Bleasel 和 shadcn 共同打造，內文介紹實作 UI 元件庫時的最佳實踐。其宗旨是讓大家都能做出可組合、無障礙、易採用的 UI 元件。

paco.me

bossadizenith.me

UI Land

網站收集了許多設計工程的資源！

Not a Number

網站風格非常讓人印象深刻，也有許多基礎的軟體文章，非常值得一訪。

Infinite Canvas

如果你對 2D Canvas 有興趣，想找資源學習，這個網站整理了幾乎所有的白板應用，非常值得一看！

Happy Hues

在做 Side Project 的時候，時常會需要花時間思考出一組好看的色調作為設計系統中顏色的基底，Happy Hues 內有許多模板可以當作參考，非常推薦！

patterns.dev

patterns.dev 涵蓋了前端常見的設計模式，有 Vanilla 以及前端兩大 UI 庫 React 與 Vue 的章節！

Speeding up the JavaScript ecosystem

該系列文章作者是由 Preact 核心貢獻者 Marvin Hagemeister 所撰寫的，每篇文章都會介紹如何去優化某一個套件，非常值得一讀！

Let's Build a Simple Database

SQL 可以說是軟體工程師基礎必備技能，但它的底層邏輯是什麼就相對少人知道，這篇系列文章手把手的帶讀者實踐基本的資料庫語法 Select 與 Insert，以及為什麼需要使用 B-Tree 這種結構來組織與索引資料，非常值得一讀。

GreatFrontEnd

GreatFrontEnd 是專門針對於前端工程師所設計的面試網站，裡面從實作基本的 JS 函式到 UI 元件都有，也有整理出一系列前端的系統設計文章，而且有終身訂閱，價格也是在可接受的範圍，推薦給有需要的讀者們！

Hello Interview

Hello Interview 提供非常高品質的系統設計文章，文章從基礎知識到各個系統的設計，每一篇都用深入淺出帶讀者認識跟權衡 trade off，無論是要準備面試或是想要充實自己的系統設計能力都非常推薦！

Introduction to Model Context Protocol

Anthropic Academy 所推出的初探 MCP 課程，而講師也是在 Udemy 擁有高名聲的 Stephen Grider，課程內容用淺顯易懂的方式簡單的介紹如何開發 MCP。

MAKING SOFTWARE

《MAKING SOFTWARE》是由 Dan Hollick 所撰寫的，網頁的 UI 令人印象深刻，內容專注於解釋軟體背後的技術是怎麼運作的，而且持續更新中，非常推薦大家閱讀！

Google Gemini

當我 Claude 的使用額度用完時，Google Gemini 就是我的第二選擇，便宜又大碗，整體實力也相當不錯！

Fancy Components

Fancy Components 不僅內建多種開箱即用的網頁特效，其整體架構與使用方式也承襲自 shadcn/ui，對熟悉該套件的使用者來說幾乎是無縫上手。

Claude AI

OpenAI 和 Google Gemini 我都有訂閱，但整體使用下來在學習和寫程式時，Claude 對我的幫助最大。它還能透過 MCP 操作其他軟體，已經是我日常生活中不可或缺的 AI。

React Spectrum

React Spectrum 是由 Adobe 開發，基於 React Aria 架構的 headless UI 設計系統。它不僅提供完整、無樣式的元件，也有提供各個元件對應的 hooks，讓外部開發者能輕鬆進行客製化。而它的主要貢獻者之一 Devon Govett，更是小編非常崇拜的一位軟體工程師。

Arc Browser

Arc 是我現在的主力瀏覽器，介面簡單順眼，平常上網查資料什麼的都用它。

Readwise

現在只要有閱讀需求，不管是網頁、書籍還是文章，我都會先存到 Readwise，然後每週固定時間做整理和回顧。

Levels.fyi

如果你是軟體工程師，在談薪之前一定要先去 Levels.fyi 查一查。它能幫助你對面試職位的薪資有基本概念，也是目前公認最齊全的軟體工程師薪資資料庫之一，涵蓋各大科技公司與職級。

Toggl

Toggl 是一款時間追蹤工具，小編從大學時期就開始使用來記錄學習時間。它內建番茄時鐘功能，並提供視覺化報表，能幫助使用者清楚掌握自己在各專案上花費的時間。

Notion Faces

如果你喜歡 Notion 的頭貼風格，可以試試看 Notion Faces。這是 Notion 在 2025 年推出的一個網站，讓使用者可以輕鬆打造自己喜歡的 Notion 風格頭像。

Linear

Linear 是小編目前愛用的專案管理工具，從 side project、學習計畫到日常代辦事項，小編都靠它來管理。現在還能透過 MCP 整合 Claude，協助規劃或更新工票的進度。

shadcn/ui

shadcn/ui 可以說是 2024 年最火紅的 React 元件庫之一，主打「複製貼上、開箱即用」，讓開發者能快速整合並客製化元件。它建立在 Radix UI 提供的 headless 元件之上，並結合 Tailwind CSS，在開發體驗與設計自由度間取得非常完美的平衡。

Frontend Mastery

Frontend Mastery 的部落格介紹了許多關於 React 和前端技術的內容，品質都非常高。每次看完總有一種茅塞頓開的感覺。

Jules Blom

Jules Blom 的部落格介紹了許多與 React Hooks 相關的 API，每篇文章都寫得蠻深入且易懂的，內文也搭配了許多互動式範例，讓讀者有更深入理解。

Josh W. Comeau

如果要說哪位部落客最擅長寫前端概念文章，我第一個想到的一定是 Josh W. Comeau。他的內容深入淺出，還搭配了大量互動式範例，每一篇都值得收藏，也非常適合用來複習核心概念。

Radix UI

這是小編非常喜歡的一套設計系統，常常會參考裡面的元件來學習與設計。它同時也是 @shadcn/ui 底層所採用的 UI 庫。