OpenDesign·你的设计资产库

网页参考

Webflow

Webflow 通过一个可视化、代码生成的平台，赋能团队构建、管理和优化网站。

ProductivityCleanRefinedGridTooling

封面待补录，可通过原站查看设计。

01

设计气质 DNA

网站构建器设计系统可视化开发企业级AI搜索

一个干净、专业的驾驶舱，用于构建现代网络

02

色彩

#146EF5Accent
#080808Ink
#5A5A5AInk soft
#FFFFFFBG
#F0F0F0BG soft
#D8D8D8Muted
rgba(8,8,8,0.08)Line

高对比度的单色基底，搭配一个充满活力的蓝色作为行动色

03

字体

humanist-sans · monospace

  • display56px · 500
  • h232px · 500
  • body16px · 400

对于大标题使用紧凑的负字距 · 通过明确的字重差异维持严格的排版层级 · 确保正文有足够的行高以保证可读性

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于8px的网格系统，并使用一致的padding倍数

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用1px solid rgba(8,8,8,0.08)进行微妙的卡片分割

rgba(0,0,0,0.09) 0px 3px 7px 0px · rgba(0,0,0,0.26) 0px 24px 24px 0px · rgba(0,0,0,0.12) 0px 4px 9px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

以居中的单列主区域开始，过渡到多列卡片网格

07

动效与交互

220msmicro
300mssmall
800msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing

hover时微妙的颜色和背景颜色过渡 · 交互元素的平滑transform变化 · 为微交互优化的缓动曲线

微妙的颜色过渡和轻微的阴影调整 · 平滑的transform反馈

08

组件

  • button 主要操作使用高对比度的实心蓝色胶囊按钮，次要操作使用描边按钮
  • card 浅灰色背景，带有微妙的圆角和柔和的阴影
  • chip 带有特定颜色的小圆角徽章，用于状态或标签
  • input 干净的带边框字段，使用标准padding和圆角
  • hero 大尺度的标题位于描述性副标题之上，居中排列在内容卡片上方

09

文案语气与禁用清单

  • 语气 自信、专业且鼓舞人心
  • 标题风格 直接、行动导向的陈述，关于增长和可见性
  • 按钮文案 清晰、低摩擦的号召性用语，如“免费开始”或“立即开始”
  • 不要使用鲜艳的辅助色 — 截图显示了严格的蓝色与单色调色板。
  • 不要使用装饰性衬线字体 — 截图显示所有文字都使用了简洁、现代的humanist-sans。
  • 不要应用浓重、深色的投影 — 截图显示了非常微妙、柔和的层级提升。
  • 不要用密集的布局使界面拥挤 — 截图显示了充足的留白和清晰的层级。
  • 不要到处使用过度圆润的胶囊形状 — 截图将其限制为主要操作按钮。
  • 不要在正文中使用全大写 — 截图保留它用于特定的、小型的标签或徽章。
  • 避免: 缺乏上下文的过度术语
  • 避免: 过于随意或俏皮的语言
  • 避免: 被动或犹豫的措辞

10

包内真实截图

Webflow — 桌面首屏（hero）
桌面首屏（hero）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Webflow — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

将 Webflow 定位为一个专业的、企业级的 SaaS 平台，用于可视化网页开发。使用干净的、高对比度的调色板，包含 #080808 墨色、#FFFFFF 背景色和 #146EF5 强调色。字体是现代的 humanist-sans，并采用紧凑的展示比例。关键禁忌：避免装饰性衬线字体，绝不使用鲜艳的辅助色，不要创建杂乱的布局。专注于结构化的网格和微妙的层级提升，以维持精致、可信且高效的审美。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。