OpenDesign·你的设计资产库

网页参考

Replit

Replit 是一款基于浏览器的协作式 IDE,让你无需本地设置即可构建、部署和分享软件。

Developer ToolsIDE
Replit 网站截图

01

设计气质 DNA

编程构建AI开发者平台协作

一个开阔、通透的工作室,构建者在此勾勒想法并将其编译为现实。

02

色彩

#FF3C00Accent
#0E0E0FInk
#36373BInk soft
#F7F6F4BG
#F1F0EEBG soft
#FFFFFFBG quiet
#898C94Muted
rgba(137,140,148,0.3)Line

温暖、米白的中性色调,搭配单一高能量橙色强调色用于操作。

03

字体

geometric-sans · monospace

  • display56px · 500
  • headline40px · 500
  • body16px · 400
  • caption14px · 400

标题使用紧凑的负字距,带来紧凑、有力的视觉效果。 · 即使正文也采用相对紧凑的行高,以保持内容密度。 · 使用字重 500 用于展示/标题强调,而非粗体 700。

04

间距

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

基于 4px 基线网格,提供一致、紧凑的元素间距,并为卡片保留充裕内边距。

05

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

sm · 6px
md · 8px
lg · 16px
pill · 999px

1px solid rgba(137,140,148,0.3)

rgba(0,0,0,0.08) 0px 2px 8px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏主视觉,突出一个输入框,随后是用于定价或功能的多栏卡片布局。

07

动效与交互

120msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素平滑的淡入淡出和背景色过渡。 · 按钮和卡片在悬停时细微的缩放或透明度变化。

描边按钮的背景色填充;卡片轻微的高度变化。 · 按钮细微的缩小效果;过渡到下一个状态或页面。

08

组件

  • button 主要操作采用胶囊形描边按钮,次要或特定触发器采用实心圆角按钮。
  • card 柔和米白或浅灰色卡片,拥有大圆角和细微的投影。
  • chip 浅灰色圆角标签或建议芯片,用于分类或快速操作。
  • input 大型、宽版的文本区域或文本输入框,圆角设计,右侧嵌入一个实心操作按钮。
  • hero 全宽、垂直居中的区域,包含大标题、简洁副文本和一个主导性的交互式输入区域。

09

文案语气与禁用清单

  • 语气 直接、赋能且略带俏皮,邀请用户去创造。
  • 标题风格 简短、有力的问题或陈述,例如‘你将构建什么?’或‘从小处着手,快速扩展。’
  • 按钮文案 清晰、行动导向的文本,例如‘创建账户’或‘注册’。
  • 不要使用刺眼的纯黑色背景——设计使用温暖的米白色,如 #F7F6F4。
  • 不要使用过度装饰或衬线字体——字体风格始终是干净的几何无衬线体。
  • 不要到处使用尖锐的矩形直角——元素依赖于充裕的圆角(如 8px)或胶囊形状。
  • 不要在界面上过度使用橙色强调色——它严格保留用于高优先级的行动号召。
  • 不要使用厚重的投影或高对比度边框——层次感通过非常柔和、细微的阴影来传达。
  • 不要为标题使用宽大、松散的行高——文本保持紧凑和凝练。
  • 避免: 堆砌术语的技术性解释
  • 避免: 激进的销售语言
  • 避免: 被动或不确定的措辞

10

包内真实截图

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

11

System Prompt

Replit 是一款基于浏览器的开发者平台和 IDE。其设计采用温暖的米白色调(#F7F6F4,#F1F0EE),搭配单一高能量橙色(#FF3C00)作为主要操作的强调色。字体严格使用几何无衬线体,字距紧凑,营造现代、有力的视觉感受。关键禁忌:绝不使用刺眼的纯黑色背景,避免到处使用尖锐的矩形直角,不要在界面上过度使用橙色强调色,不要使用装饰性衬线字体,不要使用厚重的投影,也不要为标题使用宽大行高。整体感觉是干净、高端,并专注于构建者的生产力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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