OpenDesign·你的设计资产库

网页参考

Iorama Studio

一款充满奇趣的移动应用,通过趣味角色探索音调、和声与节奏。

ConsumerPlayfulApp UIDark ModeFriendly

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

趣味性音乐性交互性奇思妙想亲切感

一个神奇的森林空地,微小的音乐生物聚集于此演奏。

02

色彩

#ffffffInk
#0d0d0dBG
#a3a3a3Muted
rgba(255,255,255,0.1)Line

深沉暗黑的背景营造出专注而富有氛围感的环境,使鲜艳的角色色彩格外突出。

03

字体

transitional-serif · humanist-sans

  • display64px · 400
  • body20px · 400

大型表现性展示文字使用过渡衬线体。 · 清晰易读的正文使用人文无衬线体。 · 副标题文字保持较短的行宽。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

标题与副标题周围留有充足的垂直间距,形成清晰的视觉焦点。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 16px
pill · 999px

App Store 按钮带有纤细的白色边框(1px solid white)。

0 8px 32px rgba(0,0,0,0.4)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

双栏主视觉布局,左侧为文字,右侧为大型手机模型。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

标准按钮悬停状态。 · 标准按钮点击状态。

08

组件

  • button 带有白色边框、Apple 标志和“Download on the App Store”文字的 App Store 徽章。
  • card 全屏手机模型,展示应用内部界面。
  • hero 深色、富有氛围的主视觉区域,包含一个大型衬线标题、描述文字、一个 App Store 徽章,以及一个突出的手机模型,展示色彩丰富的角色。

09

文案语气与禁用清单

  • 语气 奇趣、引人入胜且富有诗意。
  • 标题风格 富有表现力的衬线标题,采用诗意结构。
  • 按钮文案 直接且平台特定(App Store 徽章)。
  • 不要使用亮白色背景——截图显示的是深沉暗黑的背景。
  • 不要为展示文字使用几何无衬线体——截图显示的是过渡衬线体。
  • 不要为界面框架添加多种高饱和度强调色——截图显示鲜艳色彩仅限于应用模型内部。
  • 不要使用繁杂、拥挤的布局——截图显示的是简洁、聚焦的双栏主视觉。
  • 不要所有元素都使用生硬、尖锐的转角——截图显示 App Store 徽章带有圆角。
  • 不要为主标题使用粗重、加粗的字重——截图显示的是较轻盈、优雅的衬线字重。
  • 避免: 正式或企业化语言。
  • 避免: 技术术语。
  • 避免: 复杂的句子结构。

11

System Prompt

这是一款名为“Chantlings”的移动应用的产品着陆页。设计采用深沉暗黑的背景,营造专注而富有氛围感的环境。字体搭配上,大型优雅的过渡衬线标题与简洁的人文无衬线正文字体相结合。布局为双栏主视觉,左侧是文字,右侧是大型手机模型。鲜艳的色彩被限定在手机展示的应用界面内。关键禁忌:不要使用亮色背景。不要为标题使用几何无衬线体。不要为页面本身添加多种强调色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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