OpenDesign·你的设计资产库

网页参考

Turso

面向 AI 代理时代的数据库。

Developer ToolsDatabase
Turso 网站截图

01

设计气质 DNA

数据库AI 代理SQLite轻量级架构

一款精密设计的开发者工具,兼具现代金融科技仪表盘的美学特质。

02

色彩

#4FF7D1Accent
#FFFFFFInk
#C5CAE9Ink soft
#0D1318BG
#162129BG soft
#293945BG quiet
#C5CACEMuted
rgba(255,255,255,0.1)Line

以深色模式为基础,采用高对比度霓虹色作为关键行动号召的强调色。

03

字体

geometric-sans · ui-monospace

  • display64px · 800
  • body16px · 400

所有界面与正文使用 Inter(几何无衬线字体)。 · 大型展示标题保持紧凑的负字间距。 · 所有界面元素使用清晰、高度易读的几何无衬线字体。

04

间距

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

基于一致的 4px 基础比例,提供清晰、透气的内边距与间距。

05

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

sm · 4px
md · 12px
lg · 16px
pill · 9999px

1px solid rgba(255,255,255,0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽深色区块,搭配居中且受限的内容块。

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 状态下平滑的颜色与背景色过渡。 · 交互元素细微的透明度变化。

平滑的背景色与文字颜色过渡,持续 150-200 毫秒。 · 通过降低透明度或颜色变换提供即时视觉反馈。

08

组件

  • button 高对比度胶囊式按钮,采用霓虹色背景与深色文字。
  • card 细微边框卡片,深色背景配以柔和圆角。
  • chip 小型胶囊状标签,采用柔和背景色。
  • input 简洁的输入框,配以细微边框与深色背景。
  • hero 大型居中、以文字为主的主视觉区,突出霓虹色点缀元素。

09

文案语气与禁用清单

  • 语气 权威、技术性强、富有前瞻性。
  • 标题风格 简短、有力、高度描述性的技术陈述。
  • 按钮文案 直接、以行动为导向的命令式文案,强调霓虹色。
  • 勿使用白色背景 — 截图显示的是深邃的深色基底(#0D1318)。
  • 勿使用装饰性衬线字体 — 截图显示的是简洁的几何无衬线字体。
  • 勿使用多种强调色 — 截图显示霓虹薄荷绿(#4FF7D1)是唯一主导的高饱和度点缀色。
  • 勿使用柔和的投影 — 截图显示的是细微的 1px 边框与背景色变化来体现层次。
  • 勿使用狭小、拥挤的间距 — 截图显示内容块周围有充裕的内边距(如 40px、128px)。
  • 勿将所有标题全部小写 — 截图显示技术陈述采用标准的标题式大写或句首大写。
  • 避免: 避免使用非正式或随意的语言。
  • 避免: 避免缺乏技术实质的泛营销套话。
  • 避免: 避免过于复杂或华丽的句子。

10

包内真实截图

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

11

System Prompt

这是一个面向数据库平台的现代开发者工具 SaaS 网站。设计采用非常深邃、冷色调的背景(#0D1318),与高能量霓虹薄荷色(#4FF7D1)形成对比。排版依赖于清晰的几何无衬线字体,标题大而字间距紧凑,正文高度易读。布局宽敞且居中,强调清晰度与技术权威性。关键注意事项包括:避免浅色背景、避免装饰性字体、避免多种竞争性强调色、避免厚重投影。文案风格技术、直接,并聚焦于现代基础设施。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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