精选 · 开放 · 免费

Womp

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

01

设计气质 DNA

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

02

色彩

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

03

字体

humanist-sans · monospace

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 直接、自信且鼓舞人心。
• 标题风格 简洁、以利益为驱动的陈述，采用紧凑字间距。
• 按钮文案 行动导向，配有箭头图标，使用高对比度黑色填充或微妙的幽灵轮廓。

• 避免使用装饰性渐变或复杂背景 —— 截图显示的是干净的近白色纯色背景。
• 标题避免使用全大写 —— 截图显示主要展示文本使用句子式或标题式大小写。
• 避免使用圆角方形或尖锐直角 —— 截图显示是紧凑药丸形与宽大14px圆角的混合。
• 避免使用高饱和度的强调色 —— 截图显示是严格的单色方案，无主导的亮色。
• 避免使用厚重的投影 —— 截图仅显示微妙的1px内边框来营造层级。
• 避免使用多栏杂乱布局 —— 截图显示的是非常聚焦、单栏居中的英雄区。
• 避免: 过于技术化的行话
• 避免: 密集的段落
• 避免: 杂乱的布局

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko