큐레이션 · 오픈 · 무료

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

헤드라인에는 꽉 날개 간격의 굵은 기하학적 sans-serif를 사용합니다. · 본문 텍스트에는 가독성을 위해 중간 굵기의 humanist sans-serif를 사용합니다. · 기술 레이블과 태그에는 monospace 글꼴을 사용합니다.

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

컴포넌트

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)입니다. call-to-action 버튼과 태그를 위한 단일 고채도 악센트 색상으로 선명하고 순수한 블루(#0000ff)를 사용하세요. 타이포그래피는 임팩트 있는 헤드라인을 위한 굵은 기하학적 sans-serif와 본문 텍스트를 위한 중간 굵기의 humanist sans-serif를 특징으로 해야 합니다. 장식용 글꼴, 파스텔 악센트, 복잡한 레이아웃, 또는 다크 모드 인터페이스는 피하세요. 넉넉한 여백과 명확한 시각적 계층 구조를 보장하고, 두꺼운 검정 테두리를 가진 부유 목업 요소를 간헐적으로 사용하여 재미있으면서도 전문적인 솜씨를 보여주세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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