硬性规则： OKLCH 格式。组件中零硬编码的十六进制/rgba 值。所有圆角通过 --r-* 设置。所有缓动通过 --ease-* 设置。对于浅色模式、金融科技、健康调色板 → 请参考 references/design-systems.md。

步骤 1 — 理解产品

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

2026 年细分市场设计表

步骤 2 — 2026 年视觉研究与英雄区模式

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

英雄区模式（2026 标准）

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 调色板 —— 粘土色，鼠尾草色，暖米色
流动的不对称布局 —— 刻意非矩形
适用于：健康养生，机构，作品集

2026 年强制性趋势

步骤 3 — 视觉系统规划

字体排版（2026 配对）

尽可能使用可变字体 —— 精确控制 font-weight 和 font-variation-settings。所有显示尺寸：使用 clamp()。每个标题都使用负的 letter-spacing。

颜色（始终使用 OKLCH）

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 —— 不使用任意值。

步骤 4 — 布局架构

落地页（2026 标准）

导航栏（固定，液态玻璃，启用视图过渡）
英雄区（电影式 —— 基于细分市场的模式 A/B/C/D/E）
社会证明（跑马灯 / 统计数据 —— CSS @keyframes 跑马灯）
功能（Bento 网格 或 有机流 —— 绝不是卡片墙）
工作原理（编号，带有滚动显示）
演示 / 截图 / 交互式预览
推荐语 / 案例研究
定价（液态玻璃卡片，一个高亮显示）
最终号召性用语（带有 @starting-style 进入动画）
页脚

仪表盘（2026 标准）

顶部导航（搜索 + 通知 + 头像）
侧边栏（图标 + 标签，分组，可折叠 —— 容器滚动状态用于粘性阴影）
主区域：Bento 指标网格 → 图表（滚动驱动进度）→ 数据表格 → 侧面板

步骤 5 — 组件系统

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

液态玻璃 — 2026 标准表面

应用于：导航栏，定价卡片，功能卡片，模态框，眉部徽章，标志药丸。

.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）

/* 无需 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;
}

步骤 6 — 2026 年动效系统

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

原生滚动驱动动画（2026 年互操作性 —— 无需 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); }
}

视图过渡 API（页面导航）

/* 跨文档过渡 —— 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

标志跑马灯（纯 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）

/* 交错延迟无需 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%;
}

动效规则（不可协商）

• 仅 GPU： transform + opacity —— 永不动画化布局属性
• 减少动效： 在每个动画上使用 CSS if() 或 @media (prefers-reduced-motion: reduce)
• 时长预算： 交互 100–200ms | 显示 300–500ms | 页面过渡 400–600ms
• 视口中任何时刻最多同时显示 3 个动画

步骤 7 — 2026 年技术栈

/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 — 后端意识与性能

• 加载中： 骨架屏加载器 —— 永不使用旋转器
• 错误： 消息 + 重试 —— 永不空白屏幕
• 空状态： 文案 + 号召性用语（例如“尚无项目”）
• React 服务器组件： 静态内容使用 RSC，仅交互性使用客户端组件
• 核心 Web 指标： 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 > 正文层次清晰。
• 所有标题都使用负的 letter-spacing。正文宽度 ≤ 65ch。

颜色与润色

• 具有感知均匀性的 OKLCH 调色板 —— 渐变中无色调偏移
• 所有浮动表面都使用液态玻璃
• 浅色/深色模式（如适用）都通过 4.5:1 对比度

2026 年动效

• 滚动驱动动画使用原生 CSS（animation-timeline）而非 JS 滚动监听器
• 所有进入动画都使用 @starting-style
• 页面导航使用视图过渡
• 每个动画都使用 CSS if() 或 @media (prefers-reduced-motion)
• 最多同时显示 3 个动画

整体

• 截图测试：与 Linear / Vercel / Perplexity 并列 —— 它是否属于其中？
• 3 秒测试：产品清晰，号召性用语明显
• 令牌审计：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

组件扫描：

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

反模式 — 2026 版

最终输出

交付：OKLCH 令牌系统 · 液态玻璃工具类 · 原生滚动动画 · @starting-style 进入动画 · 视图过渡 · 高级 UI · 响应式 · 类型化组件 · 真实文案。总结：令牌原理，字体选择，布局模式，动效决策。

每周安装次数

132

仓库

deveshpunjabi/m…nd-skill

首次出现

2026年3月4日

安全审计

Gen Agent Trust HubPassSocketWarnSnykPass

安装于

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.

Step 1 — Understand the Product

Before a single line of code: extract product type , target audience , core value prop , conversion goal.

2026 Niche Design Table

Step 2 — 2026 Visual Research & Hero Patterns

Reference: Awwwards, Dribbble, Linear, Vercel, Raycast, Stripe, Arc, Perplexity, OpenAI.

Hero Patterns (2026 Standard)

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

2026 Mandatory Trends

Step 3 — Visual System Planning

Typography (2026 Pairings)

Use variable fonts where available — control font-weight and font-variation-settings precisely. All display sizes: clamp(). Negative letter-spacing on every heading.

Color (Always OKLCH)

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.

Step 4 — Layout Architecture

Landing Page (2026 Standard)

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

Dashboard (2026 Standard)

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

Step 5 — Component System

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

Liquid Glass — 2026 Standard Surface

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);
}

CSS Anchor Positioning (2026 — Replace 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;
}

Step 6 — 2026 Motion System

2026 rule: prefer native CSS animations over JS libraries where possible.

Native Scroll-Driven Animations (Interop 2026 — No 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 — 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); }
}

View Transitions API (Page Navigation)

/* 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)
  );
}

Per-Element Animation Spec Format

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 Marquee (Pure 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%); }

Staggered Animations with 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%;
}

Motion Rules (Non-Negotiable)

• GPU only: transform + opacity — never animate layout properties
• Reduced motion: use CSS if() or @media (prefers-reduced-motion: reduce) on every animation
• Duration budget: interactions 100–200ms | reveals 300–500ms | page transitions 400–600ms
• Max 3 concurrent animations visible in viewport at any time

Step 7 — 2026 Technology Stack

/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

Step 8 — Backend Awareness & Performance

• Loading: skeleton loaders — never spinners
• Error: message + retry — never blank screen
• Empty: copy + CTA ("No projects yet")
• React Server Components: use RSC for static content, client components only for interactivity
• Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
• Sustainable design: minimize unused animations, optimize images, lazy-load off-screen content
• Realistic data: real-sounding names, plausible numbers — no lorem ipsum

Step 9 — Responsive + Accessible System

Breakpoints: sm 640 | md 768 | lg 1024 | xl 1280 | 2xl 1536

• Grids: 4 → 2 → 1 col. Nav: full → hamburger at < 768px.
• Display type: clamp(2rem, 1rem + 4vw, 5rem)
• Section padding: 128 → 80 → 48px. Touch targets: ≥ 44×44px.
• WCAG 2.1 AA mandatory: 4.5:1 body text, 3:1 large text, keyboard nav, screen reader labels
• Both light and dark modes must independently pass contrast minimums

Step 10 — 2026 Visual Quality Validation

Token Compliance

• All colors: oklch(...) values — zero hardcoded hex/rgba in components
• All radii via --r-*. All easing via --ease-*. All durations via --dur-*

Typography

• Variable font loaded. Display > h1 > h2 > body hierarchy clear.
• Negative letter-spacing on all headings. Body ≤ 65ch wide.

Color & Polish

• OKLCH palette with perceptual uniformity — no hue shifts in gradients
• Liquid glass on all floating surfaces
• Both light/dark mode (if applicable) pass 4.5:1 contrast

2026 Motion

• Scroll-driven animations use native CSS (animation-timeline) not JS scroll listeners
• All enter animations use @starting-style
• Page navigation uses View Transitions
• CSS if() or @media (prefers-reduced-motion) on every animation
• Max 3 animations visible concurrently

Overall

• Screenshot test: next to Linear / Vercel / Perplexity — does it belong?
• 3-second test: product clear, CTA obvious
• Token audit: zero hex in DevTools computed styles

Step 11 — Hero Prompt Engineering (MotionSites Style)

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.

Step 12 — Final Testing (Mandatory — You Own the Errors)

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:

Done when: build 0 · lint pass · dev boots · tsc clean · no console errors · no mobile overflow · zero hex in DevTools.

Anti-Patterns — 2026 Edition

Final Output

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.

Weekly Installs

132

Repository

deveshpunjabi/m…nd-skill

First Seen

Mar 4, 2026

Security Audits

Gen Agent Trust HubPassSocketWarnSnykPass

Installed on

codex131

cursor131

gemini-cli130

amp130

cline130

github-copilot130