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 描述：这是一项高级前端工程准则，用于生成高度精致、超极简的「文档风格」网页界面，可媲美顶级工作区平台。本协议严格要求采用高对比度的温暖单色调色板、定制化排版层级、细致的宏观留白结构、便当盒网格布局，以及带有刻意柔和淡彩色点缀的超扁平化组件架构。它明确摒弃通用的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毛玻璃效果（细微导航栏模糊除外）。
禁止为大型容器、卡片或主要按钮使用
```
rounded-full
```
（药丸形状）。
禁止在代码、标记、文本内容、标题或替代文本中使用任何表情符号。需替换为合适的图标或简洁的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
```
），并设置充足的行高
```
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).

便当盒功能网格：
- 使用非对称CSS Grid布局。
- 卡片必须精确设置
```
border: 1px solid #EAEAEA
```
  。
- 圆角必须清晰：最大为
```
8px
```
  或
```
12px
```
  。
- 内部边距必须充足（如
```
24px
```
  至
```
40px
```
  ）。
主要行动召唤按钮（CTA按钮）：
- 纯色背景
```
#111111
```
  ，文本
```
#FFFFFF
```
  。
- 轻微圆角（
```
4px
```
  至
```
6px
```
  ）。无盒阴影。
- 悬停状态应轻微变色为
```
#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
```
  ，使用等宽字体。
仿操作系统窗口边框：
- 当模拟软件界面时，将其包裹在极简容器中，顶部为白色栏，包含三个小的浅灰色圆圈（模拟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.

动效应做到无形——存在但绝不分散注意力。目标是低调的精致感，而非哗众取宠。

滚动入场：元素进入视口时淡入。使用
```
translateY(12px)
```
+
```
opacity: 0
```
，在
```
600ms
```
内通过
```
cubic-bezier(0.16, 1, 0.3, 1)
```
过渡至正常状态。使用
```
IntersectionObserver
```
，绝不能使用
```
window.addEventListener('scroll')
```
。
悬停状态：卡片通过超细微的阴影变化实现抬起效果（
```
box-shadow
```
从
```
0 0 0
```
过渡到
```
0 2px 8px rgba(0,0,0,0.04)
```
，时长
```
200ms
```
）。按钮在
```
:active
```
状态下使用
```
scale(0.98)
```
效果。
交错显示：列表和网格条目以级联延迟方式入场（
```
animation-delay: calc(var(--index) * 80ms)
```
）。绝不能一次性加载所有内容。
背景环境动效：可选。单个移动极慢的径向渐变 blob（
```
animation-duration: 20s+
```
，
```
opacity: 0.02-0.04
```
）在首屏区块后方漂移。必须应用到
```
position: fixed; pointer-events: none
```
层级。绝不能应用于滚动容器。
性能：仅通过
```
transform
```
和
```
opacity
```
实现动画。禁止使用触发重排的属性（
```
top
```
、
```
left
```
、
```
width
```
、
```
height
```
）。仅在活跃动画元素上谨慎使用
```
will-change: transform
```
。

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
```
规则。
为所有主要内容块添加滚动入场动画。
通过图像、环境渐变或细微纹理为区块增加视觉深度——禁止使用空旷的扁平背景。
提供原生体现这种高端、整洁、编辑风格美学的代码，无需手动调整。