精選 · 開放 · 免費

Movingparts

一個世界級的 SwiftUI 元件庫，助您更快速地交付行動應用程式。

Developer ToolsMobile UISaaSCleanTooling

Movingparts 網站截圖

↓ 下載設計系統包 (17 MB)在 OpenDesign 中開啟

原站: https://movingparts.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

SwiftUIMobile ComponentsDeveloper ToolsLibrary

為行動應用程式的建構者打造的高端工具組

02

色彩

#0000ffAccent

#000000Ink

#999999Ink soft

#ffffffBG

rgba(224, 224, 224, 1)Line

高對比度，以單一鮮豔藍色作為操作強調色，維持乾淨的白色背景。

03

字型

geometric-sans · humanist-sans · monospace

display80px · 700
body25px · 500

標題使用粗體幾何無襯線字體，字距緊湊。 · 內文使用中等字重的人文主義無襯線字體以確保可讀性。 · 等寬字體用於技術標籤與標記。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

區塊之間與文字段落內使用寬裕的垂直間距。

05

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

sm · 4px

md · 24px

lg · 32px

pill · 999px

極簡使用，主要用於表單元素與細微分隔線。

rgba(0, 0, 0, 0.1) 7.5px 14.2px 21.7px 0px · rgba(0, 0, 0, 0.3) 15px 20px 30px 0px

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 大型粗體標題，搭配簡潔描述與單一行動呼籲按鈕，輔以說明性的浮動 UI 元素。

09

文案語氣與禁用清單

語氣自信、專業，且略帶俏皮。
標題風格 直接且具影響力，使用強而有力的動詞。
按鈕文案 以行動為導向，常搭配尾隨的箭頭圖示。

不要使用柔色或粉彩強調色——截圖顯示的是鮮豔、高飽和度的藍色。
不要使用裝飾性或襯線字體作為標題——截圖顯示的是粗體幾何無襯線字體。
不要使用纖細、低對比度的邊框或分隔線——截圖顯示模型上粗厚、顯眼的黑色邊框。
不要用過多元素使佈局顯得雜亂——截圖維持了寬裕的留白與清晰的視覺焦點。
不要為主要介面使用深色模式或彩色背景——截圖顯示以白色為主的背景。
不要使用複雜、多彩的漸層作為整個背景——截圖使用的是乾淨、以純色為主的調色板。
避免: 缺乏脈絡的術語
避免: 被動語態
避免: 過度企業化的語氣

10

包內真實截圖

Movingparts — 桌面首屏（hero） — 桌面首屏（hero）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Design a clean, confident SaaS interface for a developer tool. The primary background is white (#ffffff) with black (#000000) text for maximum contrast. Use a vibrant, pure blue (#0000ff) as the single high-chroma accent color for call-to-action buttons and tags. Typography should feature a bold geometric sans-serif for impactful headlines and a medium-weight humanist sans-serif for body text. Avoid decorative fonts, pastel accents, cluttered layouts, or dark mode interfaces. Ensure generous whitespace and clear visual hierarchy, with occasional floating mockup elements featuring thick black borders for a playful yet professional touch.

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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