web-prototype-taste-editorial

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Prototype — Editorial Minimalism

网页原型——编辑风格极简主义

A single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for "clean", "editorial", "premium SaaS", "documentation", or "knowledge product".

一款单页网页原型，风格类似Notion/Linear的营销网站或高端文档界面。当需求要求“简洁”“编辑风格”“高端SaaS”“文档”或“知识产品”时可使用。

Source

来源

Distilled from Leonxlnx/taste-skill —

skills/minimalist-skill/SKILL.md

and the spatial-rhythm rules in

skills/taste-skill/SKILL.md

. See

example.html

in this directory for a fully-realized template.

改编自Leonxlnx/taste-skill —

skills/minimalist-skill/SKILL.md

以及

skills/taste-skill/SKILL.md

中的空间节奏规则。查看本目录下的

example.html

获取完整模板。

Hard rules

硬性规则

Canvas: warm off-white (
```
#FBFBFA
```
or
```
#F7F6F3
```
), never pure white.
Foreground: off-black
```
#111111
```
, secondary text
```
#787774
```
. Never
```
#000000
```
.

Borders:

1px solid #EAEAEA

only. No drop shadows above

0 1px 2px rgba(0,0,0,0.04)

Type pairing: display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).

Display tracking:

letter-spacing: -0.025em

line-height: 1.05

Pastel chips only: muted backgrounds (
```
#FDEBEC
```
,
```
#E1F3FE
```
,
```
#EDF3EC
```
,
```
#FBF3DB
```
) for tags/badges. Never as section backgrounds.
Containers:
```
border-radius: 8–12px
```
max. No pill containers, no
```
rounded-full
```
on cards.
Section padding:
```
py-24
```
minimum,
```
py-32
```
for hero.

画布： 暖调米白色（
```
#FBFBFA
```
或
```
#F7F6F3
```
），绝对不能用纯白。
前景色： 近黑色
```
#111111
```
，次要文本
```
#787774
```
。绝对不能用
```
#000000
```
。

边框： 仅使用

1px solid #EAEAEA

。阴影不得超过

0 1px 2px rgba(0,0,0,0.04)

。

字体搭配： 标题使用编辑风格衬线字体（Instrument Serif / Newsreader / Lyon），正文使用无衬线字体（Geist / Switzer / SF Pro），元信息/快捷键使用等宽字体（Geist Mono / JetBrains Mono）。

标题字距：

letter-spacing: -0.025em

，

line-height: 1.05

。

仅使用淡色标签块： 标签/徽章使用柔和背景色（
```
#FDEBEC
```
,
```
#E1F3FE
```
,
```
#EDF3EC
```
,
```
#FBF3DB
```
）。绝对不能用作区块背景。
容器： 最大
```
border-radius: 8–12px
```
。禁止胶囊形容器，卡片不能使用
```
rounded-full
```
。
区块内边距： 最小
```
py-24
```
，hero区块使用
```
py-32
```
。

Banned

禁用项

Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).
Gradients, neon, glassmorphism beyond a subtle navbar blur.
Drop shadows above
```
shadow-sm
```
. No glows.
Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.
AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen".
Pure black
```
#000000
```
.
Centered hero H1 over a dark image.

Inter、Roboto、Open Sans（改用Geist / Switzer / SF Pro）。
通用的Lucide细线条图标（改用Phosphor Bold或Radix）。
渐变、霓虹效果，除了导航栏的轻微模糊外，禁止毛玻璃效果。
超过
```
shadow-sm
```
的阴影。禁止发光效果。
通用占位名称（John Doe / Acme / Lorem）。使用特定的上下文内容。
AI生成文案的陈词滥调："Elevate"、"Seamless"、"Unleash"、"Next-Gen"。
纯黑色
```
#000000
```
。
在深色图片上方居中放置hero标题H1。

Required components

必选组件

Sticky pill navbar (translucent off-white,
```
backdrop-blur-md
```
, hairline border).
Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at
```
max-w-[52ch]
```
.
Bento feature grid with uneven row heights and visible
```
1px
```
dividers — never 3 equal cards.
A "what it isn't" or contrast block separated by
```
border-t
```
only, no card.
Pricing or signup band with one accent CTA.
Footer: monospace metadata, single hairline above.

粘性胶囊导航栏（半透明米白色，
```
backdrop-blur-md
```
，细边框）。
不对称hero区块：衬线标题左对齐，上方带眉形标签，导语段落宽度限制为
```
max-w-[52ch]
```
。
错落式功能网格（Bento网格），行高不均，带有可见的
```
1px
```
分隔线——绝对不能用3个等高卡片。
一个“非此即彼”或对比区块，仅用
```
border-t
```
分隔，不使用卡片。
定价或注册栏，带有一个强调性CTA按钮。
页脚：等宽字体元信息，上方带单条细边框。

Motion (subtle only)

微动效（仅需细腻效果）

Scroll entry:

translateY(12px) → 0

opacity 0 → 1

over

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

IntersectionObserver

only.

Hover lift on cards:

box-shadow

from

0 0 0

0 2px 8px rgba(0,0,0,0.04)

over

200ms

Stagger lists by
```
--index * 80ms
```
.
Animate only
```
transform
```
and
```
opacity
```
.

滚动入场：

translateY(12px) → 0

opacity 0 → 1

，时长

600ms

，缓动函数

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

。仅使用

IntersectionObserver

实现。

卡片悬停抬起效果：
```
box-shadow
```
从
```
0 0 0
```
变为
```
0 2px 8px rgba(0,0,0,0.04)
```
，时长
```
200ms
```
。
列表元素按
```
--index * 80ms
```
依次动画。
仅对
```
transform
```
和
```
opacity
```
属性添加动画。

Pre-flight

预检查清单

Serif display + grotesque body pairing present
Canvas is warm off-white, foreground is off-black
All cards/dividers use
```
1px solid #EAEAEA
```
At least one asymmetric layout (split, eyebrow tag, uneven bento)
Pastel chips used only for tags, never as block backgrounds
Section padding ≥
```
py-24
```
No emojis, no banned fonts, no AI clichés

已使用衬线标题+无衬线正文的字体搭配
画布为暖调米白色，前景色为近黑色
所有卡片/分隔线使用
```
1px solid #EAEAEA
```
至少包含一种不对称布局（分栏、眉形标签、错落式Bento网格）
淡色标签块仅用于标签，未用作区块背景
区块内边距 ≥
```
py-24
```
无表情符号、无禁用字体、无AI陈词滥调