厳選・オープン・無料

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

アクション用の鮮やかな青のアクセント1色を用いたハイコントラストを実現し、清潔な白背景を維持します。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

見出しには tightening のきいた幾何学的 sans-serif を-bold 使用します。 · 本文には可読性を重視した中書体の 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

インタラクション時の背景色、不透明度、およびtransformの滑らかな遷移。

色の変化や繊細なtransformなど、視覚的フィードバックを提供。 · 滑らかな状態遷移による即座のレスポンス。

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）のテキストを使用します。CTAボタンやタグには単一の高彩度アクセントカラーとして、鮮やかな純粋な青（#0000ff）を使用します。タイポグラフィは、インパクトのある見出しには太字の幾何学的 sans-serif を、本文テキストには中書体の humanist sans-serif を採用します。装飾的なフォント、パステルのアクセント、雑然としたレイアウト、またはダークモードのインターフェースは避けてください。十分な余白と明確な視覚的階層を確保し、遊び心でありながらプロフェッショナルなタッチを加えるために、時折太い黒いボーダーを持つ浮遊するマックアップ要素を配置してください。

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

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

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

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