精选 · 开放 · 免费

Touchycoffee

一个充满活力、富有表现力的 D2C 咖啡品牌，拥有大胆的字体排印、鲜艳的色彩以及古怪、不羁的个性。

01

设计气质 DNA

一家位于本地、略显古怪的社区咖啡馆外，一块喧闹的手绘招牌。

02

色彩

高对比度、充满活力且略显混乱的调色板，依赖于大胆的背景色块和醒目的黑色文字。

03

字体

display-script · monospaced

• display120px · 400
• heading50px · 400
• body20px · 400

为交互元素和部分标签统一应用 text-transform: uppercase。 · 为等宽文本保持紧凑、固定的字距，让字符网格得以显现。 · 为展示型字体拥抱紧凑的行高，以创造密集、有冲击力的文本块。

04

间距

宽松且不规则，依赖于大而明显的间距和填充，而非严格的数学节奏。

05

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

3px 3px 0px 0px rgba(0,0,0,1.0)

06

布局

大胆、不对称的纯色块相互层叠，无视严格的网格约束。

07

动效与交互

交互元素上微妙的悬停缩放或滤镜效果。 · 模态框出现/消失的标准 DOM 元素过渡。

标准指针光标，可能带有微妙的亮度或缩放变化。 · 即时视觉反馈，通常通过 CSS 过渡实现。

08

组件

• button 药丸形，纯黑色背景配白色大写等宽文本，通常带有粗边框。
• card 带有圆角和粗黑色边框的纯色块，作为独立的视觉岛屿发挥作用。
• chip 用于星级评分，在色块内渲染为厚实的实心星形。
• input 带边框的简单字段或内联文本输入，保持等宽字体。
• hero 巨大、充满屏幕的展示型花体文字主导视口。

09

文案语气与禁用清单

• 语气 古怪、自信、喧闹且幽默。
• 标题风格 简短、有力，通常以巨大、充满屏幕的花体文字展示。
• 按钮文案 直接的大写指令，如 'SEND' 或 'CLOSE'，使用粗体等宽字体。

• 不要使用纤细、优雅的字体排印——截图显示的是粗壮、大胆的等宽字体和厚重的展示型花体字。
• 不要依赖白色背景——截图显示的是棕色、粉色和蓝色等大胆、纯色的色块。
• 不要使用微妙的渐变——截图显示所有背景都是平面、纯色的填充。
• 不要使用纤细的 1px 边框——截图显示所有元素都有粗壮的 2-3px 黑色边框。
• 不要使用小巧、精致的图标——截图显示的是厚实、实心、手绘或超大尺寸的星形。
• 不要使用整洁、空旷的网格——截图显示的是混乱、重叠的文本和彩色色块。
• 不要使用标准的句子大小写——截图显示了广泛且激进的大写文本变换用法。
• 避免: 避免微妙的渐变或柔和、精致的调色板。
• 避免: 避免优雅、纤细的衬线字体或精致的字体排印。
• 避免: 避免没有大胆色彩背景的空白白色空间。
• 避免: 避免标准、无趣的网格对齐而没有俏皮的重叠。
• 避免: 避免细微、纤细的边框或微弱的投影。
• 避免: 避免严肃、企业化或过于正式的语气。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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