OpenDesign·你的设计资产库

网页参考

Littletroop

实验性设计工作室作品集，采用趣味的3D交互球体与大胆的排版。

AgencyPlayful3DExperimentalExpressive
Littletroop 网站截图

01

设计气质 DNA

工艺文化想象力趣味性3D

一个展示沉浸式3D工作室作品的趣味数字玩具箱。

02

色彩

#000000Ink
#ffffffBG
rgba(0,0,0,0.1)Line

极简主义画布，让多彩的交互式3D主视觉元素成为主要视觉焦点。

03

字体

grotesque-sans

  • display76px · 250

04

间距

4px
8px
16px
20px
24px
30px
40px
60px
89px

流式网格，为浮动UI元素设置了特定内边距。

05

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

sm · 4px
md · 8px
lg · 50px
pill · 999px

1像素细实线，用作微妙的水平分隔线。

06

布局

1920container
12columns
20pxgutter
768 / 1024breakpoints

全出血布局，带有浮动角落导航和中央3D视觉焦点。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

主视觉元素的交互式3D旋转 · 全出血项目展示间无缝的滚动过渡

标准指针光标，附带基于文本的反馈。 · 通过带下划线的文本链接直接导航。

08

组件

  • button 纯文本导航链接，采用粗体字重，无背景。
  • card 扁平化的大尺寸项目图像，无传统卡片容器。
  • hero 占据视口的巨型交互式3D球体或图形。

09

文案语气与禁用清单

  • 语气 自信、富有创意，且略带一点古怪。
  • 标题风格 粗体、字间距紧凑的无衬线声明体。
  • 按钮文案 极简的纯文本链接，如“查看项目”。
  • 避免使用密集网格——截图显示为全出血、单焦点布局。
  • 避免使用投影或厚重边框——截图显示为完全扁平化的文字排版。
  • 避免使用柔和的背景色——截图显示为纯白（#ffffff）画布。
  • 避免正文居中对齐——截图显示为左对齐的描述性文案。
  • 避免使用标准项目符号列表——截图显示为内联、逗号分隔的标签。
  • 避免使用装饰性图标进行导航——截图显示为简洁的文本链接。
  • 避免: 标准网格布局
  • 避免: 厚重的边框或阴影
  • 避免: 传统的卡片结构

10

包内真实截图

Littletroop — 桌面首屏（hero）
桌面首屏（hero）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Littletroop — 移动首屏
移动首屏

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

11

System Prompt

Little Troop是一个充满趣味、实验性的设计工作室作品集，其特点是拥有占据纯白（#ffffff）画布的巨型交互式3D主视觉元素。排版依赖于一种细体的 grotesque-sans（Arial Narrow）字体用于标题和正文，导航采用紧凑字距和粗体字重。布局完全是流式的，不基于网格，浮动文本锚定于视口角落。关键禁忌：切勿使用投影或厚重边框，切勿使用网格布局，切勿将主要的交互式3D元素隐藏在标准UI容器之后。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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