精选 · 开放 · 免费
Cargo
一款优先考虑排版与创意作品而非平台界面的极简网站构建器。
designportfoliotool
01
设计气质 DNA
创意作品集构建器极简
专为创意人士打造的画廊级数字画布
02
色彩
#3F3F3FInk
#000000Ink soft
#FFFFFFBG
#FCFCFCBG soft
#D9D9D9Muted
rgba(0,0,0,0.75)Line
严格的黑白单色与中性色,使用高对比度白色背景,确保用户多彩的创意作品成为唯一焦点。
03
字体
humanist-sans
- display
80px · 400 - heading
40px · 400 - body
14px · 400
在大号展示尺寸上采用紧凑字距,营造精致、定制字体的感觉 · 仅对交互元素使用中等字重(500),以提供清晰的操作暗示
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
由显式网格定位而非线性垂直节奏驱动的不对称布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 4px
lg · 8px
pill · 999px
主视觉区域无可见边框;完全依靠间距和排版进行分隔。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面端采用不对称分栏网格,品牌元素左对齐,操作按钮右对齐。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停状态下的即时转换 · 页面进入时的交错动画
光标变为指针,文本链接无可见背景变化。 · 即时状态改变,无感知延迟。
08
组件
- button 实心蓝色填充按钮(反转状态)或仅带下划线的文本链接。
- card 模板预览卡片,零边框圆角,并大量使用图像出血效果。
- chip 分隔内容视图的简单标签式分隔符。
- input 带标准边框和基本内边距的文本输入框。
- hero 全屏不对称分栏布局,巨大字体锚定在对角。
09
文案语气与禁用清单
- 语气 精致、直接,略带不羁。
- 标题风格 有力、极简的双词命令或陈述。
- 按钮文案 包裹在括号中或作为简单文本链接的动作导向文本。
- 不要在主容器上使用边框圆角——截图显示完全方正的边缘
- 不要使用投影营造深度——截图显示完全平面的表面
- 不要为正文使用衬线字体——截图显示全文使用人文主义无衬线体
- 不要居中对齐大段文本——截图显示严格的左对齐或右对齐定位
- 不要使用鲜艳的背景色——截图显示严格的白色或离白色画布
- 不要在标题上使用宽字距——截图显示紧凑的负字距
- 避免: 营销流行语
- 避免: 装饰性渐变
- 避免: 销售式感叹号
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Cargo 是一款面向设计师的高级作品集网站构建器,采用纯白背景和近乎黑色的人文主义无衬线字体,确保创意作品成为绝对主角。桌面端主视觉依赖于精致的不对称分栏网格和紧凑字距的巨大标题。主要操作通过中等字重的文本链接驱动,而次要流程使用实心反转按钮(亮蓝色)。关键约束包括:所有容器避免使用边框圆角,不使用投影营造平面深度,以及所有排版保持严格的左对齐。设计词汇必须保持极简、几何化且严格单色。
en · zh-CN · zh-TW · ja · ko