精選 · 開放 · 免費

Penpot

一個為需要可擴展協作功能的團隊打造的 open-source 設計平台。

01

設計氣質 DNA

一個專注於團隊協作與可擴展設計系統的 open-source Figma 替代方案。

02

色彩

高對比度的深色主題，搭配單一鮮明的藍綠色作為主要操作的強調色。

03

字型

humanist-sans · monospace

• display72px · 500
• heading52px · 500
• body18px · 400
• small16px · 400
• tiny12px · 500

04

間距

所有間距、內距與尺寸均採用一致的 4px 網格系統。

05

表面 (圓角 / 陰影 / 邊線)

使用細微的 1px 邊框，顏色為 rgba(255, 255, 255, 0.15) 或與背景色相符，用於結構性區隔。

elevation-1: none · elevation-2: none

06

版面

採用置中的單欄佈局，內容置於具有最大寬度限制的容器中。

07

動效與互動

背景與 transform 屬性的流暢過渡。 · 互動狀態下的細微透明度變化。

背景顏色略微變化，文字顏色也可能改變以指示互動性。 · 透過顏色變化或細微的 transform 提供即時視覺回饋。

08

組件

• button 膠囊形狀的按鈕，具備高對比度（藍綠色背景配深色文字，或深色背景配白色文字/邊框）。
• card 帶有細微邊框的深色容器，通常具有圓角和內部內距。
• chip 小型的膠囊形標籤或徽章，用於表示狀態或類別。
• input 深色主題的輸入欄位，具備細微邊框和淺色文字。
• hero 全寬度的深色背景區塊，包含大型粗體標題、描述性文字和醒目的行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 專業、自信且具協作精神。
• 標題風格 粗體、直接的陳述，強調賦權與團隊合作。
• 按鈕文案 清晰、以行動為導向的短語，例如「免費註冊」或「自架安裝」。

• 請勿使用淺色主題 — 擷圖顯示的是一致、深邃的深色背景 (#151035)。
• 請勿使用襯線字體作為標題 — 擷圖全程使用人文無襯線體 (Work Sans)。
• 請勿使用多種相互競爭的強調色 — 擷圖顯示使用單一、主導的藍綠色 (#14CECA) 作為強調。
• 請勿在按鈕或卡片上使用尖銳的矩形圓角 — 擷圖顯示使用圓角 (8px-12px) 或膠囊形狀。
• 請勿使用複雜、多彩的漸層作為背景 — 擷圖顯示使用單色深色背景，僅在特定使用者介面模型中帶有細微漸層。
• 請勿使用厚重、裝飾性的字體排印 — 擷圖顯示使用乾淨、高度易讀的人文無襯線體。
• 避免: 含糊不清或過度技術性、缺乏上下文的術語。
• 避免: 具侵略性或推銷意味的語言。
• 避免: 被動語態。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko