OpenDesign·你的设计资产库

网页参考

Tomoseattle

一个折衷、交互式的日本餐厅网站,采用拖放式拼贴界面。

ExperimentalExpressivePhotographicPlayfulConsumer
Tomoseattle 网站截图

01

设计气质 DNA

折衷主义趣味性极繁主义交互式拼贴

一本互动的剪贴簿,或是一家现代餐厅的数字情绪板。

02

色彩

#FF6347Accent
#000000Ink
#EEE2D4BG
rgba(0,0,0,0.85)Line

温暖的中性画布,点缀着醒目的黑色字体和一抹活力珊瑚色。

03

字体

didone-serif · transitional-serif · geometric-sans

  • display32px · 400
  • body25px · 400

导航项使用多种字体,模拟拼贴或勒索信效果。 · 主标题 'TOMO' 使用粗体、高对比度的 Didone 衬线体。 · 说明文字使用等宽或几何无衬线字体。

04

间距

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

不规则且由拼贴驱动,间距由可拖动元素的手动摆放决定,而非严格的网格。

05

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

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

无可见的 box-shadow;元素依赖于硬边缘或图像透明度。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个自由、无结构的布局,图像和文本块相互重叠,且可由用户重新排列。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

可拖动元素以标准的 220ms 过渡跟随光标移动。

在可拖动元素上,光标变为 'move' 图标。 · 元素可被点击并拖动到画布上的新位置。

08

组件

  • button 在类似白色纸张背景上、使用不同字体的样式化文本标签。
  • card 重叠的照片剪裁和文本块。
  • chip 小型可拖动的文本片段。
  • input 无传统输入框;通过拖放进行交互。
  • hero 占据页面上半部分的巨大 'TOMO' 字体。

09

文案语气与禁用清单

  • 语气 趣味、非正式、略带玩世不恭。
  • 标题风格 粗体、超大尺寸、且在排版上富有表现力。
  • 按钮文案 以邀请玩耍的形式呈现('构建自定义组合')。
  • 不要使用严格、统一的网格——截图显示的是混乱、重叠的拼贴布局。
  • 不要对所有文本使用单一字体族——截图显示导航项使用了至少四种不同的字体。
  • 不要使用冷色或深色背景颜色——截图显示的是温暖的浅米色画布。
  • 不要依赖微妙的阴影来营造深度——截图显示的是硬边缘的照片剪裁。
  • 不要在任何元素上使用圆角——截图显示的是尖锐的矩形边缘。
  • 不要使用柔和或单色的强调色——截图显示的是用于强调的单一、明亮的珊瑚红色。
  • 避免: 企业化
  • 避免: 极简主义
  • 避免: 高度结构化
  • 避免: 严肃

10

包内真实截图

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

11

System Prompt

该网站是西雅图一家名为 'TOMO' 的日本餐厅的交互式、实验性主页。它采用极繁主义、拼贴驱动的美学风格,用户可以通过拖放各种照片和文字元素来构建自己的组合。其配色很简单:温暖的沙米色背景,搭配醒目的黑色文字和单一的珊瑚红强调色。字体是关键的表现元素,混合使用 Didone 衬线体、过渡衬线体和几何无衬线体,以营造出“勒索信”或剪贴簿的效果。关键约束包括:避免任何结构化的网格或统一的间距,导航绝不使用单一字体族,且不对任何元素应用圆角或柔和的阴影。语调是趣味和玩世不恭的,旨在邀请用户参与互动,而不仅仅是观察。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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