設計稿與最後那張頁面之間的距離，往往就藏在兩邊用的是不是同一套版面規則。

打開瀏覽器就能開工

Penpot 是一套開放原碼的設計平台。官方在首頁把它定位成給需要協作的團隊用的開放原碼設計工具，關於頁面再進一步說明它是網頁式的設計工具，用來銜接設計師與開發者。落到實際使用，最直接的分別是打開瀏覽器就能進到專案裡，不必先在本機裝一套笨重的用戶端，換一台機器繼續做也不用重新配置環境。

官方把使命寫得很明確：提供開放原碼、並且遵循開放標準的平台，把設計與開發之間的協作推進到另一個層次。這句話解釋了它在檔案格式與版面規則上的取捨——設計成果要能被下一環順手接過去，協作才談得上。

放在瀏覽器裡也有代價，這一點該講出來。畫面上幾百個畫框、圖片與元件，靠的是機器與連線；一個整天開著的專案，跟一個只在評稿時打開的專案，表現並不相同。處理大檔案的團隊會學會拆檔，而這個習慣與其說是技術問題，不如說是設計決定。

用網頁自己的規則做版面

版面模型是這款工具比較特別的地方。官方首頁直接寫明，支援用 CSS 柵格與彈性版面來設計介面，也就是前端真正在用的那套排版規則。設計稿裡的間距與對齊關係因此可以和最後的程式碼一致，交付時少了一層人工換算。

設計體系方面，官方提供設計元件、原生設計變數與共用函式庫。設計變數把顏色、字級這類基礎值抽成可重複使用的條目，改一處就能影響全局；元件與共用函式庫負責讓多個頁面維持一致。對長期維護的介面工程來說，這套組合比逐頁調整省事得多。線框圖與可互動原型則把從結構到展示的兩端都顧到了。

資料放在哪裡，由使用者決定

部署方式是另一個被反覆強調的點。官方自架頁面寫明，平台可以在私有雲、本機環境甚至隔離網路裡跑，設計資料存放的位置與存取權限完全由使用者掌握。對資料不宜出內網的團隊來說，這一條通常比功能清單更有分量，也只有在開放原碼的形態下才具備。

定價頁面的說法同樣是官方原話：免費檔功能完整，沒有人數限制，也沒有被省略的功能；官方另設面向大型組織的付費檔，用於治理與流程類需求。程式碼以 Mozilla 公共授權第 2 版在公開儲存庫發佈，使用者可以取得原始碼、自行建置與部署，設計成果也歸自己所有。

這個組合帶來兩個結果，一個是好的，一個得先想好。條款改了不必被迫搬家，但也沒有人逼你升級，於是一個實例跑哪個版本，就成了得有人負責的決定。自架的起步成本低，維護卻是一項服務，早點決定由誰來做比較妥當。

把檔案與版面的標準交到使用者手裡，協作才有穩定的地基。

使用建議：團隊先把設計變數與元件庫的基礎條目定下來，後面新增頁面會順很多；搬舊專案時先核對版面規則跟前端是否一致，免得交付階段重做；對資料有內網要求的，早點試一次自架部署，把帳號與權限一併規劃好。