精选 · 开放 · 免费

Glob Land

一款注重易访问性的精致生活方式产品电商体验。

01

设计气质 DNA

一本展示高品质实体产品的高端设计杂志。

02

色彩

以单色为主，搭配纯净白与冷灰色调，功能型 UI 元素采用单一醒目的紫色。

03

字体

humanist-sans

• display32px · 500
• heading18px · 600
• body16px · 400
• small14px · 400
• tiny12px · 400

04

间距

所有间距、内边距和布局结构均基于统一的 4px 网格。

05

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

1px solid rgba(71, 71, 71, 0.1)

shadow-sm: 0 0 5px 0 rgba(25, 27, 30, 0.03) · shadow-lg: 0 4px 40px 0 rgba(25, 27, 30, 0.2)

06

布局

宽敞整洁的布局，充分留白，优先考虑可读性与清晰的内容层次。

07

动效与交互

UI 元素的淡入与淡出 · 状态切换的平滑过渡 · 交互反馈的细微动效

通过边框颜色或背景透明度的细微变化来体现，保持精致感。 · 通过轻微的缩放或透明度变化提供即时视觉反馈，随后平滑过渡回初始状态。

08

组件

• button 极简的药丸形按钮，采用浅色边框或实心紫色背景，搭配大写文本。
• card 简洁的容器，带有柔和的圆角和细微阴影，常用于网格布局。
• chip 纤细的矩形元素，带细边框，通常用于导航或筛选。
• input 表单字段设计简洁，带有浅色边框和圆角，聚焦功能清晰度。
• hero 全宽或大尺寸的图像，叠加醒目、简洁的排版与单一明确的行动号召。

09

文案语气与禁用清单

• 语气 友好、乐于助人且专业。
• 标题风格 直接、清晰，常通过标准与粗体字重混用实现强调。
• 按钮文案 行动导向且简洁，常在药丸形按钮中使用大写文本。

• 避免使用浓重的投影阴影 —— 截图显示的是非常细微、低透明度的阴影以营造深度。
• 避免使用鲜艳、冲突的配色 —— 色彩体系限定于白色、灰色和单一紫色点缀。
• 避免使用过度装饰性的字体 —— 排版简洁、功能性强且高度易读。
• 避免用过多元素使布局显得拥挤 —— 设计采用了充足的留白和清晰的层次结构。
• 避免使用尖锐、生硬的转角 —— 设计偏好柔和的圆角（5px 至 8px）或完全圆润的药丸形状。
• 不要忽视易访问性 —— 界面包含一个专用、全面的易访问性选项面板。
• 避免: 过于技术化的术语
• 避免: 激进或喧闹的营销语言
• 避免: 模糊或含混的表述

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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