厳選・オープン・無料

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

04

余白

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

フローティングするUIエレメント専用のパディングを備えた、流動的なグリッド。

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

コンポーネント

09

文体と禁止事項

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ヒーローエレメントが特徴の、遊び心のある実験的なデザインスタジオポートフォリオです。タイポグラフィは、表示と本文の両方に対して細身のグロテスクサンセリフ（Arial Narrow）を採用し、tightな字間と太字のウェイトをナビゲーションに使用しています。レイアウトは完全に流動的でグリッド非依存であり、ビューポートのコーナーにフローティングするテキストをアンカーとしています。重要な禁止事項：決してドロップシャドウや重い境界線を適用せず、レイアウトにグリッドを使用せず、そして主要なインタラクティブな3Dエレメントを標準的なUIコンテナの後に隠さないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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