OpenDesign·你的设计资产库

网页参考

Dyotanya

一位富有共情能力的网页设计师的个人作品集,运用表现力强的衬线字体和流畅的布局来传达创造力。

PortfolioStudioRefinedTypographyWarm
Dyotanya 网站截图

01

设计气质 DNA

创意共情独特个人化艺术性

一个富有表现力的创意作品集,将精炼的字体排印与艺术化的装饰元素相结合。

02

色彩

#81aed9Accent
#000000Ink
#333333Ink soft
#f5f5f3BG
#4f4f4fMuted
rgba(0, 0, 0, 0.1)Line

以灰白和黑色为主的克制色彩方案,营造出精致的画布,让蓝色点缀和富有表现力的字体排印成为焦点。

03

字体

didone-serif · humanist-sans

  • display80px · 400
  • heading46px · 400
  • body16px · 400

04

间距

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

基于宽松的 4px 基础网格,提供充裕的间距,支持呼吸感强的编辑式布局。

05

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

sm · 1px
md · 20px
lg · 30px
pill · 999px

使用纤细、微妙的边框或清晰的实心盒阴影来提升按钮等元素的层次感。

5px -5px 0px 0px #333333 · 4px -4px 0px 0px #333333

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一种不对称、自由流动的布局,使用大号字体块和不对称网格来引导视线。

07

动效与交互

100msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素上的微妙过渡,如背景色和盒阴影变化。 · 聚焦文本元素的平滑字间距动画。

交互元素上的微妙背景色和盒阴影过渡。 · 按下时轻微的触感减弱或色彩变化。

08

组件

  • button 药丸形状的按钮,带有实心蓝色偏移阴影,营造触感。
  • card 不对称的容器,配有大尺寸图像和充足的留白。
  • chip 简洁的大写字母标签或徽章,样式最小化。
  • input 极简的文本输入框,带有微妙的底部边框。
  • hero 一个巨大的、以字体排印驱动的介绍区域,采用流畅的线条图案并整合了肖像。

09

文案语气与禁用清单

  • 语气 温暖、个人化且自信。
  • 标题风格 富有表现力且略带诗意,使用大号衬线字体建立情感连接。
  • 按钮文案 直接且鼓舞人心,通常以大写无衬线字体呈现在显眼的药丸形按钮内。
  • 不要使用网格化、对称的布局——截图显示的是富有表现力、流畅且不对称的布局。
  • 不要到处依赖明亮、高饱和度的原色——截图显示的是以中性色调为主、带有单一蓝色点缀的色彩方案。
  • 不要在标题中使用严格的几何或怪诞字体——截图显示的是优雅、高对比度的衬线字体排印。
  • 不要将导航隐藏在复杂的超级菜单中——截图显示的是一个简单、低调的汉堡图标。
  • 不要使用刺眼的纯黑色背景——截图显示的是以浅灰白色背景(#f5f5f3)作为主要表面。
  • 不要使用标准、扁平的矩形按钮——截图显示的是带有明显偏移阴影的药丸形按钮。
  • 避免: 过于企业化的行话
  • 避免: 冰冷、机械化的语言
  • 避免: 密集且没有呼吸空间的文本块

10

包内真实截图

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

11

System Prompt

这是一个富有共情能力的网页设计师的个人作品集,定位为艺术性、精致且温暖。关键十六进制颜色包括灰白背景(#f5f5f3)、近乎黑色的墨色(#000000,#333333)和浅蓝色点缀(#81aed9)。字体排印方面,展示文字采用优雅的衬线字体,正文使用清晰的无衬线字体,在富有表现力的标题和可读的细节之间形成强烈对比。布局不对称且流畅,运用大号字体块和充足的留白。关键禁忌:不要使用僵化的网格布局,不要过度使用亮色,不要在标题中使用几何无衬线字体,不要使用标准扁平按钮,不要使用纯黑色背景,不要用不必要的元素使界面显得杂乱。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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