精选 · 开放 · 免费

Flecto

连接新客户、迈向绿色未来的最便捷途径。

SaaSProductivityApp UIGeometricRefined

Flecto 网站截图

↓ 下载设计系统包 (23 MB)在 OpenDesign 中打开

原站: https://flecto.io

📦 浏览包内文件 →

01

设计气质 DNA

租赁管理SaaSB2B效率

一个为租赁业务打造的高效物流仪表盘。

02

色彩

#56F09FAccent

#FFFBE8Ink

#004737BG

rgba(86,240,159,0.2)Line

采用高对比度暗色模式，搭配标志性的霓虹绿点缀。

03

字体

geometric-sans · humanist-sans

display64px · 400
body16px · 400

几何无衬线字体用于标题展示。 · 人文主义无衬线字体用于正文。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

4px 基础单位

05

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

sm · 10px

md · 19px

lg · 40px

pill · 999px

1px solid rgba(86,240,159,0.2)

rgba(0,0,0,0.12) 0px 3px 3.96px 0px · rgba(0,0,0,0.1) 0px 18px 18px 0px

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的主视觉区，包含大型图形和醒目的行动号召按钮。

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

交互元素采用平滑的淡入和缩放过渡。

交互元素上发生细微的颜色偏移或缩放变化。 · 激活状态带有轻微的缩小效果。

08

组件

button 药丸形按钮，采用霓虹绿填充或描边。
card 浮动卡片，带有细微阴影和圆角。
chip 用于分类的极简标签。
input 简洁、圆润的输入框。
hero 大型、居中的主视觉区，以深色背景为主，霓虹绿作为点缀。

09

文案语气与禁用清单

语气专业、高效且富有前瞻性。
标题风格 直接且以利益为导向。
按钮文案 以行动为导向且清晰。

不要使用白色背景——截图显示的是深绿色 (#004737) 背景。
不要使用衬线字体——截图显示的是几何与人文主义无衬线字体。
不要使用多种主色——截图显示的是单色调绿色系，仅搭配一种霓虹点缀色。
不要使用尖锐的角——截图显示的是圆角（半径为 10px 到 999px）。
不要使用厚重的投影——截图显示的是柔和、轻微的阴影。
不要使用密集的文本块——截图显示的是充裕的留白和清晰的层次。
避免: 行业术语
避免: 激进的销售语言
避免: 过于复杂的句子

10

包内真实截图

Flecto — 桌面首屏（hero） — 桌面首屏（hero）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个名为 Flecto 的租赁管理平台的 SaaS 落地页。它采用暗色模式美学，主背景为深绿色 (#004737)，并以高饱和度的霓虹绿 (#56F09F) 作为关键操作和高亮内容的点缀色。排版采用简洁的几何无衬线字体用于标题，过渡到人文主义无衬线字体用于正文，营造出专业而现代的质感。布局居中且宽敞，聚焦于清晰的价值主张和醒目的“预约演示”行动号召。关键的设计约束包括避免浅色背景、衬线字体和尖锐的圆角，因为其视觉语言定义为柔和的圆角和深沉、聚焦的环境。整体语调是高效、高级且可信赖的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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