OpenDesign·你的设计资产库

网页参考

fal

一个为开发者设计的大胆、趣味的生成式媒体平台。

AIDeveloper Tools
fal 网站截图

01

设计气质 DNA

生成式开发者平台大胆趣味

一个大胆、富有表现力的开发者乐园,具有趣味性的复古数字美学。

02

色彩

#ffff00Accent
#1b1b1dInk
#99edffBG
#f3f4f6BG soft
#4b5563Muted
rgba(229,231,235,1)Line

高饱和度青色背景,搭配大胆、浓郁的强调色和深邃的近黑色文本,以实现最大对比度。

03

字体

geometric-sans · humanist-sans · monospace

  • display80px · 600
  • body16px · 400

大尺寸展示文本使用紧凑的字间距和行高。 · 使用粗体字重来强调和建立层级。

04

间距

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

基于4的统一间距比例,首屏区域采用宽裕的内边距。

05

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

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

使用 1px solid rgba(229,231,235,1) 为卡片和容器提供细微的边界定义。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用大胆全出血首屏区域的标准响应式网格。

07

动效与交互

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

基础状态变化(颜色、边框、透明度)使用平滑过渡。 · 装饰性元素使用更长、更平滑的透明度过渡。

交互元素在悬停时背景色或边框色发生细微变化。 · 点击时通过轻微的缩放或透明度变化提供即时视觉反馈。

08

组件

  • button 深色实心按钮配白色文字,以及浅色描边按钮配深色文字。
  • card 白色或深色背景的卡片,带有细微的边框和圆角。
  • chip 简约的圆角文本元素,样式极简。
  • input 带有细微边框的标准文本输入框。
  • hero 大型全宽首屏区域,采用大胆排版、富有表现力的像素画图形和高对比度色彩。

09

文案语气与禁用清单

  • 语气 直接、专业且自信。
  • 标题风格 简短、有力、高度描述性的陈述。
  • 按钮文案 使用行动导向的动词,例如“开始使用”和“查看定价”。
  • 不要使用柔和的粉彩色调——截图显示的是高饱和度的青色和醒目的黄色强调色。
  • 不要使用衬线字体——排版严格使用几何无衬线或人文无衬线字体。
  • 不要使用厚重的投影——界面通过边框或背景对比来定义,保持扁平。
  • 不要在大型标题中使用宽字间距——截图显示的是非常紧凑、负值的字间距调整。
  • 不要使用纤细的线条——设计采用粗壮的形状和实心填充。
  • 不要使用暗淡、低对比度的文本——墨色是极深的近黑色灰色。
  • 避免: 避免使用过于营销化或浮夸的语言。
  • 避免: 标题避免使用冗长复杂的句子。

10

包内真实截图

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

11

System Prompt

fal.ai 是一个面向开发者的生成式媒体平台,以大胆、趣味且专业的身份定位自身。设计采用高饱和度青色 (#99edff) 背景,搭配富有表现力的像素画图形和醒目的黄色 (#ffff00) 强调色。排版使用粗体几何无衬线字体用于展示(焦点),人文无衬线字体 (publicSansRounded) 用于正文,标题采用紧凑的字间距和较小的行高。关键约束包括:绝不使用衬线字体,避免柔和的粉彩色调,使用近黑色墨色 (#1b1b1d) 保持高对比度,所有排版必须字间距紧凑。布局采用标准响应式网格与全出血首屏,交互使用平滑的150毫秒过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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