用途
Modern Frontend Design（2026 版）是一份面向 AI 的前端设计指导规范，用于把产品需求提示转化为视觉上完成度高、具有高端质感的 Web 界面。它给 AI 设定的角色是资深前端工程师、UI/UX 设计师与视觉设计策略师，明确的标准是：成品看起来应当像一家资金充足的初创公司设计团队做出来的，而不是 AI 模板。
它的核心论点是 2026 年的范式转变：用 OKLCH 颜色替代 HSL；用原生 CSS 滚动驱动动画替代 JS 库；把 Liquid Glass 作为标准表面处理方式；用 View Transitions 处理页面导航；把 AI Minimalism 作为新的 SaaS 美学；并且设计令牌永远优先。文档要求遵循一套 12 步的 Atom of Thought 设计流程，并强调跳过步骤就是产生通用化 UI 的原因。
主要能力与流程要点
第 0 步 — 设计令牌系统优先（无条件执行）。 在编写任何组件之前先定义完整视觉语言。2026 年使用 OKLCH 定义颜色，理由是感知均匀性更好、支持相对颜色操作，且已成为 Baseline 2026。文档给出完整的 :root 令牌示例，包含颜色（背景、表面、表面提升、前景、弱化前景、暗淡前景、主色、主色悬停、主色辉光、成功、警告、错误、边框、微弱边框）、排版（正文、展示、等宽三套字体）、圆角（从 --r-xs 到 --r-full）与动效（三种缓动曲线与三档时长）。硬性规则：使用 OKLCH 格式、组件中零硬编码 hex/rgba、所有圆角走 --r-*、所有缓动走 --ease-*；浅色模式、金融科技与健康类配色另见 references/design-systems.md。
第 1 步 — 理解产品。 写代码之前先提取产品类型、目标受众、核心价值主张与转化目标。文档提供 2026 细分行业设计方向表，涵盖 AI/ML 工具、开发者工具、金融科技、网络安全、创意机构、SaaS 仪表盘、电商、社交平台、健康/养生、教育、初创落地页、咨询/B2B 等，并给出各自的视觉方向。
第 2 步 — 视觉研究与 Hero 模式。 参考对象包括 Awwwards、Dribbble、Linear、Vercel、Raycast、Stripe、Arc、Perplexity、OpenAI。列出五种 Hero 模式：A 电影感视频加动态排版；B AI 极简主义（几乎无 UI）；C 滚动驱动叙事；D Bento 网格功能 Hero；E 有机/反网格。并列出 2026 强制趋势表，包括 Liquid Glass、OKLCH 颜色、原生滚动驱动动画、View Transitions API、CSS 锚点定位、Bento 网格、动态排版、AI 极简主义、新粗野主义、可变字体、颗粒纹理、@starting-style、CSS if() 函数、多巴胺配色、有机形状，并标注各自适用场景。
第 3 步 — 视觉系统规划。 给出字体搭配表（Inter 变量字体、Geist Sans + Geist Mono、Cabinet Grotesk + Satoshi、Clash Display + General Sans、Space Grotesk + DM Sans、Playfair Display + Satoshi）及各自气质与适用场景；要求优先使用可变字体，展示字号使用 clamp()，所有标题使用负字距。颜色部分说明 OKLCH 相对颜色语法与 color-mix()，并给出示例代码。间距采用 4px 基准刻度，禁止随意取值。
第 4 步 — 布局架构。 分别给出落地页与仪表盘的 2026 标准结构。落地页包含固定 Liquid Glass 导航栏、电影感 Hero、社会证明、特性区、工作原理、演示、评价、定价、最终 CTA、页脚；仪表盘包含顶部导航、侧边栏与主区域（Bento 指标网格、图表、数据表、侧面板）。
第 5 步 — 组件系统。 给出目录结构（layout、ui、sections、motion、data），并给出 Liquid Glass 标准表面的完整 CSS 实现，包括渐变背景、backdrop-filter 模糊与饱和度、边框、内阴影与外阴影，以及悬停态。同时展示用 CSS 锚点定位替代 Floating UI 实现工具提示的写法。
第 6 步 — 2026 动效系统。 主张优先使用原生 CSS 动画而非 JS 库。给出原生滚动驱动动画代码（滚动显现替代 Intersection Observer、阅读进度条、滚动视差）、@starting-style 无闪烁入场动画、View Transitions API 页面导航、CSS if() 自适应动效。提供逐元素动画规格格式（导航栏、眉标、标题、副标题、CTA 行各自的动画、时长、缓动与延迟）、纯 CSS 跑马灯、基于 sibling-index() 的交错动画。动效规则不可协商：只用 GPU 加速的 transform 与 opacity，绝不动画布局属性；每个动画都要处理减少动效偏好；时长预算为交互 100–200ms、显现 300–500ms、页面过渡 400–600ms；视口内最多同时 3 个动画。
第 7 步 — 技术栈。 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；字体为可变字体；工具提示用 CSS 锚点定位替代 Floating UI。并给出应用目录结构。
第 8 步 — 后端意识与性能。 加载用骨架屏而非转圈；错误给出信息加重试而非空白页；空态给出文案加 CTA。使用 React Server Components 承载静态内容，客户端组件仅用于交互。核心网页指标目标：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 动效、整体四个维度的检查清单，包括零硬编码 hex 审计、负字距、正文不超过 65ch、Liquid Glass 覆盖所有浮动表面、滚动动画使用原生 CSS、入场动画使用 @starting-style、页面导航使用 View Transitions、每个动画都有减少动效处理、视觉上是否能与 Linear / Vercel / Perplexity 并列，以及 3 秒测试与令牌审计。
第 11 步 — Hero 提示词工程（MotionSites 风格）。 提供像素级精确的规格格式，以减少歧义、争取一次产出获奖级结果。格式包含技术栈（Next.js 15 + Tailwind v4）、设计令牌（在 globals.css 的 :root 中）、Liquid Glass 样式与滚动相关写法。
使用方式
该资料以「技能/规范」形式提供给 AI 使用：把产品提示提交后，AI 按上述 12 步流程依次产出设计令牌、视觉系统、布局、组件、动效与代码，并在交付前对照第 10 步的检查清单自检。具体的安装方式、调用命令与集成步骤在提供的资料中暂未说明。
适用场景
适用于需要生成高端落地页、SaaS 仪表盘、AI 工具界面、开发者工具界面、金融科技与健康类产品界面等场景。文档按细分行业给出了对应的视觉方向，可用于快速对齐风格预期。
限制
动效方面限定只使用 transform 与 opacity，且要求处理减少动效偏好、限制同屏动画数量、遵守时长预算。无障碍方面要求达到 WCAG 2.1 AA，浅色与深色模式须分别满足对比度要求。令牌方面要求组件内不出现硬编码颜色值。性能方面给出 LCP、CLS、INP 的具体指标目标。文档中部分特性标注了浏览器归属（如 sibling-index() 标注为 2026 CSS — Chrome），使用时应自行确认兼容性。关于该技能的授权方式、收费与价格、官方支持渠道等信息，提供的资料中暂未说明。
事实说明
以上内容均据所提供资料整理，文档中提到的 references/design-systems.md 等引用文件的具体内容未在资料中提供，暂未说明。