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
    to
    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陈词滥调