minimalist-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Protocol: Premium Utilitarian Minimalism UI Architect

协议：高端实用极简 UI 架构师

1. Protocol Overview

1. 协议概述

Name: Premium Utilitarian Minimalism & Editorial UI Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.

名称：高端实用极简主义与编辑式 UI 描述：这是一项先进的前端工程指令，用于生成高度精致、超极简且类似顶级工作区平台的“文档式”网页界面。本规范严格采用高对比度暖色单色调色板、定制字体层级、严谨的结构性宏观留白、Bento 网格布局，以及带有克制柔和粉彩点缀的极扁平组件架构。它明确拒绝标准、通用的 SaaS 设计趋势。

2. Absolute Negative Constraints (Banned Elements)

2. 绝对负面约束（禁用元素）

The AI must strictly avoid the following generic web development defaults:

DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
DO NOT use Tailwind's default heavy drop shadows (e.g.,
```
shadow-md
```
,
```
shadow-lg
```
,
```
shadow-xl
```
). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
DO NOT use
```
rounded-full
```
(pill shapes) for large containers, cards, or primary buttons.
DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.

AI 必须严格避免以下通用网页开发默认做法：

不要使用 “Inter”、“Roboto” 或 “Open Sans” 字体。
不要使用 “Lucide”、“Feather” 或标准 “Heroicons” 等通用的细线图标库。
不要使用 Tailwind 默认的重阴影（例如
```
shadow-md
```
、
```
shadow-lg
```
、
```
shadow-xl
```
）。阴影应几乎不存在，或经过高度定制以呈现极扩散、低透明度的效果（< 0.05）。
不要将高饱和度颜色用作大型元素或区域的背景，例如不要使用明亮的蓝色、绿色或红色主视觉区域。
除细微的导航栏模糊效果外，不要使用渐变、霓虹色或 3D glassmorphism。
不要对大型容器、卡片或主按钮使用
```
rounded-full
```
（胶囊形状）。
不要在代码、标记、文本内容、标题或替代文本中使用 emoji。应使用合适的图标或简洁的 SVG 图元替代。
不要使用 “John Doe”、“Acme Corp” 或 “Lorem Ipsum” 等通用占位名称。应使用符合情境的真实内容。
不要使用 AI 文案陈词滥调：“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Game-changer”、“Delve”。应使用平实、具体的语言。

3. Typographic Architecture

3. 字体排印架构

The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.

Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target:
```
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif
```
.

Editorial Serif (Hero Headings & Quotes): Target:

font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif

. Apply tight tracking (

letter-spacing: -0.02em

-0.04em

) and tight line-height (

1.1

Monospace (Code, Keystrokes, Meta-data): Target:

font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace

Text Colors: Body text must never be absolute black (
```
#000000
```
). Use off-black/charcoal (
```
#111111
```
or
```
#2F3437
```
) with a generous
```
line-height
```
of
```
1.6
```
for legibility. Secondary text should be muted gray (
```
#787774
```
).

界面必须依靠鲜明的字体排印对比和高端字体选择来营造编辑式质感。

主要无衬线字体（正文、UI、按钮）：使用干净、几何感或具有个性的系统原生字体。目标：
```
font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif
```
。

编辑式衬线字体（主视觉标题与引文）：目标：

font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif

。采用紧凑字距（

letter-spacing: -0.02em

至

-0.04em

）和紧凑行高（

1.1

）。

等宽字体（代码、按键、元数据）：目标：

font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace

。

文字颜色：正文文字绝不能使用纯黑色（
```
#000000
```
）。应使用偏黑或炭黑色（
```
#111111
```
或
```
#2F3437
```
），并采用宽裕的
```
line-height: 1.6
```
以确保易读性。次要文字应使用柔和灰色（
```
#787774
```
）。

4. Color Palette (Warm Monochrome + Spot Pastels)

4. 色彩方案（暖色单色系与柔和粉彩点缀）

Color is a scarce resource, utilized only for semantic meaning or subtle accents.

Canvas / Background: Pure White
```
#FFFFFF
```
or Warm Bone/Off-White
```
#F7F6F3
```
/
```
#FBFBFA
```
.
Primary Surface (Cards):
```
#FFFFFF
```
or
```
#F9F9F8
```
.
Structural Borders / Dividers: Ultra-light gray
```
#EAEAEA
```
or
```
rgba(0,0,0,0.06)
```
.
Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.
- Pale Red:
```
#FDEBEC
```
  (Text:
```
#9F2F2D
```
  )
- Pale Blue:
```
#E1F3FE
```
  (Text:
```
#1F6C9F
```
  )
- Pale Green:
```
#EDF3EC
```
  (Text:
```
#346538
```
  )
- Pale Yellow:
```
#FBF3DB
```
  (Text:
```
#956400
```
  )

颜色是一种稀缺资源，仅可用于表达语义或提供轻微点缀。

画布／背景：纯白色
```
#FFFFFF
```
、暖骨白或米白色
```
#F7F6F3
```
/
```
#FBFBFA
```
。
主要表面（卡片）：
```
#FFFFFF
```
或
```
#F9F9F8
```
。
结构边框／分隔线：超浅灰色
```
#EAEAEA
```
或
```
rgba(0,0,0,0.06)
```
。
点缀颜色：仅将高度去饱和、褪色感的粉彩用于标签、行内代码背景或轻微图标背景。
- 浅红色：
```
#FDEBEC
```
  （文字：
```
#9F2F2D
```
  ）
- 浅蓝色：
```
#E1F3FE
```
  （文字：
```
#1F6C9F
```
  ）
- 浅绿色：
```
#EDF3EC
```
  （文字：
```
#346538
```
  ）
- 浅黄色：
```
#FBF3DB
```
  （文字：
```
#956400
```
  ）

5. Component Specifications

5. 组件规范

Bento Box Feature Grids:
- Utilize asymmetrical CSS Grid layouts.
- Cards must have exactly
```
border: 1px solid #EAEAEA
```
  .
- Border-radius must be crisp:
```
8px
```
  or
```
12px
```
  maximum.
- Internal padding must be generous (e.g.,
```
24px
```
  to
```
40px
```
  ).
Primary Call-To-Action (Buttons):
- Solid background
```
#111111
```
  , text
```
#FFFFFF
```
  .
- Slight border-radius (
```
4px
```
  to
```
6px
```
  ). No box-shadow.
- Hover state should be a subtle color shift to
```
#333333
```
  or a micro-scale
```
transform: scale(0.98)
```
  .
Tags & Status Badges:
- Pill-shaped (
```
border-radius: 9999px
```
  ), very small typography (
```
text-xs
```
  ), uppercase with wide tracking (
```
letter-spacing: 0.05em
```
  ).
- Background must use the defined Muted Pastels.
Accordions (FAQ):
- Strip all container boxes. Separate items only with a
```
border-bottom: 1px solid #EAEAEA
```
  .
- Use a clean, sharp
```
+
```
  and
```
-
```
  icon for the toggle state.
Keystroke Micro-UIs:
- Render shortcuts as physical keys using
```
<kbd>
```
  tags:
```
border: 1px solid #EAEAEA
```
  ,
```
border-radius: 4px
```
  ,
```
background: #F7F6F3
```
  , using the Monospace font.
Faux-OS Window Chrome:
- When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).

Bento 盒式特性网格：
- 使用非对称 CSS Grid 布局。
- 卡片必须严格使用
```
border: 1px solid #EAEAEA
```
  。
- 圆角必须清晰利落：最多为
```
8px
```
  或
```
12px
```
  。
- 内部留白必须充足（例如
```
24px
```
  至
```
40px
```
  ）。
主要操作按钮（Buttons）：
- 背景使用实色
```
#111111
```
  ，文字使用
```
#FFFFFF
```
  。
- 使用轻微圆角（
```
4px
```
  至
```
6px
```
  ），不得使用 box-shadow。
- Hover 状态应轻微变更为
```
#333333
```
  ，或使用微缩放
```
transform: scale(0.98)
```
  。
标签与状态徽章：
- 采用胶囊形状（
```
border-radius: 9999px
```
  ）、极小字号（
```
text-xs
```
  ）、大写字母和宽字距（
```
letter-spacing: 0.05em
```
  ）。
- 背景必须使用指定的柔和粉彩。
折叠面板（FAQ）：
- 移除所有容器盒子，仅使用
```
border-bottom: 1px solid #EAEAEA
```
  分隔各项。
- 使用干净、锐利的
```
+
```
  和
```
-
```
  图标表示切换状态。
按键微交互 UI：
- 使用
```
<kbd>
```
  标签将快捷键呈现为实体按键：
```
border: 1px solid #EAEAEA
```
  、
```
border-radius: 4px
```
  、
```
background: #F7F6F3
```
  ，并使用等宽字体。
仿 OS 窗口边框：
- 模拟软件界面时，使用极简容器包裹，并设置白色顶部栏，其中包含三个浅灰色小圆点，以模拟 macOS 窗口控制按钮。

6. Iconography & Imagery Directives

6. 图标与图像规范

System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.
Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.
Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (
```
opacity: 0.04
```
warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like
```
https://picsum.photos/seed/{context}/1200/800
```
when real assets are unavailable.
Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (
```
radial-gradient
```
with warm tones at
```
opacity: 0.03
```
), or minimal geometric line patterns to add depth without breaking the clean aesthetic.

系统图标：使用 “Phosphor Icons（Bold 或 Fill 字重）” 或 “Radix UI Icons”，营造技术感且略带粗笔画的视觉效果。统一所有图标的笔画宽度。
插图：采用白色背景上的单色、粗犷连续线墨稿，并搭配一个填充柔和粉彩的偏移几何图形。
摄影：使用高品质、去饱和且带暖色调的图片。应用轻微叠加效果（
```
opacity: 0.04
```
暖色颗粒），使照片融入单色方案。绝不要使用过度饱和的素材图。如果缺少真实素材，可使用
```
https://picsum.photos/seed/{context}/1200/800
```
等可靠占位来源。
主视觉与区域背景：区域不应显得空洞且扁平。可使用极低透明度的全宽背景图像、柔和的径向光点（使用暖色调的
```
radial-gradient
```
，并设置为
```
opacity: 0.03
```
），或极简几何线条图案来增加层次，同时不破坏干净的视觉风格。

7. Subtle Motion & Micro-Animations

7. 微妙动效与微动画

Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.

Scroll Entry: Elements fade in gently as they enter the viewport. Use

translateY(12px)

opacity: 0

resolving over

600ms

with

cubic-bezier(0.16, 1, 0.3, 1)

. Use

IntersectionObserver

, never

window.addEventListener('scroll')

Hover States: Cards lift with an ultra-subtle shadow shift (
```
box-shadow
```
transitioning from
```
0 0 0
```
to
```
0 2px 8px rgba(0,0,0,0.04)
```
over
```
200ms
```
). Buttons respond with
```
scale(0.98)
```
on
```
:active
```
.
Staggered Reveals: Lists and grid items enter with a cascade delay (
```
animation-delay: calc(var(--index) * 80ms)
```
). Never mount everything at once.
Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (
```
animation-duration: 20s+
```
,
```
opacity: 0.02-0.04
```
) drifting behind hero sections. Must be applied to a
```
position: fixed; pointer-events: none
```
layer. Never on scrolling containers.
Performance: Animate exclusively via
```
transform
```
and
```
opacity
```
. No layout-triggering properties (
```
top
```
,
```
left
```
,
```
width
```
,
```
height
```
). Use
```
will-change: transform
```
sparingly and only on actively animating elements.
Reduced Motion (mandatory): Gate scroll-entry, staggered reveals, and ambient background motion behind
```
@media (prefers-reduced-motion: no-preference)
```
, and add a
```
@media (prefers-reduced-motion: reduce)
```
block that disables them so content appears instantly at rest. Hover and
```
:active
```
feedback may remain.

动效应让人感觉不到其存在——有所体现，但绝不分散注意力。目标是静谧的精致感，而非炫目效果。

滚动入场：元素进入视口时轻柔淡入。使用
```
translateY(12px)
```
+
```
opacity: 0
```
，在
```
600ms
```
内通过
```
cubic-bezier(0.16, 1, 0.3, 1)
```
过渡到最终状态。使用
```
IntersectionObserver
```
，绝不要使用
```
window.addEventListener('scroll')
```
。
Hover 状态：卡片通过极轻微的阴影变化产生抬升感（
```
box-shadow
```
在
```
200ms
```
内从
```
0 0 0
```
过渡到
```
0 2px 8px rgba(0,0,0,0.04)
```
）。按钮在
```
:active
```
状态下响应
```
scale(0.98)
```
。
错落显现：列表和网格项通过级联延迟入场（
```
animation-delay: calc(var(--index) * 80ms)
```
）。绝不要一次性挂载所有内容。
背景环境动效：可选。在主视觉区域后方布置一个移动极慢的径向渐变光斑（
```
animation-duration: 20s+
```
、
```
opacity: 0.02-0.04
```
）。必须应用于
```
position: fixed; pointer-events: none
```
的图层。绝不能应用于滚动容器。
性能：仅通过
```
transform
```
和
```
opacity
```
实现动画。不得使用会触发布局变化的属性（
```
top
```
、
```
left
```
、
```
width
```
、
```
height
```
）。谨慎使用
```
will-change: transform
```
，且仅用于当前正在动画的元素。
减少动态效果（强制要求）：将滚动入场、错落显现和背景环境动效置于
```
@media (prefers-reduced-motion: no-preference)
```
条件内，并添加
```
@media (prefers-reduced-motion: reduce)
```
代码块来禁用这些效果，使内容在静止状态下立即显示。Hover 和
```
:active
```
反馈可以保留。

8. Execution Protocol

8. 执行协议

When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:

Establish the macro-whitespace first. Use massive vertical padding between sections (e.g.,
```
py-24
```
or
```
py-32
```
in Tailwind).
Constrain the main typography content width to
```
max-w-4xl
```
or
```
max-w-5xl
```
.
Apply the custom typographic hierarchy and monochromatic color variables immediately.
Ensure every card, divider, and border adheres strictly to the
```
1px solid #EAEAEA
```
rule.
Add scroll-entry animations to all major content blocks.
Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.
Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.

在编写前端代码（HTML、React、Tailwind、Vue）或设计布局时：

首先确立宏观留白。使用超大垂直间距分隔区域（例如 Tailwind 中的
```
py-24
```
或
```
py-32
```
）。
将主要排版内容的宽度限制为
```
max-w-4xl
```
或
```
max-w-5xl
```
。
立即应用自定义字体层级和单色色彩变量。
确保每张卡片、分隔线和边框都严格遵循
```
1px solid #EAEAEA
```
规则。
为所有主要内容区块添加滚动入场动画。
通过图像、环境渐变或轻微纹理为区域营造视觉层次，不要使用空洞的扁平背景。
提供的代码应原生呈现这种高端、简洁的编辑式美学，无需手动调整。