精選 · 開放 · 免費

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 元素設有特定 padding。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 8px

lg · 50px

pill · 999px

1px 細實線，用於細微的水平分隔。

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 是一個充滿趣味的實驗性設計工作室作品集，其特點在於巨大的互動式 3D 主視覺元素，主導著極簡的白色 (#ffffff) 畫布。排版依賴一種纖細的 grotesque-sans（Arial Narrow）作為展示與內文，並使用緊湊的字距和粗體字重於導覽。佈局完全流動且非網格導向，懸浮文字固定於視窗角落。關鍵禁忌：永遠不要套用投影或厚重邊框，永遠不要使用網格進行佈局，也永遠不要將主要的互動式 3D 元素隱藏在標準 UI 容器後方。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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