<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Penpot on KnightLi的博客</title>
        <link>https://knightli.com/zh-tw/tags/penpot/</link>
        <description>Recent content in Penpot on KnightLi的博客</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>zh-tw</language>
        <lastBuildDate>Mon, 22 Jun 2026 08:05:45 +0800</lastBuildDate><atom:link href="https://knightli.com/zh-tw/tags/penpot/index.xml" rel="self" type="application/rss+xml" /><item>
        <title>Penpot 自託管怎麼選：開源設計工具的 Docker、協作和開發交付思路</title>
        <link>https://knightli.com/zh-tw/2026/06/22/penpot-self-host-design-tool-guide/</link>
        <pubDate>Mon, 22 Jun 2026 08:05:45 +0800</pubDate>
        
        <guid>https://knightli.com/zh-tw/2026/06/22/penpot-self-host-design-tool-guide/</guid>
        <description>&lt;p&gt;&lt;code&gt;penpot/penpot&lt;/code&gt; 是一個開源設計工具，定位接近 Figma，但更強調開源、自託管、設計和程式碼協作。它適合想把設計資產、元件和交付流程掌握在自己手裡的團隊。&lt;/p&gt;
&lt;p&gt;專案地址：&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://github.com/penpot/penpot&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;https://github.com/penpot/penpot&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;官網：&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://penpot.app&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;https://penpot.app&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;penpot-適合誰&#34;&gt;Penpot 適合誰
&lt;/h2&gt;&lt;p&gt;Penpot 適合這些場景：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;團隊希望使用開源設計工具。&lt;/li&gt;
&lt;li&gt;公司不希望設計檔案完全放在第三方 SaaS。&lt;/li&gt;
&lt;li&gt;設計和前端之間需要 Inspect Mode、設計系統和元件交付。&lt;/li&gt;
&lt;li&gt;想基於 design tokens、components、variants 建立長期設計規範。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;如果只是個人臨時畫圖，直接用線上版會更省事。自託管更適合團隊長期使用。&lt;/p&gt;
&lt;h2 id=&#34;自託管入口&#34;&gt;自託管入口
&lt;/h2&gt;&lt;p&gt;README 沒有把完整 Docker Compose 貼在首頁，而是指向官方 self-host 文件：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-text&#34; data-lang=&#34;text&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;https://penpot.app/self-host
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;實際部署時建議按官方文件走 Docker 或 Kubernetes，而不是從網上複製舊 compose。Penpot 這類協作工具通常不只是一個容器，還會涉及資料庫、物件儲存、後台任務和郵件服務。&lt;/p&gt;
&lt;p&gt;一個穩妥的自託管流程是：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;# 1. 先閱讀官方 self-host 文件&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;# 2. 準備域名、HTTPS、持久化目錄和資料庫&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;# 3. 使用官方推薦的 Docker / Kubernetes 方式啟動&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;# 4. 建立管理員帳號&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;# 5. 匯入或建立團隊空間&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h2 id=&#34;開發交付怎麼用&#34;&gt;開發交付怎麼用
&lt;/h2&gt;&lt;p&gt;Penpot 對開發者比較有用的是 Inspect Mode。設計師完成頁面後，開發可以查看：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;尺寸和間距。&lt;/li&gt;
&lt;li&gt;顏色和字體。&lt;/li&gt;
&lt;li&gt;元件結構。&lt;/li&gt;
&lt;li&gt;設計 token。&lt;/li&gt;
&lt;li&gt;可複用元件和 variants。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;這比截圖標註更穩定，也更適合多人協作。&lt;/p&gt;
&lt;h2 id=&#34;建議的團隊流程&#34;&gt;建議的團隊流程
&lt;/h2&gt;&lt;p&gt;可以按這個方式落地：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;設計師在 Penpot 建立 design system。&lt;/li&gt;
&lt;li&gt;元件命名盡量和前端元件庫一致。&lt;/li&gt;
&lt;li&gt;顏色、字號、間距用 token 管理。&lt;/li&gt;
&lt;li&gt;開發透過 Inspect Mode 查樣式，不再靠口頭描述。&lt;/li&gt;
&lt;li&gt;大版本前匯出或備份設計檔案。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&#34;注意點&#34;&gt;注意點
&lt;/h2&gt;&lt;p&gt;Penpot 是協作系統，不是單檔案工具。自託管時要考慮升級、備份、權限、郵件、HTTPS 和儲存。建議先用測試環境跑一遍完整流程，再遷移團隊正式設計資產。&lt;/p&gt;
</description>
        </item>
        
    </channel>
</rss>
