OpenDesign·你的设计资产库

网页参考

Drawhistory

一个双栏编辑式布局，用于宣布公司合并，采用质朴与深色卡片形成对比。

AgencyCase StudyCleanBold TypographyPremium

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

01

设计气质 DNA

冲击力设计策略整合公告

一张正式而温暖的公司公告卡片

02

色彩

#ff6714Accent
#f2e9e1Ink
#101010BG
#3d3b31BG soft
#808080Muted
rgba(242, 233, 225, 0.4)Line

深色背景与浅色暖调文字之间形成高对比度，并使用单个鲜亮的橙色强调色。

03

字体

geometric-sans · humanist-sans · monospace

  • display104px · 400
  • body16px · 400
  • label14px · 400

按钮和公告横幅使用全大写 · 大型展示标题采用紧凑的字间距 · UI标签使用等宽字体的大写形式

04

间距

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

卡片内部使用一致的 32px 和 24px 内边距

05

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

sm · 8px
md · 16px
lg · 16px
pill · 9999px

用于分隔内部元素的细微浅色边框

06

布局

1280container
2columns
32pxgutter
768 / 1024breakpoints

两张高卡片居中显示在深色背景上，顶部带有一个全宽横幅

07

动效与交互

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 时平滑的颜色和透明度过渡 · 文本装饰过渡

交互元素上的细微过渡 · 所有交互元素上为指针光标

08

组件

  • button 基于文本的按钮，采用大写等宽字体和细边框
  • card 全高深色卡片，带有充足的内边距和圆角
  • chip 顶部公告栏，带有小型橙色方形指示器
  • input 截图中不可见
  • hero 结合文本和图像的密集编辑式公告区域

09

文案语气与禁用清单

  • 语气 专业、富有冲击力且面向未来
  • 标题风格 全大写，紧凑字间距，大号几何无衬线字体
  • 按钮文案 大写等宽字体配细边框
  • 不要使用多彩渐变 — 截图显示的是平坦、纯色的深色表面
  • 不要使用粗体字重 — 截图仅显示常规 (400) 字重
  • 不要使用居中文本用于段落 — 截图显示所有元素均居中
  • 不要使用明亮的背景 — 截图显示的是深色、柔和的质朴色调
  • 不要使用复杂的投影 — 截图显示的是无高度感的扁平卡片
  • 不要使用装饰性衬线字体 — 截图显示的是简洁的几何和等宽字体
  • 避免: 过于随意的语言
  • 避免: 杂乱的布局
  • 避免: 高饱和度的颜色

10

包内真实截图

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

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

11

System Prompt

这是一个设计机构的公告页面，采用高对比度、柔和的调色板。布局特点是两个大型深色卡片（深橄榄色 #3d3b31 和炭灰色 #101010）居中显示在深色背景上。关键颜色为 #f2e9e1（文字）、#101010（背景）和 #ff6714（强调色）。排版依赖几何无衬线字体用于展示，等宽字体用于标签。关键禁忌：绝不要使用粗体字重（所有文字均为常规字重），避免使用明亮或霓虹色，以及不要使用投影来制造高度感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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