精选 · 开放 · 免费

Littletroop

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

AgencyPlayful3DExperimentalExpressive

Littletroop 网站截图

↓ 下载设计系统包 (60 MB)在 OpenDesign 中打开

原站: https://littletroop.com

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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