OpenDesign·你的设计资产库

网页参考

Phippscharlie

一个精致的平面设计作品集,运用大胆排版和沉浸式摄影来展现精炼的视觉识别。

PortfolioPhotographicBold TypographyCleanRefined
Phippscharlie 网站截图

01

设计气质 DNA

极简编辑风格精致平面设计作品集

将高端印刷杂志版式搬上网络

02

色彩

#101011Ink
#ffffffBG
#edededBG quiet
#7f7f7fMuted
rgba(0, 0, 0, 0.1)Line

高对比度单色调色板,搭配全出血摄影和纯黑版块以实现戏剧性焦点

03

字体

grotesque-sans · monospace

  • display162px · 400
  • headline63px · 400
  • body20px · 400
  • caption13px · 400

为展示性字体使用极紧的负字间距 · 所有排版保持一致的常规字重 · 正文保持舒适的阅读尺寸,同时让展示性字体占据主导地位

04

间距

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

大量留白,非对称布局以营造编辑风格

05

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

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

极简,仅用于微妙分隔

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血主图搭配叠加文字,黑白版块交替出现

07

动效与交互

220msmicro
500mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

透明度渐入 · 用于滚动显示的柔和变换

链接和交互元素的透明度降低 · 标准指针光标,提供即时视觉反馈

08

组件

  • button 极简文本链接,带有微妙的悬停透明度变化
  • card 大型图像优先的项目展示,搭配极少文字叠加
  • chip 不可见
  • input 不可见
  • hero 全屏摄影背景,搭配巨型出血排版

09

文案语气与禁用清单

  • 语气 自信、专业、内敛
  • 标题风格 大型、有冲击力的声明,超出容器边缘
  • 按钮文案 微妙的文本链接而非突出按钮
  • 不要使用明亮的强调色——截图显示严格的单色调色板,包含白色、黑色和摄影色调
  • 不要添加装饰性边框或阴影——截图显示完全扁平的表面,无提升效果
  • 不要使用小而怯懦的排版——截图显示主导视口的巨型展示性字体
  • 不要将所有内容居中对齐——截图显示非对称文字布局以营造编辑动态感
  • 不要使用厚重的按钮样式——截图显示纯文本导航链接,视觉重量极小
  • 不要过度拥挤版面——截图显示元素间大量留白和呼吸空间
  • 避免: 过度装饰
  • 避免: 鲜艳色彩
  • 避免: 视觉杂乱

10

包内真实截图

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

11

System Prompt

这是一个为伦敦设计师打造的精致平面设计作品集。设计采用严格的单色调色板,以白色(#ffffff)和近黑色(#101011)为主色,摄影图像提供色调变化。排版采用grotesque-sans类字体,展示尺寸最大达162px,字间距紧凑。关键禁忌:切勿使用明亮的强调色,避免添加阴影或提升效果,切勿将展示性字体缩小到其大胆主导的尺寸以下。版式在全出血摄影主图版块与干净白色或深色版块间交替,形成编辑杂志般的流动感,搭配大量留白和非对称文字布局。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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