精选 · 开放 · 免费

n8n

一个深色主题的开发者工具着陆页，使用高对比度的橙色强调色和简洁的无衬线字体来呈现 AI 工作流。

01

设计气质 DNA

一个连接 API 和 AI 的 IDE，风格类似高端开发者工具。

02

色彩

高对比度的深色 UI，搭配鲜亮的橙色焦点，并严格限制次要颜色的使用。

03

字体

geometric-sans · monospace

• display56px · 600
• h240px · 600
• body-lg20px · 400
• body16px · 400
• caption12px · 600

所有排版使用几何无衬线字体系列（Geomanist）。 · 标题使用紧凑的字间距（-1px）和半粗字重。 · 正文保持 400 字重以确保可读性。

04

间距

标准的 4px 基础网格，主要区块采用宽松的 padding（48px）。

05

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

1px solid rgba(111,111,111,0.3)

0px 1px 0px 0px inset rgba(255,142,93,0.3) · 0px 0px 0px 1px inset rgba(255,255,255,0.1) · 1px 2px 8px 0px rgba(0,0,0,0.35)

06

布局

标准最大宽度容器，内容居中，首屏文本左对齐。

07

动效与交互

hover 状态下颜色和背景色平滑过渡（0.2s）。 · 交互状态变化时进行 transform 和 opacity 过渡（0.3s）。 · 所有 UI 元素的状态变化使用细腻的缓动效果。

颜色和背景平滑过渡，按钮带有细微的缩放或位移效果。 · 通过背景色变化或透明度变化提供视觉反馈。

08

组件

• button 主操作按钮为实心橙色（#ee4f27），次要按钮为深色描边，采用药丸形圆角。
• card 深色背景，带有细微的边框和 box-shadow 以营造层次感。
• chip 并非明确突出，但勾选指示器采用简洁、最小化的样式。
• input 深色背景，带有细微边框。
• hero 居中显示的大标题，两个 CTA 按钮，以及一个突出的 3D 图形。

09

文案语气与禁用清单

• 语气 直接、专业，并聚焦于开发者。
• 标题风格 简洁、面向行动的陈述（例如，'快速行动。零破坏。'）。
• 按钮文案 清晰直接的行动号召（'免费开始'，'联系销售'）。

• 不要使用俏皮或圆润的字体——截图显示的是简洁的几何无衬线字体。
• 不要使用浅色背景——截图显示的是深色海军蓝（#0e0918）背景。
• 不要使用多种高饱和度颜色——截图使用橙色作为唯一的主导强调色。
• 不要使用复杂或繁忙的背景图案——截图使用干净的深色渐变和细微的径向光晕。
• 不要在标题中使用宽阔、松散的字母间距——截图显示的是紧凑、压缩的字间距。
• 不要使用厚重的投影——截图使用细微的内发光和细边框来营造层次感。
• 避免: 过于随意或俏皮的语言。
• 避免: 与工作流自动化无关的过多行话。
• 避免: 杂乱或混乱的布局。
• 避免: 明亮、多彩的配色方案。
• 避免: 厚重、装饰性的衬线字体。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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