精選 · 開放 · 免費

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

互動元素採用流暢的淡入與縮放轉場。

互動元素在 hover 狀態下有細微的色彩或縮放變化。 · 點擊狀態會輕微縮小。

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