OpenDesign·你的设计资产库

网页参考

ToyFight

一个俏皮而高端的创意机构网站,具有复古游戏启发的美学。

StudioCreative
ToyFight 网站截图

01

设计气质 DNA

俏皮复古未来主义工作室创意原创

一家将 8 位游戏怀旧感与高端创意服务相结合的设计工作室。

02

色彩

#0D0D0EInk
#FAF6EFInk soft
#F1E7E7BG
#E9E3F3BG quiet
rgba(13,13,14,1)Line

温暖、柔和的中性背景色与高对比度的深色墨水形成对比。

03

字体

monospaced · condensed-sans

  • display56px · 400
  • heading46px · 400
  • body18px · 400
  • caption14px · 500
  • micro10px · 500

主要标题使用等宽字体,以强化复古科技美学。 · 正文和 UI 文本使用窄体无衬线字体。 · 小标签使用大写字母和宽字间距。

04

间距

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

充足的留白,让粗体排版和 3D 元素得以呼吸。

05

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

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

1px solid #0D0D0E

0 4px 12px rgba(0,0,0,0.05)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称、散点布局,包含重叠元素和充足的内边距。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

颜色和背景变化的平滑过渡。 · 3D 对象的复杂变换动画。 · 滚动触发的入场动画。

交互元素上的微妙颜色偏移和变换。 · 通过激活状态提供即时视觉反馈。

08

组件

  • button 药丸形或圆角矩形按钮,采用浅色背景和深色边框。
  • card 深色背景卡片,用于展示作品集。
  • chip 小药丸形标签,用于标签和分类。
  • input 简洁的文本输入框,带有底部边框。
  • hero 大型 3D 交互对象搭配散点、粗体的字体块。

09

文案语气与禁用清单

  • 语气 自信、俏皮且略带不羁。
  • 标题风格 大胆、碎片化的陈述,个性鲜明。
  • 按钮文案 直接而俏皮,常使用非常规标签。
  • 不要为显示文本使用通用无衬线字体 —— 截图显示的是等宽和窄体字体。
  • 不要采用僵硬、对称的布局 —— 截图显示的是散点、重叠的元素。
  • 不要使用冰冷、临床的调色板 —— 截图显示的是温暖、柔和的中性色(如 #F1E7E7)。
  • 不要避免 3D 和俏皮元素 —— 截图显著展示了一个 3D 游戏机。
  • 不要使用纤细、精致的边框 —— 截图显示的是实心、自信的 1px 边框。
  • 不要让字体大小统一 —— 截图显示从 10px 到 56px 的极端变化。
  • 避免: 乏味的商务用语
  • 避免: 过于正式的语言
  • 避免: 通用的设计术语

10

包内真实截图

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

11

System Prompt

这是一个融合了复古游戏怀旧感与高端设计服务的高端创意机构网站。调色板以温暖、柔和的中性色(#F1E7E7, #FAF6EF)为主,与深色墨水(#0D0D0E)形成对比。排版使用等宽字体作为显示标题,窄体无衬线字体作为正文,营造出独特的复古科技感。布局为不对称且俏皮,包含散点的文字块、3D 交互元素和充足的留白。关键约束:切勿为显示文本使用通用无衬线字体;务必采用散点、重叠的布局,而非僵硬的网格;保持温暖、柔和的配色,避免冰冷、临床的色调。设计在俏皮感与高端工艺之间取得了平衡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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