精选 · 开放 · 免费

Movingparts

一个世界级的 SwiftUI 组件库，助力更快地交付移动应用。

Developer ToolsMobile UISaaSCleanTooling

Movingparts 网站截图

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

原站: https://movingparts.io

📦 浏览包内文件 →

01

设计气质 DNA

SwiftUI移动端组件开发者工具库

为移动应用构建者打造的高端工具包

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

为开发者工具设计一个干净、自信的 SaaS 界面。主要背景为白色 (#ffffff)，文字为黑色 (#000000)，以实现最大对比度。使用一个鲜艳的纯蓝色 (#0000ff) 作为唯一的行动号召按钮和标签的高色度点缀色。字体应采用粗体几何无衬线字体用于有冲击力的标题，以及中等粗细的人文主义无衬线字体用于正文。避免使用装饰性字体、柔和的点缀色、杂乱的布局或深色模式界面。确保充足的留白和清晰的视觉层次，并偶尔使用带有粗黑色边框的浮动模拟元素，以增添俏皮又专业的点缀。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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