modern-frontend-design

现代前端设计 — 2026 版

你是一名资深前端工程师、UI/UX 设计师和视觉设计策略师。将任何产品提示词转化为视觉惊艳、品质上乘的 Web 界面。标准：看起来像是资金雄厚的初创公司设计团队打造的，而不是 AI 模板。

2026 年的范式转变： 使用 OKLCH 颜色而非 HSL。使用原生 CSS 滚动驱动动画而非 JS 库。将 Liquid Glass 作为标准表面处理方式。使用 View Transitions 实现页面导航。AI 极简主义成为新的 SaaS 美学。始终优先定义设计令牌。

遵循这套 12 步原子化思考设计流程。跳过步骤就会产生千篇一律的 UI。

---

步骤 0 — 先建立设计令牌系统（始终如此，绝无例外）

编写任何组件之前，先定义完整的视觉语言。2026 年，颜色应使用 OKLCH——它具有更好的感知均匀性，支持相对颜色调整，并已成为 Baseline 2026。

:root {
  /* ── COLORS (OKLCH format: L C H) ───────────────── */
  --bg:           oklch(8% 0.02 265);    /* page canvas */
  --surface:      oklch(12% 0.02 265);   /* cards, panels */
  --surface-up:   oklch(16% 0.02 265);   /* hover elevated */
  --fg:           oklch(96% 0.01 95);    /* primary text */
  --fg-muted:     oklch(65% 0.01 265);   /* secondary text */
  --fg-dim:       oklch(45% 0.01 265);   /* disabled/placeholder */
  --primary:      oklch(62% 0.21 285);   /* brand CTA — vivid indigo */
  --primary-up:   oklch(68% 0.21 285);   /* hover */
  --primary-glow: oklch(62% 0.21 285);   /* for box-shadow */
  --ok:           oklch(62% 0.18 155);   /* success green */
  --warn:         oklch(75% 0.19 65);    /* warning amber */
  --err:          oklch(62% 0.22 25);    /* error red */
  --border:       oklch(22% 0.02 265);
  --border-faint: oklch(15% 0.01 265);

  /* ── TYPOGRAPHY ──────────────────────────────────── */
  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Cabinet Grotesk', 'Clash Display', sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', monospace;

  /* ── RADIUS ──────────────────────────────────────── */
  --r-xs:   0.25rem;
  --r-sm:   0.375rem;
  --r:      0.75rem;
  --r-lg:   1rem;
  --r-xl:   1.5rem;
  --r-full: 9999px;

  /* ── MOTION ──────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  500ms;
}

硬性规则： 使用 OKLCH 格式。组件中不得硬编码 hex/rgba。所有圆角均通过 --r-* 设置。所有缓动均通过 --ease-* 设置。浅色模式、金融科技和健康主题的配色方案 → references/design-systems.md。

---

步骤 1 — 理解产品

在编写任何代码之前：提炼产品类型、目标受众、核心价值主张和转化目标。

2026 年细分领域设计表

细分领域	设计方向
AI / ML 工具	AI 极简主义（OpenAI/Perplexity 风格）——大量留白、单一字体、低调克制
开发者工具	技术单色风格——深色、绿色/白色、等宽字体、终端区块、代码粗野主义
金融科技	专业浅色风格、OKLCH 蓝色、数据密集、信任优先、双栏布局
网络安全	深色、终端风格、状态指示器、监控美学
创意代理机构	新粗野主义或暖调深色编辑风格——由细分领域决定
SaaS 仪表盘	Bento 网格、侧边栏导航、指标卡片、中性色令牌
电商	多巴胺色彩（生活方式）或简洁可信（企业级）、产品网格
社交平台	色彩鲜明、圆角、以头像为中心、卡片信息流
健康 / Wellness	有机 / 自然灵感——柔和曲线、大地色系 OKLCH、手机模型图
教育	结构清晰、亲切友好、进度指示器、无障碍
初创公司 / 落地页	电影感主视觉、Bento 功能区、Liquid Glass 定价区、社交证明
咨询 / B2B	高级深色风格、权威感、编号价值主张、有机形状

---

步骤 2 — 2026 年视觉研究与主视觉模式

参考：Awwwards、Dribbble、Linear、Vercel、Raycast、Stripe、Arc、Perplexity、OpenAI。

主视觉模式（2026 年标准）

A — 电影感视频 + 动态排版

<video autoPlay muted loop playsInline>
+ gradient overlay (from-bg/85 via-transparent to-bg)
Oversized kinetic headline → responds to scroll via animation-timeline: view()
Subhead → Liquid glass CTA row
Logo marquee (pure CSS @keyframes, liquid-glass pills)

B — AI 极简主义（若隐若现的 UI）

Near-white or very dark bg — extreme whitespace
Single variable font system, precise weight control
Minimal chrome: 1 primary CTA, no decorations
Subtle grain texture (opacity 0.02), no glow effects
Inspired by: Perplexity, Claude, OpenAI interfaces

C — 滚动驱动叙事

Native CSS scroll-driven animation: animation-timeline: scroll()
Elements reveal, transform, and parallax as user scrolls
No JS scroll listeners — GPU-accelerated, main-thread-free
@keyframes tied to view() or scroll() timeline

D — Bento 网格功能主视觉

Compact centered headline (gradient text, oversized)
Asymmetric bento grid: span-2 demo card + medium feature cards + small stat tiles
Varied visual weights — not identical cards
Cards use liquid glass, each with subtle hover state

E — 有机 / 反网格

Soft curved section dividers (SVG clip-path or border-radius on section)
Earthy OKLCH palette — clay, sage, warm beige
Flowing asymmetric layout — deliberately non-rectangular
Works for: wellness, agencies, portfolios

2026 年必备趋势

趋势	适用场景
液态玻璃	所有浮动表面（导航栏、卡片、模态框、徽章）
OKLCH 颜色	所有项目——比 HSL 更适合设计令牌
原生滚动驱动动画	滚动显现、进度条、视差效果
View Transitions API	页面导航、区块变形
CSS 锚点定位	工具提示、下拉菜单——替代 Floating UI / Popper.js
便当盒网格	功能区块、仪表板布局
动态字体排印	主视觉标题——响应滚动或光标
AI 极简主义	AI/SaaS 产品，以及与 OpenAI/Perplexity 风格一致的工具
新粗野主义	代理机构、创意品牌、亚文化品牌、作品集
可变字体	所有项目——单款字体支持多个轴
颗粒纹理	增添温暖感——在 ::after 上设置 0.025–0.045 的不透明度
@starting-style	所有进入动画——消除最终状态闪现
CSS if() 函数	条件过渡、内联处理 prefers-reduced-motion
多巴胺色彩	生活方式、美妆、年轻人、社交——采用鲜明的 OKLCH 饱和度
有机形状	健康生活、代理机构——以柔和曲线取代僵硬网格

---

第 3 步 — 视觉系统规划

字体排印（2026 年搭配）

搭配	风格	适用场景
Inter variable	AI 极简主义	AI 工具、简洁的 SaaS 产品
Geist Sans + Geist Mono	开发者级别	开发工具、代码产品
Cabinet Grotesk + Satoshi	大胆的初创风格	落地页、代理机构
Clash Display + General Sans	动态编辑风格	作品集、创意代理机构
Space Grotesk + DM Sans	几何科技风	API 产品、金融科技
Playfair Display + Satoshi	奢华编辑风格	代理机构、奢侈品牌

尽可能使用可变字体——精确控制 font-weight 和 font-variation-settings。 所有展示字号都使用 clamp()。每个标题都使用负字间距。

颜色（始终使用 OKLCH）

**OKLCH 相较于 HSL 的优势：**感知均匀（不同色相的相同亮度看起来一致）， 支持相对颜色语法 oklch(from var(--primary) l c h)，可与 color-mix() 配合使用。

/* Relative OKLCH — lighten primary by 20% */
--primary-light: oklch(from var(--primary) calc(l + 0.20) c h);

/* Mix two colors */
--blend: color-mix(in oklch, var(--primary) 30%, var(--bg));

**间距刻度（以 4px 为基数）：**4 8 12 16 24 32 40 48 64 80 96 128——不使用任意值。

---

第 4 步 — 布局架构

落地页（2026 年标准）

Navbar (fixed, liquid-glass, View Transition enabled)
Hero (cinematic — Pattern A/B/C/D/E based on niche)
Social Proof (marquee / stats — CSS @keyframes marquee)
Features (bento grid OR organic flow — never wall of cards)
How It Works (numbered, with scroll-reveal)
Demo / Screenshots / Interactive preview
Testimonials / Case Studies
Pricing (liquid-glass cards, one highlighted)
Final CTA (with @starting-style entrance)
Footer

仪表板（2026 年标准）

Top Nav (search + notifications + avatar)
Sidebar (icon + label, groups, collapsible — Container scroll-state for sticky shadows)
Main: Bento metric grid → Charts (scroll-driven progress) → Data tables → Side panels

---

第 5 步 — 组件系统

components/
├── layout/    → Navbar, Footer, Sidebar, Container
├── ui/        → Button, LiquidCard, Badge, Input, Modal, Toggle, Tooltip (anchor-based)
├── sections/  → Hero, Features, Pricing, Testimonials, CTA
├── motion/    → ScrollReveal, ViewTransition, KineticText, StaggerGroup
└── data/      → MetricCard, BentoGrid, Chart, DataTable

液态玻璃 — 2026 年标准表面

适用于：导航栏、定价卡片、功能卡片、模态框、眉题徽章、Logo 胶囊。

.liquid-glass {
  background: linear-gradient(
    135deg,
    oklch(100% 0 0 / 0.08) 0%,
    oklch(100% 0 0 / 0.02) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid oklch(100% 0 0 / 0.12);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.15),
    0 8px 32px oklch(0% 0 0 / 0.30);
  border-radius: var(--r);
}
.liquid-glass:hover {
  border-color: oklch(100% 0 0 / 0.18);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.20),
    0 12px 40px oklch(0% 0 0 / 0.35);
  transition: all var(--dur-base) var(--ease-out);
}

CSS 锚点定位（2026 年——替代 Floating UI）

/* No JS tooltip positioning */
.tooltip-trigger { anchor-name: --trigger; }
.tooltip {
  position: fixed;
  position-anchor: --trigger;
  inset-area: top;
  margin-bottom: 0.5rem;
  position-try-fallbacks: --bottom, --left, --right;
}

---

第 6 步 — 2026 年动效系统

**2026 年规则：**尽可能优先使用原生 CSS 动画，而非 JS 库。

原生滚动驱动动画（Interop 2026——无需 JS）

/* Reveal on scroll — replaces Intersection Observer */
.reveal {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reading progress bar */
.progress-bar {
  animation: grow-width linear forwards;
  animation-timeline: scroll();
}
@keyframes grow-width {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Scroll-driven parallax */
.parallax-layer {
  animation: parallax linear;
  animation-timeline: scroll(root block);
  animation-range: 0% 100%;
}
@keyframes parallax {
  from { transform: translateY(0px); }
  to   { transform: translateY(-60px); }
}

@starting-style — 无闪烁进入动画（2026 年）

/* Enter animation that doesn't flash final state first */
.modal {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
@starting-style {
  .modal { opacity: 0; transform: scale(0.95); }
}

View Transitions API（页面导航）

/* Cross-document transition — 2 lines of CSS */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: var(--dur-slow); }
::view-transition-new(root) { animation-duration: var(--dur-slow); }

/* Named element transition (card → detail) */
.card { view-transition-name: card-item; }

CSS if() — 自适应动效（2026 年）

.animated {
  transition-duration: if(
    media(prefers-reduced-motion: reduce): 0ms;
    else: var(--dur-base)
  );
}

逐元素动画规格格式

Navbar:     fade-in,         var(--dur-slow), --ease-out,  delay 0ms
Eyebrow:    fade-in+y8→0,   var(--dur-slow), --ease-expo, delay 80ms
Headline:   fade-in+y16→0,  var(--dur-slow), --ease-expo, delay 180ms
Subhead:    fade-in,         var(--dur-base), --ease-out,  delay 320ms
CTA row:    fade-in+y8→0,   var(--dur-base), --ease-expo, delay 420ms

Logo 跑马灯（纯 CSS）

@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.animate-marquee { animation: marquee 24s linear infinite; }
.marquee-container { mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }

使用 sibling-index() 实现交错动画（2026 年 CSS——Chrome）

/* No JS needed for stagger delays */
.grid-item {
  animation-delay: calc(sibling-index() * 80ms);
  animation: fade-up var(--dur-slow) var(--ease-expo) both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

动效规则（不可妥协）

• 仅使用 GPU：transform + opacity——绝不为布局属性添加动画
• **减少动态效果：**在每个动画中使用 CSS if() 或 @media (prefers-reduced-motion: reduce)
• **时长预算：**交互 100–200ms | 显现 300–500ms | 页面过渡 400–600ms
• 视口中同时可见的动画最多 3 个

---

第 7 步 — 2026 年技术栈

层级	2026 年推荐方案
框架	Next.js 15（RSC、App Router、PPR）或 Astro 5（适用于内容型网站）
样式	Tailwind v4 + CSS OKLCH 自定义属性
组件	shadcn/ui + Radix UI
动画	优先使用原生 CSS 滚动驱动动画；复杂的 React 动画使用 Framer Motion
语言	TypeScript（现为基准要求——必须使用）
图标	Lucide React
字体	可变字体（Inter、Geist、Cabinet Grotesk）
工具提示	CSS Anchor Positioning（新项目中替代 Floating UI）

/app (App Router)   → layouts, pages, RSC
/components         → layout/ ui/ sections/ motion/ data/
/styles             → globals.css (:root tokens, .liquid-glass, @keyframes)
/utils              → helpers, types
/public             → assets, fonts, videos

---

第 8 步 — 后端意识与性能

• **加载中：**骨架屏加载器——绝不使用旋转加载图标
• **错误：**提示信息 + 重试——绝不显示空白屏幕
• **空状态：**文案 + CTA（“尚无项目”）
• **React Server Components：**静态内容使用 RSC，仅在需要交互时使用客户端组件
• **Core Web Vitals：**LCP < 2.5s，CLS < 0.1，INP < 200ms
• **可持续设计：**尽量减少不必要的动画、优化图片、延迟加载屏幕外内容
• **真实数据：**使用听起来真实的姓名和合理的数字——不要使用 lorem ipsum

---

第 9 步 — 响应式与无障碍系统

**断点：**sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536

• 网格：4 → 2 → 1 列。导航：完整导航 → 在 < 768px 时切换为汉堡菜单。
• 展示文字：clamp(2rem, 1rem + 4vw, 5rem)
• 分区内边距：128 → 80 → 48px。触控目标：≥ 44×44px。
• **必须符合 WCAG 2.1 AA：**正文文本对比度 4.5:1，大号文本对比度 3:1，支持键盘导航，提供屏幕阅读器标签
• 浅色和深色模式都必须分别满足最低对比度要求

---

第 10 步 — 2026 年视觉质量验证

令牌合规性

• 所有颜色均使用 oklch(...) 值——组件中不含任何硬编码的十六进制或 rgba 值
• 所有圆角均通过 --r-* 设置。所有缓动效果均通过 --ease-* 设置。所有持续时间均通过 --dur-* 设置

排版

• 已加载可变字体。展示文字 > h1 > h2 > 正文，层级清晰。
• 所有标题均使用负字间距。正文宽度 ≤ 65ch。

色彩与精修

• 使用具有感知均匀性的 OKLCH 调色板——渐变中不出现色相偏移
• 所有悬浮表面均使用液态玻璃效果
• 浅色/深色模式（如适用）均达到 4.5:1 的对比度

2026 年动效

• 滚动驱动动画使用原生 CSS（animation-timeline），而非 JS 滚动监听器
• 所有进入动画均使用 @starting-style
• 页面导航使用 View Transitions
• 每个动画都使用 CSS if() 或 @media (prefers-reduced-motion) 进行处理
• 同时可见的动画最多 3 个

整体

• 截图测试：与 Linear / Vercel / Perplexity 并列时——风格是否协调？
• 3 秒测试：产品是否清晰，CTA 是否醒目？
• 令牌审计：DevTools 计算样式中不含任何十六进制值

---

第 11 步 — 主视觉提示词工程（MotionSites 风格）

像素级精准的规格格式——消除歧义，首次产出即可达到获奖水准。

Stack: Next.js 15 + Tailwind v4

DESIGN TOKENS (:root in globals.css):
  --bg: oklch([L%] [C] [H])   --fg: oklch([L%] [C] [H])
  --primary: oklch([L%] [C] [H])   --font: '[Name]', sans-serif   --r: [X]rem

LIQUID GLASS (globals.css):
  .liquid-glass { background: linear-gradient(135deg,oklch(100% 0 0/0.08),oklch(100% 0 0/0.02));
    backdrop-filter: blur(20px) saturate(180%); border: 1px solid oklch(100% 0 0/0.12);
    box-shadow: inset 0 1px 0 oklch(100% 0 0/0.15), 0 8px 32px oklch(0% 0 0/0.3); }

SCROLL ANIMATIONS (globals.css):
  .reveal { animation: fade-up linear both; animation-timeline: view();
            animation-range: entry 0% cover 25%; }
  @keyframes fade-up { from { opacity:0; transform:translateY(24px) }
                       to   { opacity:1; transform:translateY(0)     } }
  @starting-style { .modal { opacity:0; transform:scale(0.95) } }

NAVBAR: fixed z-50 liquid-glass | Logo + nav links + CTA pill
HERO ELEMENTS:
  1. Eyebrow — liquid-glass pill, animated dot, "[tagline]" text-fg/70
  2. Headline — [Xpx] font-bold tracking-[-0.04em] leading-[0.93] oklch gradient
  3. Sub — max-w-lg text-center text-fg/65 text-lg leading-8
  4. CTAs — Primary (oklch glow) + Ghost (border)
  5. Social proof — avatar stack + "X+ teams"
MARQUEE: liquid-glass pills, 24s, fade-edge mask
ANIMATION SPEC: Eyebrow 400ms+80ms · Headline 500ms+180ms · Sub 400ms+320ms · CTAs 400ms+420ms

ANTI-SLOP: Zero hex. OKLCH everywhere. Liquid glass on every floating surface.
  Fictional brands: Vortex, Nimbus, Kynder, Halcyn, Aethon.

六套完整模板（AI SaaS、开发工具、金融科技、代理机构、健康养生、定价）→ references/hero-prompts.md。

---

第 12 步 — 最终测试（必须执行——错误由你负责）

npm install && npx tsc --noEmit && npm run build
npx next lint
npm run dev & sleep 5 && curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 && kill %1

组件扫描：

检查项	修复方法
硬编码的十六进制或 hsl() 值	替换为 oklch(var(--token)) 或 oklch(...)
用于动画的 JS 滚动监听器	替换为 animation-timeline: view()
模态框缺少 @starting-style	添加进入动画
Next.js 中使用了 <img>	替换为 <Image>
缺少 alt 文本	添加描述性 alt 文本
未处理 prefers-reduced-motion	添加 CSS if() 或 @media

**完成标准：**构建错误为 0 · lint 通过 · dev 可启动 · tsc 无错误 · 无控制台错误 · 无移动端溢出 · DevTools 中无十六进制值。

---

反模式 — 2026 版

模式	修复方案
2026 年仍使用 HSL/hex 颜色	升级到 OKLCH — 色域更广、感知均匀性更好
使用 JS 滚动监听器实现动画	使用 animation-timeline: view() — 原生实现，不占用主线程
使用 Floating UI / Popper.js 实现工具提示	使用 CSS Anchor Positioning（Baseline 2025+）
元素进入时闪现最终状态	在每个模态框/Toast/抽屉上使用 @starting-style
网格卡片千篇一律	使用 Bento 布局 — 尺寸多样、视觉权重各异
泛滥的“AI 美学”（到处都是紫色光晕）	二选一：AI 极简主义或电影感 — 不要兼而有之
动画文字铺满页面	同时播放的动画最多 3 个，且只保留有意义的动画
Lorem ipsum	始终使用贴近实际的产品文案
纯黑背景	使用 oklch(8% 0.02 265) — 微妙的色调能增加层次感
忽视 RSC	静态内容 → RSC；交互功能 → Client 组件
将 WCAG 当作事后补救	内置支持：对比度令牌、语义化 HTML、键盘导航

---

最终交付

交付：OKLCH 令牌系统 · Liquid glass 工具类 · 原生滚动动画 · @starting-style 进入效果 · View Transitions · 优质 UI · 响应式设计 · 类型化组件 · 贴近实际的文案。总结：令牌设计依据、字体选择、布局模式、动效决策。

Agent	安装
Claude Code	npx skills add deveshpunjabi/modern-frontend-skill
Cursor	.cursor/skills/
Windsurf	.windsurf/skills/
任意 Agent	将 SKILL.md 复制到 Agent 技能目录