OpenDesign·你的设计资产库

网页参考

Hourly App

一个由超大、紧密排布的排版和鲜明的黑-红-奶白色调定义的效率工具应用落地页。

Bold TypographyApp UIMinimalMobile UITooling

封面待补录，可通过原站查看设计。

01

设计气质 DNA

极简大胆趣味实用

一款实用工具应用的高对比度排版海报

02

色彩

#D0021BAccent
#EEE1C1Ink
#0A0A0ABG
rgba(238, 225, 193, 1)Line

采用黑、奶油白、红三种颜色的严格配色，实现极致对比。

03

字体

grotesque-sans

  • display217px · 700
  • headline44px · 700
  • body16px · 700

所有主要文本均使用粗体的 grotesque 无衬线字体。 · 全文采用紧凑的字距和行距。 · 文本常作为主要的视觉元素。

04

间距

4px
8px
16px
20px
24px
32px

不规则，由超大的排版模块驱动，而非遵循一致的网格系统。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

用于分隔板块的 1px 实线 #EEE1C1 水平分割线

06

布局

1280container
1columns
768breakpoints

全宽垂直堆叠，包含超大的排版主视觉区和手机模型。

07

动效与交互

200msmicro
250mssmall
0msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

在 hover 和交互时使用简单的过渡效果。

悬停在可交互元素上时，光标变为指针。 · 标准指针交互。

08

组件

  • button 简单的文本行动号召（“下载”），无边框。
  • card 无，主要使用手机模型作为视觉呈现。
  • chip 无
  • input 无
  • hero 全屏、主导性的排版，用单个单词填满视口。

09

文案语气与禁用清单

  • 语气 直接、有力、极简。
  • 标题风格 超大字号、紧密排列的词语。
  • 按钮文案 简单的小写文本（“下载”）。
  • 不要使用宽字距——截图显示为紧凑的字距。
  • 不要使用细字体权重——截图仅显示粗体文本。
  • 不要使用多样的背景颜色——截图显示为纯色深色背景。
  • 不要使用投影——截图显示完全扁平的排版。
  • 不要使用装饰性边框或框架——截图使用简单的水平分割线。
  • 不要对大段文本使用居中对齐——截图显示为左对齐且模块重叠。
  • 避免: 华丽或过度描述性的语言。
  • 避免: 微妙或柔和的调色板。

10

包内真实截图

Hourly App — 桌面首屏（hero）
桌面首屏（hero）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 移动首屏
移动首屏

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

11

System Prompt

此设计是一个面向移动应用的极简、高冲击力落地页，几乎完全依赖超大、紧密排布的粗体排版来传达信息。核心配色限制在三种颜色：近乎纯黑的背景 (#0A0A0A)、用于主要文本和边框的暖调奶油白 (#EEE1C1)，以及用于点缀和强调的鲜艳红色 (#D0021B)。排版采用粗体的 grotesque 无衬线字体，常放大至巨大尺寸，并设置非常紧凑的行距和字距。关键设计约束包括：避免使用细字体权重、避免使用宽字距、避免使用投影或复杂背景，并保持鲜明、高对比度的美学。布局为单栏垂直堆叠，由手机模型来分隔文本模块。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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