精选 · 开放 · 免费

Tomoseattle

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

01

设计气质 DNA

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

02

色彩

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

03

字体

didone-serif · transitional-serif · geometric-sans

• display32px · 400
• body25px · 400

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

04

间距

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

05

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 趣味、非正式、略带玩世不恭。
• 标题风格 粗体、超大尺寸、且在排版上富有表现力。
• 按钮文案 以邀请玩耍的形式呈现（'构建自定义组合'）。

• 不要使用严格、统一的网格——截图显示的是混乱、重叠的拼贴布局。
• 不要对所有文本使用单一字体族——截图显示导航项使用了至少四种不同的字体。
• 不要使用冷色或深色背景颜色——截图显示的是温暖的浅米色画布。
• 不要依赖微妙的阴影来营造深度——截图显示的是硬边缘的照片剪裁。
• 不要在任何元素上使用圆角——截图显示的是尖锐的矩形边缘。
• 不要使用柔和或单色的强调色——截图显示的是用于强调的单一、明亮的珊瑚红色。
• 避免: 企业化
• 避免: 极简主义
• 避免: 高度结构化
• 避免: 严肃

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko