01
设计气质 DNA
3D 创作基于浏览器实体产品设计速度
一个现代的、基于浏览器的 3D 设计工作室,弥合了数字建模与实体制造之间的鸿沟。
02
色彩
#202020Ink#FCFCFCBG#F2F2F2BG soft#8D8D8DMutedrgba(238,238,238,1)Line高对比度单色方案搭配柔和灰色界面,确保 3D 产品图像成为视觉焦点。
03
字体
- display
60px · 400 - h1
48px · 400 - body
16px · 400 - caption
12px · 500
大尺寸展示文本使用紧凑的字间距 · 正文保持一致的常规字重(400) · 技术标签(如“OR LAUNCH A QUICK APP”)使用等宽字体
04
间距
4px8px12px16px24px32px48px64px80px采用一致的 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 图像成为主要焦点。











