OpenDesign·你的设计资产库

网页参考

Womp

一个简洁易用的平台,通过强大的浏览器端 3D 工具,将创意转化为实体物品。

Design3D
Womp 网站截图

01

设计气质 DNA

3D 创作基于浏览器实体产品设计速度

一个现代的、基于浏览器的 3D 设计工作室,弥合了数字建模与实体制造之间的鸿沟。

02

色彩

#202020Ink
#FCFCFCBG
#F2F2F2BG soft
#8D8D8DMuted
rgba(238,238,238,1)Line

高对比度单色方案搭配柔和灰色界面,确保 3D 产品图像成为视觉焦点。

03

字体

humanist-sans · monospace

  • display60px · 400
  • h148px · 400
  • body16px · 400
  • caption12px · 500

大尺寸展示文本使用紧凑的字间距 · 正文保持一致的常规字重(400) · 技术标签(如“OR LAUNCH A QUICK APP”)使用等宽字体

04

间距

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

采用一致的 8px 基础节奏用于内边距与间距,章节隔离使用更大的 80px 垂直内边距。

05

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

sm · 4px
md · 7px
lg · 14px
pill · 9999px

1px 实线边框,主要使用 #EEEEEE 或 rgba(32,32,32,1) 以实现高对比度元素。

inset 0 0 0 1px color(srgb 0.85098 0.85098 0.85098)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏英雄区,配以充裕的垂直留白,过渡至用于功能卡片的双栏网格。

07

动效与交互

150msmicro
150mssmall
150msmedium
ease-in-outeasing

所有交互状态(背景、box-shadow、transform、scale)均采用一致的150毫秒 ease-in-out 过渡。

按钮和交互元素的背景与 box-shadow 变化。 · 缩放或变换的微交互。

08

组件

  • button 两种主要样式:黑色填充、白色文字的圆角药丸形状;以及深色文字、带描边的幽灵/轮廓样式圆角药丸形状。
  • card 功能卡片,采用大圆角(14px)、微妙的背景色(#F2F2F2),下方配有简洁的排版。
  • chip 小型、等宽字体、大写的芯片标签,带有浅灰色边框,用作章节分隔符。
  • input 一个大型、居中的提示框,浅灰色背景、圆角,内部包含一个黑色的行动号召按钮。
  • hero 一个极简、文字为主的英雄区,置于纯净白色背景上,包含一个大型交互式提示框。

09

文案语气与禁用清单

  • 语气 直接、自信且鼓舞人心。
  • 标题风格 简洁、以利益为驱动的陈述,采用紧凑字间距。
  • 按钮文案 行动导向,配有箭头图标,使用高对比度黑色填充或微妙的幽灵轮廓。
  • 避免使用装饰性渐变或复杂背景 —— 截图显示的是干净的近白色纯色背景。
  • 标题避免使用全大写 —— 截图显示主要展示文本使用句子式或标题式大小写。
  • 避免使用圆角方形或尖锐直角 —— 截图显示是紧凑药丸形与宽大14px圆角的混合。
  • 避免使用高饱和度的强调色 —— 截图显示是严格的单色方案,无主导的亮色。
  • 避免使用厚重的投影 —— 截图仅显示微妙的1px内边框来营造层级。
  • 避免使用多栏杂乱布局 —— 截图显示的是非常聚焦、单栏居中的英雄区。
  • 避免: 过于技术化的行话
  • 避免: 密集的段落
  • 避免: 杂乱的布局

10

包内真实截图

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

11

System Prompt

一个简洁的单色 SaaS 设计,用于 3D 创作工具,采用近白色背景(#FCFCFC)、深墨色(#202020)和柔和灰色(#F2F2F2、#8D8D8D)。排版采用人文无衬线字体,常规字重(400)同时用于标题和正文,微标签使用等宽字体。关键禁忌:避免高饱和度强调色(不存在),避免装饰性渐变(使用纯色),避免杂乱布局(使用充裕留白),避免厚重阴影(使用微妙内边框),避免全大写标题,避免复杂动画(使用快速150毫秒过渡)。该网站强调清晰与速度,使 3D 图像成为主要焦点。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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