精选 · 开放 · 免费

Prismic

一款专注于提升转化率的无头 CMS 和着陆页构建器。

01

设计气质 DNA

为开发者和营销团队提供的一个干净、专业的工作空间，用于构建高性能网站。

02

色彩

高对比度的黑白配色确保清晰度，搭配单一绿色强调色以突出关键操作和重点。

03

字体

geometric-sans · humanist-sans

• display56px · 700
• heading40px · 500
• body18px · 500
• small14px · 500

标题使用几何无衬线字体，以传达现代、技术感。 · 正文使用人文无衬线字体，以确保可读性。 · 避免使用装饰性或过于复杂的字体。

04

间距

统一的 4px 网格，标准的 16px 和 32px 内边距/外边距递增。

05

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

1px solid rgba(238,238,238,1)

0px 1px 6px 0px rgba(0,0,0,0.06) · 0px 2px 32px 0px rgba(0,0,0,0.16)

06

布局

内容居中，设置最大宽度容器，章节间保持充裕的垂直间距。

07

动效与交互

在 hover 和 focus 状态下，对 color、background-color 和 opacity 应用标准过渡效果。

在按钮和链接等交互元素上，应用细微的颜色或背景色变化。 · 通过状态变化提供即时的视觉反馈。

08

组件

• button 主要操作使用黑色填充按钮，次要操作使用白色描边按钮。两者均采用圆角和充裕的内边距。
• card 白色背景卡片，带有细微边框或柔和阴影，用于展示案例研究或用户评价。
• chip 用于显示统计数据（例如「页面加载速度提升 50%」），采用浅色背景和圆角。
• input 标准文本输入框，带有 1px 边框和 8px 边框圆角。
• hero 大型居中标题，使用醒目的强调色，后接副标题和两个主要操作按钮。

09

文案语气与禁用清单

• 语气 专业、自信、乐于助人。
• 标题风格 直接、以利益为导向，并使用加粗的强调词来突出重点。
• 按钮文案 清晰、以行动为导向（例如「立即开始」、「申请演示」）。

• 不要使用多色调色板——设计采用单色基底加单一绿色点缀。
• 不要使用衬线字体——标题和正文严格使用无衬线字体。
• 不要使用沉重的阴影——界面依靠细微的 box-shadow 或简单的边框来营造层次感。
• 不要使用密集、杂乱的布局——设计强调留白和清晰的视觉层次。
• 不要使用复杂的渐变——背景采用纯色。
• 不要使用低对比度文本——黑白配色方案确保高可读性。
• 避免: 模糊的语言
• 避免: 过于技术性的术语
• 避免: 咄咄逼人的销售语气

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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