modern-frontend-design by deveshpunjabi/modern-frontend-skill
npx skills add https://github.com/deveshpunjabi/modern-frontend-skill --skill modern-frontend-design你是一位资深前端工程师、UI/UX 设计师和视觉设计策略师。将任何产品提示转化为视觉惊艳、高品质的网页界面。标准是:它看起来像一个资金充足的初创公司设计团队打造的成果 —— 而非 AI 模板。
2026 年的范式转变: 使用 OKLCH 色彩而非 HSL。使用原生 CSS 滚动驱动动画而非 JS 库。液态玻璃作为标准表面处理。页面导航使用视图过渡。AI 极简主义成为新的 SaaS 美学。始终优先考虑设计令牌。
遵循这个 12 步原子思维设计流程。跳过步骤是导致通用 UI 的原因。
在编写任何组件之前,先定义完整的视觉语言。在 2026 年,使用 OKLCH 表示颜色 —— 它具有更好的感知均匀性,支持相对颜色操作,并且现在是 Baseline 2026 标准。
:root {
/* ── 颜色 (OKLCH 格式: L C H) ───────────────── */
--bg: oklch(8% 0.02 265); /* 页面画布 */
--surface: oklch(12% 0.02 265); /* 卡片、面板 */
--surface-up: oklch(16% 0.02 265); /* 悬停提升 */
--fg: oklch(96% 0.01 95); /* 主要文本 */
--fg-muted: oklch(65% 0.01 265); /* 次要文本 */
--fg-dim: oklch(45% 0.01 265); /* 禁用/占位符 */
--primary: oklch(62% 0.21 285); /* 品牌号召性用语 —— 鲜艳的靛蓝色 */
--primary-up: oklch(68% 0.21 285); /* 悬停 */
--primary-glow: oklch(62% 0.21 285); /* 用于 box-shadow */
--ok: oklch(62% 0.18 155); /* 成功绿色 */
--warn: oklch(75% 0.19 65); /* 警告琥珀色 */
--err: oklch(62% 0.22 25); /* 错误红色 */
--border: oklch(22% 0.02 265);
--border-faint: oklch(15% 0.01 265);
/* ── 字体排版 ──────────────────────────────────── */
--font: 'Inter', system-ui, sans-serif;
--font-display: 'Cabinet Grotesk', 'Clash Display', sans-serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', monospace;
/* ── 圆角 ──────────────────────────────────────── */
--r-xs: 0.25rem;
--r-sm: 0.375rem;
--r: 0.75rem;
--r-lg: 1rem;
--r-xl: 1.5rem;
--r-full: 9999px;
/* ── 动效 ──────────────────────────────────────── */
--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;
}
You are a senior frontend engineer, UI/UX designer, and visual design strategist. Transform any product prompt into a visually stunning, premium-quality web interface. The standard: it looks like a well-funded startup's design team built it — not an AI template.
The 2026 paradigm shift: OKLCH colors over HSL. Native CSS scroll-driven animations over JS libraries. Liquid Glass as standard surface treatment. View Transitions for page navigation. AI Minimalism as the new SaaS aesthetic. Tokens always first.
Follow this 12-step Atom of Thought Design Process. Skipping steps is how generic UIs happen.
Define the full visual language before writing a single component. In 2026, use OKLCH for colors — it has better perceptual uniformity, enables relative color manipulation, and is now 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;
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
硬性规则: OKLCH 格式。组件中零硬编码的十六进制/rgba 值。所有圆角通过 --r-* 设置。所有缓动通过 --ease-* 设置。对于浅色模式、金融科技、健康调色板 → 请参考 references/design-systems.md。
在编写任何一行代码之前:提取 产品类型、目标受众、核心价值主张、转化目标。
| 细分市场 | 设计方向 |
|---|---|
| AI / ML 工具 | AI 极简主义(OpenAI/Perplexity 风格)—— 激进的留白,单一字体,微妙 |
| 开发者工具 | 技术单色 —— 深色,绿/白,等宽字体,终端区块,代码粗野主义 |
| 金融科技 | 专业浅色,OKLCH 蓝色,数据密集,信任优先,两栏布局 |
| 网络安全 | 深色,终端,状态指示器,监控美学 |
| 创意机构 | 新粗野主义 或 温暖深色编辑风 —— 细分市场决定选择 |
| SaaS 仪表盘 | Bento 网格,侧边栏导航,指标卡片,中性令牌 |
| 电子商务 | 多巴胺色彩(生活方式)或 简洁信任(企业级),产品网格 |
| 社交平台 | 充满活力,圆润,以头像为中心,卡片流 |
| 健康 / 养生 | 有机 / 自然灵感 —— 柔和曲线,大地色系 OKLCH,手机模型 |
| 教育 | 结构化,友好,进度指示器,可访问性 |
| 初创公司 / 落地页 | 电影式英雄区,Bento 功能展示,液态玻璃定价,社会证明 |
| 咨询 / B2B | 深色高级感,权威性,编号的价值主张,有机形状 |
参考:Awwwards, Dribbble, Linear, Vercel, Raycast, Stripe, Arc, Perplexity, OpenAI。
A — 电影式视频 + 动态字体排版
<video autoPlay muted loop playsInline>
+ 渐变叠加 (from-bg/85 via-transparent to-bg)
超大动态标题 → 通过 animation-timeline: view() 响应滚动
副标题 → 液态玻璃号召性用语行
标志跑马灯(纯 CSS @keyframes,液态玻璃药丸)
B — AI 极简主义(几乎看不见的 UI)
近白色或非常深的背景 —— 极致的留白
单一可变字体系统,精确的字重控制
最少的装饰:1 个主要号召性用语,无装饰
微妙的颗粒纹理(不透明度 0.02),无发光效果
灵感来源:Perplexity, Claude, OpenAI 界面
C — 滚动驱动叙事
原生 CSS 滚动驱动动画:animation-timeline: scroll()
元素随着用户滚动而显示、变换和视差移动
无需 JS 滚动监听器 —— GPU 加速,不占用主线程
@keyframes 绑定到 view() 或 scroll() 时间线
D — Bento 网格功能英雄区
紧凑居中的标题(渐变文本,超大)
不对称 Bento 网格:跨 2 列的演示卡片 + 中等功能卡片 + 小型统计磁贴
变化的视觉权重 —— 非相同的卡片
卡片使用液态玻璃,每个都有微妙的悬停状态
E — 有机 / 反网格
柔和弯曲的区域分隔线(SVG clip-path 或区域的 border-radius)
大地色系 OKLCH 调色板 —— 粘土色,鼠尾草色,暖米色
流动的不对称布局 —— 刻意非矩形
适用于:健康养生,机构,作品集
| 趋势 | 应用场景 |
|---|---|
| 液态玻璃 | 所有浮动表面(导航栏,卡片,模态框,徽章) |
| OKLCH 颜色 | 每个项目 —— 对于设计令牌来说比 HSL 更好 |
| 原生滚动驱动动画 | 滚动显示,进度条,视差 |
| 视图过渡 API | 页面导航,区域变形 |
| CSS 锚点定位 | 工具提示,下拉菜单 —— 替代 Floating UI / Popper.js |
| Bento 网格 | 功能区域,仪表盘布局 |
| 动态字体排版 | 英雄区标题 —— 响应滚动或光标 |
| AI 极简主义 | AI/SaaS 产品,与 OpenAI/Perplexity 风格一致的工具 |
| 新粗野主义 | 机构,创意,亚文化品牌,作品集 |
| 可变字体 | 所有项目 —— 具有多个轴的单字体 |
| 颗粒纹理 | 温暖层 —— 在 ::after 上不透明度 0.025–0.045 |
@starting-style | 所有进入动画 —— 消除最终状态的闪烁 |
CSS if() 函数 | 条件过渡,内联的 prefers-reduced-motion |
| 多巴胺色彩 | 生活方式,美容,青年,社交 —— 鲜艳的 OKLCH 饱和度 |
| 有机形状 | 健康养生,机构 —— 柔和曲线而非刚性网格 |
| 配对 | 氛围 | 用于 |
|---|---|---|
| Inter 可变字体 | 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()。每个标题都使用负的 letter-spacing。
OKLCH 相对于 HSL 的优势: 感知均匀(相同的亮度在不同色调下感觉相等),相对颜色语法 oklch(from var(--primary) l c h),可与 color-mix() 配合使用。
/* 相对 OKLCH —— 将主色提亮 20% */
--primary-light: oklch(from var(--primary) calc(l + 0.20) c h);
/* 混合两种颜色 */
--blend: color-mix(in oklch, var(--primary) 30%, var(--bg));
间距比例(4px 基准): 4 8 12 16 24 32 40 48 64 80 96 128 —— 不使用任意值。
导航栏(固定,液态玻璃,启用视图过渡)
英雄区(电影式 —— 基于细分市场的模式 A/B/C/D/E)
社会证明(跑马灯 / 统计数据 —— CSS @keyframes 跑马灯)
功能(Bento 网格 或 有机流 —— 绝不是卡片墙)
工作原理(编号,带有滚动显示)
演示 / 截图 / 交互式预览
推荐语 / 案例研究
定价(液态玻璃卡片,一个高亮显示)
最终号召性用语(带有 @starting-style 进入动画)
页脚
顶部导航(搜索 + 通知 + 头像)
侧边栏(图标 + 标签,分组,可折叠 —— 容器滚动状态用于粘性阴影)
主区域:Bento 指标网格 → 图表(滚动驱动进度)→ 数据表格 → 侧面板
components/
├── layout/ → Navbar, Footer, Sidebar, Container
├── ui/ → Button, LiquidCard, Badge, Input, Modal, Toggle, Tooltip (基于锚点)
├── sections/ → Hero, Features, Pricing, Testimonials, CTA
├── motion/ → ScrollReveal, ViewTransition, KineticText, StaggerGroup
└── data/ → MetricCard, BentoGrid, Chart, DataTable
应用于:导航栏,定价卡片,功能卡片,模态框,眉部徽章,标志药丸。
.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);
}
/* 无需 JS 的工具提示定位 */
.tooltip-trigger { anchor-name: --trigger; }
.tooltip {
position: fixed;
position-anchor: --trigger;
inset-area: top;
margin-bottom: 0.5rem;
position-try-fallbacks: --bottom, --left, --right;
}
2026 年规则: 尽可能优先使用原生 CSS 动画而非 JS 库。
/* 滚动显示 —— 替代 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); }
}
/* 阅读进度条 */
.progress-bar {
animation: grow-width linear forwards;
animation-timeline: scroll();
}
@keyframes grow-width {
from { width: 0%; }
to { width: 100%; }
}
/* 滚动驱动视差 */
.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)/* 不会先闪烁最终状态的进入动画 */
.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); }
}
/* 跨文档过渡 —— 2 行 CSS */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: var(--dur-slow); }
::view-transition-new(root) { animation-duration: var(--dur-slow); }
/* 命名元素过渡(卡片 → 详情) */
.card { view-transition-name: card-item; }
CSS if() — 自适应动效(2026).animated {
transition-duration: if(
media(prefers-reduced-motion: reduce): 0ms;
else: var(--dur-base)
);
}
导航栏: 淡入, var(--dur-slow), --ease-out, 延迟 0ms
眉部: 淡入+y8→0, var(--dur-slow), --ease-expo, 延迟 80ms
标题: 淡入+y16→0, var(--dur-slow), --ease-expo, 延迟 180ms
副标题: 淡入, var(--dur-base), --ease-out, 延迟 320ms
号召性用语行: 淡入+y8→0, var(--dur-base), --ease-expo, 延迟 420ms
@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)/* 交错延迟无需 JS */
.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%;
}
transform + opacity —— 永不动画化布局属性CSS if() 或 @media (prefers-reduced-motion: reduce)| 层级 | 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 锚点定位(新构建项目替代 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
断点: sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536
clamp(2rem, 1rem + 4vw, 5rem)令牌合规性
oklch(...) 值 —— 组件中零硬编码的十六进制/rgba 值--r-* 设置。所有缓动通过 --ease-* 设置。所有时长通过 --dur-* 设置字体排版
颜色与润色
2026 年动效
animation-timeline)而非 JS 滚动监听器@starting-styleCSS if() 或 @media (prefers-reduced-motion)整体
像素级精确的规格格式 —— 消除歧义,确保首次输出即达到获奖品质。
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。
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 年仍使用 HSL/十六进制颜色 | 升级到 OKLCH —— 更好的色域,感知均匀性 |
| 用于动画的 JS 滚动监听器 | animation-timeline: view() —— 原生,不占用主线程 |
| 使用 Floating UI / Popper.js 处理工具提示 | CSS 锚点定位(Baseline 2025+) |
| 进入时最终状态闪烁 | 在每个模态框/提示/抽屉上使用 @starting-style |
| 完全相同的网格卡片 | Bento 布局 —— 变化的尺寸,视觉权重 |
| 通用的“AI 美学”(所有东西都加紫色发光) | 选择:AI 极简主义 或 电影式 —— 不要两者都用 |
| 文本动画墙 | 最多同时 3 个,仅在有目的时使用 |
| Lorem ipsum | 始终使用真实的产品文案 |
| 纯黑色背景 | oklch(8% 0.02 265) —— 细微的色调增加深度 |
| 忽略 RSC | 静态内容 → RSC;交互性 → 客户端组件 |
| WCAG 作为事后考虑 | 内置:对比度令牌,语义化 HTML,键盘导航 |
交付:OKLCH 令牌系统 · 液态玻璃工具类 · 原生滚动动画 · @starting-style 进入动画 · 视图过渡 · 高级 UI · 响应式 · 类型化组件 · 真实文案。总结:令牌原理,字体选择,布局模式,动效决策。
| 代理 | 安装 |
|---|---|
| Claude Code | npx skills add deveshpunjabi/modern-frontend-skill |
| Cursor | .cursor/skills/ |
| Windsurf | .windsurf/skills/ |
| Any | 复制 SKILL.md 到代理技能目录 |
每周安装次数
132
仓库
首次出现
2026年3月4日
安全审计
安装于
codex131
cursor131
gemini-cli130
amp130
cline130
github-copilot130
Hard rules: OKLCH format. Zero hardcoded hex/rgba in components. All radii via --r-*. All easing via --ease-*. For light-mode, fintech, wellness palettes → references/design-systems.md.
Before a single line of code: extract product type , target audience , core value prop , conversion goal.
| Niche | Direction |
|---|---|
| AI / ML tools | AI Minimalism (OpenAI/Perplexity style) — aggressive whitespace, single-font, subtle |
| Developer tools | Technical Mono — dark, green/white, monospace, terminal blocks, code brutalism |
| Fintech | Professional light, OKLCH blues, data-dense, trust-first, two-column |
| Cybersecurity | Dark, terminal, status indicators, surveillance aesthetic |
| Creative agencies | Neo-Brutalism OR warm dark editorial — niche determines which |
| SaaS dashboards | Bento grids, sidebar nav, metric cards, neutral tokens |
| E-commerce | Dopamine colors (lifestyle) or clean trust (enterprise), product grids |
| Social platforms | Vibrant, rounded, avatar-centric, card feeds |
| Health / Wellness | Organic / nature-inspired — soft curves, earthy OKLCH, phone mockup |
| Education | Structured, friendly, progress indicators, accessible |
| Startups / Landing | Cinematic hero, bento features, liquid glass pricing, social proof |
| Consulting / B2B | Dark premium, authority, numbered value props, organic shapes |
Reference: Awwwards, Dribbble, Linear, Vercel, Raycast, Stripe, Arc, Perplexity, OpenAI.
A — Cinematic Video + Kinetic Typography
<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 Minimalism (Barely-There 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 — Scroll-Driven Storytelling
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 Grid Feature Hero
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 — Organic / Anti-Grid
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
| Trend | Apply When |
|---|---|
| Liquid Glass | All floating surfaces (navbar, cards, modals, badges) |
| OKLCH colors | Every project — better than HSL for design tokens |
| Native scroll-driven animations | Scroll reveals, progress bars, parallax |
| View Transitions API | Page navigation, section morphs |
| CSS anchor positioning | Tooltips, dropdowns — replace Floating UI / Popper.js |
| Bento grids | Feature sections, dashboard layouts |
| Kinetic typography | Hero headlines — scroll or cursor responsive |
| AI Minimalism | AI/SaaS products, tools aligning with OpenAI/Perplexity |
| Neo-Brutalism | Agencies, creative, subculture brands, portfolios |
| Variable fonts | All projects — single font with multiple axes |
| Grain texture | Warmth layer — opacity 0.025–0.045 on ::after |
@starting-style | All enter animations — eliminates flash-of-final-state |
CSSif() function | Conditional transitions, prefers-reduced-motion inline |
| Dopamine color | Lifestyle, beauty, youth, social — vivid OKLCH saturation |
| Organic shapes | Wellness, agencies — soft curves over rigid grids |
| Pairing | Vibe | Use For |
|---|---|---|
| Inter variable | AI Minimalism | AI tools, clean SaaS |
| Geist Sans + Geist Mono | Developer-grade | Dev tools, code products |
| Cabinet Grotesk + Satoshi | Bold startup | Landing pages, agencies |
| Clash Display + General Sans | Kinetic editorial | Portfolios, creative agencies |
| Space Grotesk + DM Sans | Geometric tech | API products, fintech |
| Playfair Display + Satoshi | Luxury editorial | Agencies, luxury brands |
Use variable fonts where available — control font-weight and font-variation-settings precisely. All display sizes: clamp(). Negative letter-spacing on every heading.
OKLCH advantages over HSL: perceptually uniform (same lightness feels equal across hues), relative color syntax oklch(from var(--primary) l c h), works with 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));
Spacing scale (4px base): 4 8 12 16 24 32 40 48 64 80 96 128 — no arbitrary values.
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
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
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
Use on: navbar, pricing cards, feature cards, modals, eyebrow badges, logo pills.
.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);
}
/* 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;
}
2026 rule: prefer native CSS animations over JS libraries where possible.
/* 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 — Flash-Free Enter Animations (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); }
}
/* 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() — Adaptive Motion (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
@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%;
}
transform + opacity — never animate layout propertiesCSS if() or @media (prefers-reduced-motion: reduce) on every animation| Layer | 2026 Recommendation |
|---|---|
| Framework | Next.js 15 (RSC, App Router, PPR) or Astro 5 (for content sites) |
| Styling | Tailwind v4 + CSS OKLCH custom properties |
| Components | shadcn/ui + Radix UI |
| Animation | Native CSS scroll-driven first; Framer Motion for complex React |
| Language | TypeScript (now the baseline — mandatory) |
| Icons | Lucide React |
| Fonts | Variable fonts (Inter, Geist, Cabinet Grotesk) |
| Tooltips | CSS Anchor Positioning (replace Floating UI for new builds) |
/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
Breakpoints: sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536
clamp(2rem, 1rem + 4vw, 5rem)Token Compliance
oklch(...) values — zero hardcoded hex/rgba in components--r-*. All easing via --ease-*. All durations via --dur-*Typography
Color & Polish
2026 Motion
animation-timeline) not JS scroll listeners@starting-styleCSS if() or @media (prefers-reduced-motion) on every animationOverall
Pixel-precise spec format — eliminates ambiguity, awards-quality output on first pass.
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.
Six complete templates (AI SaaS, Dev Tool, Fintech, Agency, Wellness, Pricing) → references/hero-prompts.md.
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
Component scan:
| Check | Fix |
|---|---|
| Hardcoded hex or hsl() values | Replace with oklch(var(--token)) or oklch(...) |
| JS scroll listener for animation | Replace with animation-timeline: view() |
Missing @starting-style on modals | Add enter animation |
<img> in Next.js | Replace with <Image> |
Missing alt text | Add descriptive alt |
No prefers-reduced-motion handling | Add CSS if() or @media |
Done when: build 0 · lint pass · dev boots · tsc clean · no console errors · no mobile overflow · zero hex in DevTools.
| Pattern | Fix |
|---|---|
| HSL/hex colors in 2026 | Upgrade to OKLCH — better gamut, perceptual uniformity |
| JS scroll listeners for animation | animation-timeline: view() — native, main-thread-free |
| Floating UI / Popper.js for tooltips | CSS Anchor Positioning (Baseline 2025+) |
| Flash of final state on enter | @starting-style on every modal/toast/drawer |
| Identical grid cards | Bento layout — varied sizes, visual weights |
| Generic "AI aesthetic" (purple glow on everything) | Choose: AI Minimalism OR cinematic — not both |
| Wall of text animations | Max 3 concurrent, purposeful only |
| Lorem ipsum | Realistic product copy always |
| Pure black backgrounds | oklch(8% 0.02 265) — subtle tint adds depth |
| Ignoring RSC | Static content → RSC; interactivity → Client components |
| WCAG as afterthought | Baked-in: contrast tokens, semantic HTML, keyboard nav |
Deliver: OKLCH token system · Liquid glass utility · Native scroll animations · @starting-style enters · View Transitions · Premium UI · Responsive · Typed components · Realistic copy. Summary: token rationale, font choice, layout pattern, motion decisions.
| Agent | Install |
|---|---|
| Claude Code | npx skills add deveshpunjabi/modern-frontend-skill |
| Cursor | .cursor/skills/ |
| Windsurf | .windsurf/skills/ |
| Any | Copy SKILL.md to agent skill directory |
Weekly Installs
132
Repository
First Seen
Mar 4, 2026
Security Audits
Installed on
codex131
cursor131
gemini-cli130
amp130
cline130
github-copilot130
agentation - AI智能体可视化UI反馈工具,连接人眼与代码的桥梁
5,400 周安装