精选 · 开放 · 免费

Penpot

面向需要可扩展协作团队的开源设计平台。

01

设计气质 DNA

专注于团队协作与可扩展设计系统的开源 Figma 替代方案。

02

色彩

高对比度暗色主题，搭配单一鲜亮的青绿色用于主要操作强调。

03

字体

humanist-sans · monospace

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

04

间距

所有间距、内边距与尺寸均采用统一的 4px 网格系统。

05

表面 (圆角 / 阴影 / 边线)

使用 rgba(255, 255, 255, 0.15) 或匹配背景色的细腻 1px 边框进行结构分隔。

elevation-1: none · elevation-2: none

06

布局

居中的单列布局，内容采用最大宽度容器。

07

动效与交互

背景与 transform 属性的平滑过渡。 · 交互状态的细腻透明度变化。

背景色轻微偏移，文字颜色可能变化以指示可交互性。 · 通过颜色变化或细微 transform 提供即时视觉反馈。

08

组件

• button 胶囊形按钮，高对比度（青绿色背景配深色文字，或深色背景配白色文字/边框）。
• card 深色容器，带细腻边框，通常采用圆角与内部内边距。
• chip 用于状态或类别的小型胶囊形标签或徽章。
• input 暗色主题输入框，带细腻边框与浅色文字。
• hero 全宽深色背景区块，包含大型加粗标题、描述性文字及醒目的行动号召按钮。

09

文案语气与禁用清单

• 语气 专业、自信、协作。
• 标题风格 大胆、直接的陈述，强调赋能与团队协作。
• 按钮文案 清晰、行动导向的短语，如“免费注册”或“自行托管安装”。

• 不要使用浅色主题 —— 截图显示的是统一、深邃的深色背景（#151035）。
• 不要为标题使用衬线字体 —— 截图全程显示人文无衬线体（Work Sans）。
• 不要使用多个竞争强调色 —— 截图显示单一主导的青绿色（#14CECA）用于强调。
• 不要为按钮或卡片使用尖锐的矩形圆角 —— 截图显示圆角（8px-12px）或胶囊形。
• 不要为背景使用复杂、多色的渐变 —— 截图显示实色深色背景，仅在特定 UI 模型中使用细微渐变。
• 不要使用厚重、装饰性的字体排印 —— 截图显示干净、高度易读的人文无衬线字体。
• 避免: 缺乏上下文的模糊或过于技术性的术语。
• 避免: 咄咄逼人或推销式的语言。
• 避免: 被动语态。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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