OpenDesign·你的设计资产库

网页参考

Movingparts

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

Developer ToolsMobile UISaaSCleanTooling
Movingparts 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。