web-prototype-taste-soft

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Prototype — Soft Premium

网页原型 — 柔和高端风格

For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture.

适用于要求「苹果风格」「Linear级质感」「高端消费级」「沉稳SaaS」或「15万美元级 agency 出品」效果的需求。整体风格柔和、有分量，且执着于嵌套式架构设计。

Source

来源

Distilled from Leonxlnx/taste-skill —

skills/soft-skill/SKILL.md

("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See

example.html

in this directory for a fully-realized template.

提炼自Leonxlnx/taste-skill项目中

skills/soft-skill/SKILL.md

（「先锋UI架构师」）的触觉微美学、双层边框架构和动效编排规则。可查看本目录下的

example.html

获取完整实现模板。

Hard rules

硬性规则

Canvas: silver-grey or warm cream (
```
#F2F2F0
```
or
```
#FDFBF7
```
). Not pure white.
Type pairing: display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.

Display:

clamp(48px, 7vw, 96px)

letter-spacing: -0.035em

line-height: 0.96

. Heavy weight (700+).

Squircle radii:

border-radius: 28px–40px

(

rounded-[2rem]

rounded-[2.5rem]

) on major surfaces.

Double-bezel mandatory: every important card is a wrapper (
```
p-1.5
```
, hairline border, soft outer shadow) containing an inner core with its own background and a concentric smaller radius (e.g., outer
```
2rem
```
, inner
```
calc(2rem - 0.375rem)
```
).
CTA = button-in-button: primary CTAs are full pills (
```
rounded-full px-6 py-3
```
); the trailing arrow lives inside its own circular wrapper flush-right.
Ambient depth: one slow-drifting radial mesh blob behind hero,
```
opacity ≤ 0.18
```
,
```
pointer-events: none
```
, fixed.
Eyebrow tag above each section header: pill, uppercase mono,
```
letter-spacing: 0.2em
```
,
```
text-[10px]
```
.

画布： 银灰色或暖米白色（
```
#F2F2F0
```
或
```
#FDFBF7
```
），禁用纯白色。
字体搭配： 标题字体使用Geist / Plus Jakarta Sans / Cabinet Grotesk的粗体，正文使用同一系列字体，等宽元数据使用Geist Mono。

标题规格：

clamp(48px, 7vw, 96px)

，

letter-spacing: -0.035em

，

line-height: 0.96

，字重≥700。

圆角矩形半径： 主要界面元素的
```
border-radius
```
设置为28px–40px（对应
```
rounded-[2rem]
```
至
```
rounded-[2.5rem]
```
）。
强制双层边框： 所有重要卡片需包含外层容器（
```
p-1.5
```
、细边框、柔和外阴影）和内层核心，内层核心有独立背景且圆角半径小于外层（例如外层
```
2rem
```
，内层
```
calc(2rem - 0.375rem)
```
）。
CTA样式：按钮嵌套式：主CTA为全圆角胶囊样式（
```
rounded-full px-6 py-3
```
）；尾部箭头需放在独立圆形容器内并靠右对齐。
背景深度： hero区域后方添加一个缓慢移动的径向网格图形，
```
opacity ≤ 0.18
```
，
```
pointer-events: none
```
，固定定位。
章节眉标： 每个章节标题上方添加胶囊状标签，使用大写等宽字体，
```
letter-spacing: 0.2em
```
，
```
text-[10px]
```
。

Banned

禁用项

Inter, Roboto, Helvetica, Open Sans.
Generic 1px solid gray borders (use
```
border-black/5
```
/
```
ring-1 ring-black/5
```
).
```
shadow-md
```
,
```
shadow-lg
```
, hard drop shadows. Only diffuse, wide-spread, low-opacity (
```
0 20px 40px -15px rgba(0,0,0,0.05)
```
).
Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (
```
mt-6 mx-auto w-max rounded-full
```
).
Linear or
```
ease-in-out
```
transitions. Use
```
cubic-bezier(0.32, 0.72, 0, 1)
```
or spring physics.
```
h-screen
```
(use
```
min-h-[100dvh]
```
).
Animating
```
width
```
/
```
height
```
/
```
top
```
/
```
left
```
. Only
```
transform
```
and
```
opacity
```
.
Pure black
```
#000
```
. Use Zinc-950 / Off-Black.

Inter、Roboto、Helvetica、Open Sans字体。
通用1px纯灰色边框（改用
```
border-black/5
```
/
```
ring-1 ring-black/5
```
）。
```
shadow-md
```
、
```
shadow-lg
```
这类生硬的投影，仅允许使用弥散、大范围、低透明度的阴影（如
```
0 20px 40px -15px rgba(0,0,0,0.05)
```
）。
紧贴顶部的通栏粘性导航栏，改用悬浮玻璃胶囊样式（
```
mt-6 mx-auto w-max rounded-full
```
）。
Linear或
```
ease-in-out
```
过渡效果，改用
```
cubic-bezier(0.32, 0.72, 0, 1)
```
或弹性物理动效。
```
h-screen
```
属性（改用
```
min-h-[100dvh]
```
）。
对
```
width
```
/
```
height
```
/
```
top
```
/
```
left
```
属性做动画，仅允许对
```
transform
```
和
```
opacity
```
做动画。
纯黑色
```
#000
```
，改用Zinc-950 / 近黑色。

Required components

必填组件

Floating-pill navbar with backdrop-blur-2xl.
Asymmetric hero: massive heavy display, eyebrow tag, body lede
```
max-w-[52ch]
```
, two CTAs (primary pill with button-in-button arrow + ghost).
Bento grid using the double-bezel pattern; at least one wide card and one tall card.
Feature row with z-axis cascade or split image module.
Marquee strip of customer logos, slow infinite translation (
```
-100% / 20s
```
), pause on hover.
Closing band on a soft inverted surface (deep zinc / espresso).
Footer: monospace meta, hairline above.

带
```
backdrop-blur-2xl
```
效果的悬浮胶囊导航栏。
非对称hero区域：超大粗体标题、眉标、最大宽度为
```
max-w-[52ch]
```
的正文简介、两个CTA（带按钮嵌套式箭头的主胶囊按钮 + 幽灵按钮）。
采用双层边框模式的Bento网格；至少包含一个宽卡片和一个高卡片。
带Z轴层叠效果的功能行或分栏图片模块。
客户logo滚动条，缓慢无限平移（
```
-100% / 20s
```
）， hover时暂停。
基于深色背景（深锌色 / 浓咖啡色）的收尾区域。
页脚：等宽元数据、顶部细线条分隔。

Motion

动效规则

All transitions:

transition: transform 700ms cubic-bezier(0.32,0.72,0,1)

minimum.

Hover on CTAs: outer pill scales
```
0.98
```
on
```
:active
```
, inner trailing-icon circle translates
```
(+1px, -1px)
```
and
```
scale(1.05)
```
.

Scroll entry:

translateY(16px) blur(8px) opacity(0)

→

translateY(0) blur(0) opacity(1)

IntersectionObserver

only.

Marquee:
```
transform: translateX(-50%)
```
over
```
30s linear
```
infinite, applied to a duplicated track.
Hero mesh blob: 24s+ keyframe drift, opacity-only or transform-only.

所有过渡效果：至少设置

transition: transform 700ms cubic-bezier(0.32,0.72,0,1)

。

CTA hover效果：外层胶囊在
```
:active
```
时缩放至0.98，内层尾部图标容器平移
```
(+1px, -1px)
```
并缩放至1.05。

滚动入场效果：从

translateY(16px) blur(8px) opacity(0)

过渡到

translateY(0) blur(0) opacity(1)

，仅使用

IntersectionObserver

实现。

滚动条：通过复制轨道实现
```
transform: translateX(-50%)
```
的30s线性无限平移。
Hero背景网格图形：24秒以上的关键帧漂移动画，仅修改opacity或transform属性。

Pre-flight

预检查清单

Floating pill nav with
```
backdrop-blur
```
+ hairline ring
At least one card uses the double-bezel (outer shell + inner core, concentric radii)
Primary CTA uses button-in-button trailing icon
Section padding ≥
```
py-24
```
No banned fonts; display weight ≥ 700
Hero uses
```
min-h-[100dvh]
```
, never
```
100vh
```
All transitions use custom cubic-bezier or spring; no
```
linear
```
/
```
ease-in-out
```
Mobile: layout collapses to single column under 768px, all rotations + overlaps removed

带
```
backdrop-blur
```
效果和细边框的悬浮胶囊导航栏
至少有一个卡片采用双层边框（外层容器+内层核心，同心圆角）
主CTA使用按钮嵌套式尾部图标
章节内边距≥
```
py-24
```
未使用禁用字体；标题字重≥700
Hero区域使用
```
min-h-[100dvh]
```
，绝不使用
```
100vh
```
所有过渡效果使用自定义cubic-bezier或弹性动效；禁用
```
linear
```
/
```
ease-in-out
```
移动端：768px以下布局 collapse 为单列，移除所有旋转和重叠效果