OpenDesign·你的设计资产库

网页参考

Felt

一个云原生GIS平台，让地图、应用和仪表板的创建变得简单易行。

SaaSProductivityToolingClean
Felt 网站截图

01

设计气质 DNA

GISMappingSpatialCollaborationPlatform

地图领域的Google Docs

02

色彩

#DC8C46Accent
#333333Ink
#FFFFFFInk soft
#3D521EBG
#64754BBG soft
#EEEBG quiet
rgba(51,51,51,1)Line

采用高对比度的大地色系，搭配温暖的强调色，在实用性与亲和力之间取得平衡。

03

字体

transitional-serif · grotesque-sans · monospace

  • display101px · 300
  • body16px · 400

标题采用轻字重的过渡衬线体，字间距紧凑 · 界面元素使用简洁的无衬线体 · 技术标签使用等宽字体

04

间距

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

基于8px的基线网格

05

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

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

1px solid #333333

0px 2px 5px 0px rgba(0,0,0,0.2)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中内容栏，搭配充裕的留白

07

动效与交互

75msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover时的背景色过渡 · focus时的文字颜色过渡

背景色变化 · 背景色微妙变暗

08

组件

  • button 圆角矩形，采用强调色背景或描边样式
  • card 用于界面截图的简洁描边容器
  • chip 用于标签或状态标识
  • input 带有细微描边的标准文本输入框
  • hero 大字号排版，置于纯色块之上，并展示产品

09

文案语气与禁用清单

  • 语气 专业、易读且现代
  • 标题风格 大字号、有冲击力的衬线字体排版
  • 按钮文案 直接且以行动为导向（例如：'免费开始'）
  • 避免使用霓虹或高饱和的合成色——截图显示的是沉稳的大地色系。
  • 避免使用粗重的装饰性边框——截图显示的是简洁的1px边框或无边框布局。
  • 避免使用紧凑、密集的布局——截图显示的是元素周围充裕的留白。
  • 避免界面标签全部使用小写——截图显示导航和特定标签采用大写。
  • 避免使用厚重的投影——截图显示大多数元素采用非常细微或没有投影。
  • 避免标题使用活泼的无衬线体——截图显示使用过渡衬线体以增强冲击力。
  • 避免: 技术术语
  • 避免: 激进的销售语言
  • 避免: 过于活泼的语气

10

包内真实截图

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

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

11

System Prompt

这是一个现代SaaS落地页，服务于一个云原生GIS平台。它将自己定位为一个易于使用的协作式地图工具。主色调为深邃森林绿(#3D521E)与温暖的强调橙(#DC8C46)，搭配米白(#EEE)形成对比。排版上，展示部分使用过渡衬线体，正文使用无衬线体。关键禁忌：避免霓虹色、避免密集布局、避免装饰性边框、避免小写界面标签、避免厚重投影，以及避免使用无衬线体作为展示字体。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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