design-taste-frontend

Name: design-taste-frontend
Author: nexu-io

github.com/nexu-io设计与 UI104.6k2.7k 次安装1 天前更新

代码仓库

关于 design-taste-frontend

面向落地页、作品集和改版项目的前端设计技能，帮助编码 Agent 根据需求确定视觉方向，并避免套用通用设计模式。

主要功能

01判断页面类型、受众与限制
02先给出一句设计判断
03按需调整变化度、动效和密度
04推荐设计系统与实现方案
05规范响应式、字体和组件选择

适用场景

01根据需求规划 SaaS 落地页
02制作设计师或开发者作品集
03保留品牌素材进行网站改版

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/open-design --skill design-taste-frontend

安装后在 Claude Code 中输入/design-taste-frontend确认已加载。

附带文件LICENSE

详细介绍

tasteskill：反臃肿前端技能

落地页、作品集和改版项目。不适用于仪表板、数据表或多步骤产品 UI。以下每条规则都取决于具体情境，不会自动触发。先阅读需求说明，再挑选适用的规则。

0. 推断需求（先读懂情境，再做其他事）

在编写代码或调整参数之前，先推断用户真正想要什么。大多数 LLM 设计结果都很糟糕，因为模型没有先读懂情境，就直接套用默认审美。

0.A 先读取这些信号

页面类型——落地页（SaaS／消费级／代理商／活动）、作品集（开发者／设计师／创意工作室）、改版（保留现状还是全面改造）、编辑内容／博客。
用户使用的风格关键词——“极简”“平和”“Linear 风格”“Awwwards”“粗野主义”“高端消费级”“Apple 风格”“活泼”“严肃的 B2B”“编辑风”“代理商风”“玻璃质感”“暗色科技”。
参考信号——用户提供的 URL、粘贴的截图、提到的产品、正在与其竞争的品牌。
受众——B2B 采购评审组、注重设计的消费者，还是快速浏览作品集的招聘人员。审美应由受众决定，而不是你的个人偏好。
现有品牌素材——Logo、颜色、字体、摄影素材。对于改版项目，这些是起点，而非可选输入（见第 11 节）。
隐性约束——以无障碍为先的受众、公共部门、受监管行业、以信任为先的商业场景、儿童产品。这些约束优先于审美偏好。

0.B 生成内容前，先用一句话给出“设计判断”

编写任何代码之前，用一句话说明：“我的判断是：这是面向 <audience> 的 <page kind>，采用 <vibe> 风格，倾向于 <design system or aesthetic family>。”

判断示例：

“我的判断是：这是面向技术买家的 B2B SaaS 落地页，采用 Linear 风格的极简语言，倾向于 Tailwind 工具类 + Geist + 克制的动效。”
“我的判断是：这是面向招聘经理的独立设计师作品集，采用编辑风／动态字体语言，倾向于原生 CSS + 滚动驱动动画 + 定制字体。”
“我的判断是：这是公共部门服务网站的改版，采用以信任为先的设计语言，倾向于 GOV.UK Frontend 或 USWDS。”

0.C 如果需求说明含糊，只提一个问题，不要猜

仅当设计判断确实存在明显分歧时，才提出且只提出一个澄清问题，绝不要一次抛出多个问题。例如：“你希望整体更接近 Linear 式的简洁，还是 Awwwards 式的实验性？”

如果你能根据上下文有把握地推断，就不要提问。直接说明设计判断并继续。

0.D 避免默认套路

不要默认使用：AI 紫色渐变、深色网格背景上的居中主视觉、三个等宽功能卡片、无处不在的通用玻璃拟态、无穷循环的微动画、Inter + slate-900。这些都是 LLM 的默认套路。应根据设计判断，有意识地跳出这些套路。

1. 三个调节参数（核心配置）

给出设计判断后，设置三个参数。以下所有布局、动效和信息密度决策都受它们约束。

DESIGN_VARIANCE: 8——1 = 完美对称，10 = 艺术式混沌
MOTION_INTENSITY: 6——1 = 静态，10 = 电影感／物理效果
VISUAL_DENSITY: 4——1 = 艺术馆／疏朗，10 = 驾驶舱／数据密集

基准值： 8 / 6 / 4。除非设计判断要求调整，否则使用这些值。不要让用户编辑此文件——调整应通过对话进行。

1.A 推断设计刻度（阅读设计描述 → 确定刻度值）

信号	VARIANCE	MOTION	DENSITY
“极简 / 清爽 / 宁静 / 编辑风 / Linear 风格”	5-6	3-4	2-3
“高端消费品 / Apple 风格 / 奢华 / 品牌”	7-8	5-7	3-4
“活泼 / 狂野 / Dribbble / Awwwards / 实验性 / 代理商风格”	9-10	8-10	3-4
“落地页 / 作品集 / 营销网站（默认）”	7-9	6-8	3-5
“信任优先 / 公共部门 / 受监管 / 无障碍至关重要”	3-4	2-3	4-5
“重新设计 - 保留”	与现有设计匹配	+1	与现有设计匹配
“重新设计 - 全面改造”	+2	+2	与现有设计匹配

1.B 用例预设

用例	VARIANCE	MOTION	DENSITY
落地页（SaaS、大众市场）	7	6	4
落地页（代理商 / 创意）	9	8	3
落地页（高端消费品）	7	6	3
作品集（设计师 / 工作室）	8	7	3
作品集（开发者）	6	5	4
编辑内容 / 博客	6	4	3
公共部门服务	3	2	5
重新设计 - 保留	匹配	匹配+1	匹配
重新设计 - 全面改造	+2	+2	匹配

1.C 刻度如何驱动输出

将这些值（或用户覆盖的值）用作全局变量。本文档中的交叉引用均指向这些确切的变量名——切勿自行发明 LAYOUT_VARIANCE 或 ANIM_LEVEL 之类的别名。

2. 简述 → 设计系统映射

确定设计方向（第 0 节）和刻度（第 1 节）后，选择合适的基础。已有官方包的功能，不要自行编写 CSS。不要把审美趋势说成官方系统。

2.A 何时选用真正的设计系统（使用官方包）

简述呈现为……	选用	原因
Microsoft / 企业 SaaS / 仪表板	`@fluentui/react-components` 或 `@fluentui/web-components`	官方 Fluent UI、Microsoft 设计令牌，已处理无障碍
类似 Google 的 UI、Material 风格产品	`@material/web` + Material 3 令牌	官方系统，可通过 Material Theming 设置主题
IBM 风格的 B2B / 企业分析	`@carbon/react` + `@carbon/styles`	官方 Carbon，数据密集型模式成熟
Shopify 应用界面	`polaris.js` Web 组件 / Polaris React	Shopify 管理界面必需
Atlassian / Jira 风格产品	`@atlaskit/*` + `@atlaskit/tokens`	官方 Atlassian 设计系统
GitHub 风格的开发工具 / 社区页面	`@primer/css` 或 `@primer/react-brand`	官方 Primer；营销用途选 Brand 变体
英国公共部门服务	`govuk-frontend`	法规 / 监管要求
美国公共部门 / 信任优先	`uswds`	同上
快速构建本地企业 / 代理商 MVP	Bootstrap 5.3	简单、快速、可靠
现代无障碍 React 基础	`@radix-ui/themes`	原语组件 + 精致主题
自行维护组件的现代 SaaS	shadcn/ui（`npx shadcn@latest add ...`）	代码由你掌控，易于定制；切勿直接交付默认状态
基于 Tailwind 的现代 SaaS / AI 营销	Tailwind v4 实用类 + `dark:` 变体	独立开发者和小团队构建的默认选择

诚实原则：如果简述符合上述某个系统的特征，就安装并使用其官方包。不要手动重建其 CSS。不要导入系统的设计令牌，却又覆盖其中 90%。

**每个项目只用一个系统。**不要在同一个组件树中混用 Fluent React 和 Carbon。不要在 Material 3 应用中导入 shadcn/ui 组件。

2.B 当设计方向是一种美学风格，而非系统

对于这些设计方向，没有唯一的官方包。请使用原生 CSS + Tailwind + 维护中的组件库进行构建。请在代码注释中如实说明哪些内容借鉴了灵感，哪些是官方材料。

美学风格	诚实的实现方式
玻璃拟态／「磨砂玻璃」	使用 `backdrop-filter`、多层边框和高光覆盖层。为 `prefers-reduced-transparency` 提供纯色填充后备方案。
Bento（Apple 风格的网格卡片）	使用不同单元格尺寸的 CSS Grid。没有任何单一库拥有这一风格。
粗野主义	使用原生 CSS、等宽字体和粗犷边框。没有可用的库。
编辑风／杂志风	使用衬线字体、不对称网格和充裕的留白。没有可用的库。
暗黑科技／黑客风	使用等宽字体 + 霓虹强调色、终端元素。没有可用的库。
极光／网格渐变	使用 SVG 或多层径向渐变。没有可用的库。
动态排版	使用原生 CSS 动画、滚动驱动动画；劫持滚动时使用 GSAP。没有可用的库。
Apple Liquid Glass	Apple 仅针对 Apple 平台提供相关文档。没有官方的 `liquid-glass.css`。 Web 实现是使用 `backdrop-filter` + 多层边框 + 高光效果进行的近似。请明确标注为近似实现。

3. 默认架构与约定

除非设计分析选择了真正的设计系统（第 2.A 节），否则默认采用以下方案：

3.A 技术栈

框架： React 或 Next.js。默认使用 Server Components（RSC）。
- RSC 安全性： 全局状态仅适用于 Client Components。在 Next.js 中，将 providers 包装在 "use client" 组件中。
- 交互隔离： 任何使用 Motion、滚动监听器或指针物理效果的组件，都必须是独立的叶子组件，并在顶部添加 'use client'。Server Components 仅渲染静态布局。
样式： 默认使用 Tailwind v4。仅当现有项目要求时才使用 Tailwind v3。
- 对于 v4：不要在 postcss.config.js 中使用 tailwindcss 插件。请使用 @tailwindcss/postcss 或 Vite 插件。
动画： Motion（原名为 Framer Motion 的库）。从 motion/react 导入（import { motion } from "motion/react"）。framer-motion 包仍可作为旧版别名使用；新代码优先使用 motion/react。
字体： 始终使用 next/font（Next.js），或使用 @font-face + font-display: swap 自托管。生产环境中切勿通过 <link> 链接 Google Fonts。

3.B 状态

局部 UI 使用 useState / useReducer。
仅在需要避免深层 props 传递时使用全局状态，例如 Zustand、Jotai 或 React context。
切勿使用 useState 跟踪由用户输入驱动的连续值（鼠标位置、滚动进度、指针物理效果、磁性悬停）。请使用 Motion 的 useMotionValue / useTransform / useScroll。每次变化都会让 useState 重新渲染 React 树，并且在移动设备上会导致效果失效。

3.C 图标

允许使用的库（按优先级排序）： @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。
不建议使用： lucide-react。仅当用户明确要求，或项目已依赖它时才可使用。
切勿手工绘制 SVG 图标。 如果缺少某个图形符号，请安装第二个库，或使用基本图形组合；不要从头绘制图标路径。
每个项目使用同一套图标。 不要在同一个组件树中混用 Phosphor 和 Lucide。
全局统一 strokeWidth（例如 1.5 或 2.0）。

3.D Emoji 政策

默认不建议在代码、标记和可见文本中使用 Emoji。请用图标库中的图形替代符号。例外： 仅当用户明确要求轻松俏皮、聊天风格或原生社交风格时，才允许使用 Emoji；即便如此，也应有意地少量使用。

3.E 响应式与布局机制

统一断点（sm 640、md 768、lg 1024、xl 1280、2xl 1536）。
使用 max-w-[1400px] mx-auto 或 max-w-7xl 限定页面布局宽度。
**视口稳定性：**全高 Hero 区块绝不使用 h-screen。务必使用 min-h-[100dvh]，避免移动设备上布局跳动（iOS Safari 地址栏）。
**优先使用网格，避免 Flex 数学计算：**绝不使用复杂的 Flexbox 百分比计算（w-[calc(33%-1rem)]）。务必使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）。

3.F 依赖项验证（强制）

导入任何第三方库之前，先检查 package.json。如果缺少该包，先输出安装命令。绝不假设某个库已存在。

4. 设计工程指导原则（偏差纠正）

大模型默认会采用陈词滥调。请主动覆盖这些默认做法。每条规则都提供了适应上下文的覆盖路径。

4.1 排版

**展示文字／标题：**默认使用 text-4xl md:text-6xl tracking-tighter leading-none。
**正文／段落：**默认使用 text-base text-gray-600 leading-relaxed max-w-[65ch]。
无衬线字体选择：
- 不建议作为默认选择：Inter。优先选择 Geist、Outfit、Cabinet Grotesk、Satoshi，或适合品牌的衬线字体。
- **例外：**如果用户明确要求中性／标准／Linear 风格，或项目需求是公共部门／无障碍优先网站，则可以使用 Inter。
值得了解的搭配：Geist + Geist Mono、Satoshi + JetBrains Mono、Cabinet Grotesk + Inter Tight、GT America + IBM Plex Mono。
衬线字体规范（非常不建议作为默认选择）：
- 非常不建议将衬线字体作为任何项目的默认字体。“感觉有创意／高端／有编辑感”并不是选择衬线字体的理由。Agent 默认认为“创意需求 = 衬线字体”，这是在生产评审中最常见、也最容易被识别出的 AI 痕迹。
- 只有在以下条件之一明确成立时，才可以使用衬线字体：
  - 品牌需求中明确点名衬线字体；或
  - 美学风格确实属于编辑／奢华／出版物／手稿／传统／复古，并且你能说明这种衬线字体为何适合这个特定品牌
- 对于其他所有情况（创意机构、设计工作室、现代品牌、高端消费品牌、作品集、生活方式），默认使用无衬线展示字体（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）。无衬线展示字体并不“乏味”——它们之所以是默认选择，正如黑色是时尚界的默认色一样。
- 强调规则（相关）：若要在标题中强调某个词（例如动态的“and spatial design”风格），请使用同一字体的斜体或粗体。不要为了增加视觉趣味，在无衬线标题中随意插入一个衬线词（反之亦然）。混用不同字体家族来强调显得很不专业。正确做法是在同一字体家族中使用斜体／粗体强调。
- 特别禁止作为默认选择：Fraunces 和 Instrument_Serif（这是大模型最偏爱的两款展示衬线字体）。
- 如果有充分理由使用衬线字体（如上所述，情况罕见），请从以下字体池中轮换选择，不要在连续项目中重复使用同一款衬线字体：PP Editorial New、GT Sectra Display、Cardinal Grotesque、Reckless Neue、Tiempos Headline、Recoleta、Cormorant Garamond、Playfair Display、EB Garamond、IvyPresto、Migra、Editorial Old、Saol Display、Söhne Breit Kursiv、Domaine Display、Canela、Schnyder、Tobias、NB Architekt、ITC Galliard。
**斜体下伸部留白（强制）：**在展示文字中使用斜体，且单词包含下伸字母（y g j p q）时，leading-[1] 或 leading-none 会裁掉下伸部分。至少使用 leading-[1.1]，并在包裹元素上添加 pb-1 或 mb-1 留白。交付前检查展示标题中的每个斜体词。

4.2 色彩校准

最多使用 1 种强调色。默认饱和度低于 80%。
**紫丁香规则：**不建议默认采用“AI 紫色／蓝色光晕”美学。不要自动添加紫色按钮光晕，也不要随意使用霓虹渐变。使用中性色基底（Zinc／Slate／Stone），搭配高对比度的单一强调色（翠绿、电光蓝、深玫红、焦橙等）。
**例外：**如果品牌或设计要求明确指定紫色／紫罗兰色／紫丁香色，就大胆使用。但要有明确意图：配色保持一致，中性色协调，渐变有所节制。不要用千篇一律的 AI 渐变糊弄。
**每个项目只用一套配色。**同一项目中不要在暖灰和冷灰之间摇摆。
**色彩一致性锁定（强制）：**页面选定强调色后，整张页面都要使用该颜色。暖灰色调的网站不能在第 7 个区块突然出现蓝色 CTA。玫红色调的网站不能在页脚出现青绿色状态徽章。选定一种强调色并锁定，交付前审核每个组件。
禁止采用高端消费品配色（强制，第二常见的 AI 痕迹）：
- 对于高端消费品设计要求（炊具、健康养生、手工艺品、奢侈品、传统工艺、DTC 家居用品等），大模型默认会采用暖米色／奶油色 + 黄铜色／陶土色／牛血红／赭黄色 + 浓缩咖啡色／墨色深色文本。具体来说，以下十六进制色系不得作为默认背景和强调色：
  - 背景：#f5f1ea、#f7f5f1、#fbf8f1、#efeae0、#ece6db、#faf7f1、#e8dfcb（均为“暖纸色／奶油色／粉笔色／骨色”）
  - 强调色：#b08947、#b6553a、#9a2436、#9c6e2a、#bc7c3a、#7d5621（均为“黄铜色／陶土色／牛血红／赭黄色”）
  - 文本：#1a1714、#1a1814、#1b1814（均为“浓缩咖啡色／暖调近黑色”）
- 禁止将这套配色作为高端消费品设计要求的默认选择。你之前交付的每个高端消费品网站都用了这套配色，品牌辨识度荡然无存。
- 默认替代方案（轮换使用，不要重复）：
  - **冷调奢华：**银灰色 + 铬色 + 烟灰色（想想 Tesla、Apple Watch Hermes 去皮革版）
  - **森林：**深绿色 + 骨色 + 琥珀色强调色（想想 Filson、Patagonia 高端系列）
  - **黑与棕：**纯粹的黑灰色 + 暖棕色，鲜明对比，不用米色
  - **钴蓝 + 奶油色：**饱和蓝色搭配单一中性色，不用黄铜色
  - **陶土色 + 石板灰：**暖锈色搭配冷灰色，不用黄铜色
  - **橄榄绿 + 砖红色 + 纸色：**柔和橄榄绿搭配砖红色强调色
  - **纯单色 + 单一饱和亮色：**灰白色 + 黑灰色 + 一种亮色强调色（电光蓝、翠绿、亮粉色等）
- **配色轮换规则：**如果上一个生成的高端消费品项目使用了米色 + 黄铜色系，这次就必须换用其他色系。不要连续两次交付相同的暖调手工艺配色。
- **例外：**只有当品牌要求明确指定这些颜色，或者品牌形象确实属于复古／手工艺／暖调工艺风格，且你能说明这套特定配色为何适合这个特定品牌时，才可以使用米色 + 黄铜色 + 浓缩咖啡色配色。仅仅因为“这是炊具设计要求”就默认选择这套配色是被禁止的。

4.3 布局多样化

**避免居中偏差：**当 DESIGN_VARIANCE > 4 时，避免使用居中 Hero／H1 区块。强制采用“分屏”（50/50）、“左对齐内容／右对齐素材”、“非对称留白”或滚动固定结构。
**例外：**对于编辑风格／宣言／发布公告类设计要求，若信息本身就是设计的一部分，可以使用居中 Hero。

4.4 质感、阴影与卡片

仅在层级关系确实需要通过高度来体现时使用卡片。否则使用 border-t、divide-y 或留白进行分组。
使用阴影时，阴影色调应与背景色调一致。浅色背景上不得使用纯黑投影。
对于 VISUAL_DENSITY > 7：禁止使用通用卡片容器。数据指标应在简洁的布局中留有呼吸感。
形状一致性锁定（强制）： 为页面选择一种圆角规格并始终遵循。可选方案：全部直角（圆角为 0）、全部柔和圆角（12-16px）、全部胶囊形（交互元素使用完整圆角）。只有在规则有明确说明（例如“按钮为完整胶囊形，卡片为 16px，输入框为 8px”）且全页面始终遵循时，才允许混用。方形布局中出现圆角按钮，或胶囊按钮页面中出现方形卡片，都是设计缺陷。

4.5 交互式 UI 状态

LLM 默认只实现“静态成功状态”。务必实现完整的状态流程：

加载： 使用与最终布局形状匹配的骨架屏。避免使用通用圆形加载指示器。
空状态： 精心设计，并说明如何填充内容。
错误状态： 清晰呈现，放在行内（表单）或上下文中（仅瞬时错误使用 toast）。
触觉反馈： 在 :active 状态下，使用 -translate-y-[1px] 或 scale-[0.98] 模拟按压效果。
按钮对比度检查（强制，无障碍）： 发布任何按钮前，确认按钮文字在按钮背景上清晰可读。白色按钮搭配白色文字、带 text-white 标签的 bg-white CTA、在无边框情况下背景透明且与页面背景相同的按钮，均禁止。检查每个 CTA：对比度至少符合 WCAG AA（正文为 4.5:1，大号文字 18px 及以上为 3:1）。摄影背景上的幽灵按钮也适用同一规则（使用背景底色、遮罩或描边）。
CTA 按钮换行禁令（强制）： 桌面端按钮文字必须保持在一行。如果像“VIEW SELECTED WORK”这样的标签换成 2 或 3 行，按钮即存在缺陷。修复方式：缩短标签（主要 CTA 最多 3 个词，最好为 1-2 个词），或加宽按钮（不要人为限制 CTA 的 max-width）。桌面端 CTA 换行属于发布前检查失败。
禁止重复 CTA 意图（强制）： 同一页面上，两个 CTA 不得表达相同意图。意图相同的示例：“Get in touch” + “Contact us” + “Let's talk” + “Start a project” + “Start something” + “Reach out”都表示“联系”意图 → 选择一个标签，并在页面各处（导航、主视觉、页脚）统一使用。同样，“Try free” + “Get started” + “Sign up free”都表示“注册”意图；“View work” + “See selected work” + “Browse projects”都表示“作品集”意图。每种意图只用一个标签。
表单对比度检查（强制，无障碍）： 表单输入框、占位符文字、焦点环、辅助文字和错误文字，相对于所在区块背景都必须符合 WCAG AA 对比度要求。近白色表单中的浅色占位符、白色表单置于白色页面区块中、对比度低于 4.5:1 的表单标签，均禁止。发布前检查每个表单。

4.6 数据与表单模式

标签置于输入框上方。辅助文字可选，但必须出现在标记中。错误文字置于输入框下方。输入块使用标准 gap-2。
永远不要用占位符代替标签。

4.7 布局规范（硬性规则。违反任何一条都会导致交付内容存在缺陷）

首屏主视觉必须完整显示在初始视口中。 桌面端标题最多 2 行，副文案最多 20 个单词且最多 3～4 行，CTA 无需滚动即可看到。如果文案太长：缩小字号或删减文案。如果无法用 20 个单词的副文案描述价值主张，说明价值主张不够清晰，而不是规则太严。绝不能让主视觉溢出，导致用户必须滚动才能找到 CTA。
主视觉字号规范。 同时规划字号和图片尺寸。如果主视觉素材较大，且标题超过 6 个单词，不要一开始就用 text-7xl/text-8xl。大多数主视觉建议使用 text-4xl md:text-5xl lg:text-6xl；标题只有 3～5 个单词时才使用 text-6xl md:text-7xl。主视觉标题出现 4 行，永远是字号错误，不是文案长度问题。
主视觉顶部内边距上限（强制）： 桌面端主视觉顶部内边距最大为 pt-24（≈6rem）。超过这个值会让主视觉内容悬在视口中央，看起来像布局错误，而非刻意留白。如果主视觉需要更多呼吸空间，请增大字号或素材尺寸，而不是增加顶部内边距。
主视觉内容堆叠规范（最多 4 个文本元素）。 主视觉是一个完整的瞬间，不是功能列表。允许的文本元素总数最多为 4 个：
1. 眉题（小号大写标签）或品牌条，或者都不选——最多选一个
2. 标题（最多 2 行，见上文）
3. 副文案（最多 20 个单词，最多 4 行）
4. CTA（1 个主要 CTA + 最多 1 个次要 CTA）
- 主视觉中禁止出现： CTA 下方的小字标语（“兼容 GitHub、GitLab 和可自托管 Git”）、信任背书小条（“深受……工程团队使用”）、价格预告（“个人用户免费，团队用户每人每月 $10”）、功能项目列表、社交证明头像行。所有这些内容都应移至主视觉正下方的专属版块。
- 如果同一个主视觉中既有眉题，又有 CTA 下方的标语，请删除标语。如果既有品牌条，又有标语，也请删除标语。每个主视觉最多只能有一个小型文本元素。
“使用者”/“信赖者”标志墙应放在主视觉下方，绝不能放在主视觉内。 主视觉用于呈现价值主张和主要 CTA。标志墙应作为紧接其后的独立版块。不要把信任标志塞进与主视觉文案相同的弹性布局行中。
桌面端导航必须单行显示。 如果项目在 lg（1024px）断点下无法容纳，请缩短标签、移除次要项目或改用汉堡菜单。桌面端导航分成两行属于设计错误。
导航高度上限：桌面端最多 80px，默认 64～72px。 不要使用占据视口 15% 的超大“代理公司风格”导航栏。
Bento 网格必须有节奏变化，不能单方面重复。 不要连续堆叠 6 行“左侧图片、右侧文本”。应变化构图：交替使用全宽功能行、不对称尺寸的卡片和纵向分隔。
Bento 单元格数量规则（强制）： Bento 网格的单元格数量必须与内容数量完全一致。3 个项目 → 3 个单元格（1+2 拆分、2+1 拆分或不对称三列）。5 个项目 → 5 个单元格（2+3、3+2、主卡片+4 个等）。如果网格中间或末尾有空单元格，说明规划有误。请重新调整网格形状，不要放入空白卡片。
禁止重复使用版块布局。 一个版块使用某种布局类型后（例如三列图片卡片、全宽引言、文本与图片拆分），该类型在页面中最多出现一次。“精选项目”不能看起来像“我们的业务”。包含 8 个版块的落地页至少应使用 4 种不同的布局类型。
锯齿交替布局上限（强制）。 交替使用“左图右文”和“左文右图”的锯齿布局很普通。连续使用这种图文拆分布局最多 2 个版块。第 3 个连续的图文拆分版块属于上线前检查失败。请用全宽版块、纵向堆叠版块、Bento 网格、跑马灯或其他布局类型打破这种模式。
眉题使用克制（强制，是生产测试中违反次数最多的规则）。 “眉题”指位于版块标题上方、采用小号大写字母和宽字距的标签（例如 FOUR COLORWAYS、SELECTED WORK、THE HARDWARE、Git-native task management）。典型的 CSS 特征：text-[11px] uppercase tracking-[0.18em]、font-mono text-[10.5px] uppercase tracking-[0.22em]。每个由 AI 构建的网站都会在每个版块标题上方添加眉题，形成千篇一律的模板节奏。硬性规则：
- 每 3 个版块最多使用 1 个眉题。 主视觉也算 1 个版块。因此，包含 9 个版块的页面最多可使用 3 个眉题。
- 如果版块 A 有眉题，接下来的 2 个版块就不能再使用眉题。
- 上线前检查是机械式的： 统计所有版块组件中 uppercase tracking（或类似的、位于标题上方的小型大写等宽字体标签）出现的次数。如果次数 > ceil(版块数量 / 3)，则判定输出失败。
- 眉题的替代方案： 直接删除。仅有标题就足够。如果需要为版块分类，版块在页面中的位置本身就能说明类别，无需标签。
禁止拆分式标题（强制）。 禁止默认使用“左侧大标题 + 右侧小段说明文字”的版块标题模式（左列 col-span-7/8，右列 col-span-4/5，小段正文悬在右侧列中）。每个版块都应只有一个聚焦的信息。如果确实需要同时展示标题和说明文字，请纵向排列（标题在上，正文在下，最大宽度 65ch）。只有在存在真正的构图理由时，才使用拆分式标题模式（例如右侧列承载视觉内容或交互元素，而非填充文字）。
Bento 背景多样性（强制）。 Bento 和功能网格版块不能全是 6 张白底白字卡片。任何多单元格网格中，至少 2～3 个单元格需要有真正的视觉变化：真实图片、符合品牌风格的渐变（不要用 AI 紫色）、图案或带色调的背景。奶油色背景配奶油色卡片、内部只有排版文字的 Bento 网格会显得乏味，像 AI 的默认产物，即使页面其他部分做得不错也一样。
必须为每个版块明确指定移动端折叠方式。 对于每个多列布局，都要在同一个组件中声明 < 768px 时的回退方案。不要假设“能正常运行，Tailwind 会处理”。

4.8 图像与视觉素材策略

落地页和作品集是视觉产品。只有文字、用虚假截图占位的 div 页面，都是粗制滥造。

视觉素材优先级：

优先使用图像生成工具。 如果环境中有任何图像生成工具（generate_image、MCP 图像工具、IDE 集成的生成工具、OpenAI 图像工具等），你就必须使用它来创建符合具体版块需求的素材：主视觉照片、产品图、纹理背景、氛围图。生成的图像宽高比要与版块匹配。不要因为手写 CSS 感觉更快就跳过这一步。
其次使用真实网络图片。 没有图像生成工具时，使用真实摄影素材。可接受的默认来源：
- https://picsum.photos/seed/{descriptive-seed}/{w}/{h}，用于占位摄影图片（seed 应描述版块内容，例如 marrow-cookware-kitchen）
- 简介中提供的真实素材库或品牌 URL
- 明确允许时使用开放许可来源（通过直接 URL 引用 Unsplash、Pexels）
最后的办法：告知用户。 如果两种方式都不可行，不要用手写 SVG 插画或基于 div 的“虚假截图”填满页面。请留下标注清晰的占位位置（``），并在回复末尾说明：“此页面需要在以下位置添加真实图片：[list of placements]。请生成或提供这些图片。”

极简风格的网站也需要真实图片。 纯文字页面不叫极简主义，而是未完成的工作。即使是 Linear 风格的编辑式网站，也至少需要 2-3 张真实图片（主视觉、一张产品或生活方式图片、一张辅助图片）。如果简介要求克制风格，可以生成黑白极简摄影；不要因为整体风格简约就完全跳过图片。

用于社会认同的真实公司徽标。 如果简介要求展示“信赖我们的客户 / 使用我们的产品 / 客户”徽标墙，不要默认使用纯文本字标（<span>Acme Co</span>）并排展示。请使用真实的 SVG 徽标：

来源：Simple Icons（任何颜色均可使用 https://cdn.simpleicons.org/{slug}/ffffff，或使用 simple-icons npm 包）。涵盖大多数知名品牌。
替代方案： 技术栈徽标可使用 devicon（@svgr/cli 或 CDN）。
品牌名称是虚构的？那就同时制作一个 SVG 标志。 生成简洁的字母组合（圆圈内一个字母、两个字母的连字、抽象字形），并以内联 <svg> 绘制，使其与页面风格一致。虚构品牌使用纯文字字标会显得很普通。
务必确保徽标在浅色和深色模式下都能正常显示（深色背景上用白色、浅色背景上用黑色，或使用单色主题变量）。
仅徽标规则（强制）： 徽标墙里只能放徽标。不要在每个徽标下方标注行业或类别（不要使用 Vercel 加下方的 hosting，Stripe 加下方的 payments，或 Cloudflare 加下方的 infra）。徽标本身就能建立信任，标签不会提供用户本来不知道的信息。可选：为屏幕阅读器提供品牌名称作为 alt 文本，也可链接到品牌网站。仅此而已。

手写插画：

使用图标库中的 SVG 图标：可以（参见第 3.C 节）。
手写装饰性 SVG（自定义插画、徽标、标志）：强烈不建议，不要默认采用。仅在以下情况可接受：
- 简介明确要求绘制（例如“给我画一个 SVG 徽标”）
- 这是一个简单的几何标志（正方形、圆形、展示字体中的字标）
- 你确信成品质量足够好

禁止使用基于 div 的虚假截图。 使用 <div> 矩形、虚假任务列表、虚假仪表板或虚假终端窗口手工搭建“产品预览”，是明显的坏做法。如果需要展示产品：

有真实截图 URL 时，请使用它
使用图像工具生成一张
使用真实组件预览（在页面中嵌入实际的 UI 小型版本）
或完全跳过预览，改用编辑式摄影图片

主视觉必须有真实图像。 只有文字和渐变色块不算主视觉——那只是占位内容。

4.9 内容密度

落地页的关键在于第一印象，而不是通读全文。尽可能精简。

**每个版块的默认内容结构：**简短标题（≤ 8 个词）+ 简短副段落（≤ 25 个词）+ 一个视觉素材或一个 CTA。超出部分必须符合版块的用途。
**不要设置数据堆砌型版块。**20 行的出版物表格、30 行的奖项列表、营销页面上庞大的定价矩阵，都属于错误的布局。可以改用：
- 展示排名前 3-5 的亮点 + “查看完整列表”链接
- 跑马灯 / 轮播，用于展示更多内容
- 如果数据本身就是产品，则另设独立页面
**长列表需要换用其他 UI 组件，而不是继续加长列表。**默认使用带项目符号的 <ul> 或 divide-y 分隔的行，是最省事的选择。如果项目超过 5 个，可以考虑以下方案：
- 分组后的双栏布局
- 每项配有图片和标签的卡片网格
- 如果项目可分类，则使用标签页 / 手风琴
- 水平滚动吸附胶囊按钮
- 用于展示内容丰富的列表（客户评价、标志、功能）的轮播
- 用于展示“大量无需逐项关注的内容”的跑马灯 10 行规格表每行下方都加一条细线，是最糟糕的默认做法。可以将各行分为 2-3 组，并稀疏使用分隔线；也可以改用每项规格一张卡片的布局。
**特别是规格表（Marrow 炊具模式）。**在炊具 / 硬件 / 服装 / 手工艺品需求中，长产品规格表的每一行都加上 border-b，是 AI 的默认做法。禁止采用。具体替代方案：
- **双栏卡片网格：**每项规格单独放在一张卡片中，显示规格名称、数值（大号展示数字）和一行说明“这为何重要”。桌面端采用双栏，移动端采用单栏。
- **水平滚动吸附胶囊按钮：**每项规格都做成一个胶囊按钮，用户可以滑动浏览。
- **分组：**将 10 项规格分为 3 个逻辑分组（例如“材料”“烹饪”“保修”），每组只使用一条柔和的分隔线和一个分组标题。
- **重点与其他项分开：**将 3-4 项重点规格做成大型展示卡片，其余规格折叠在“查看完整规格”展开项下。
**文案自查（发布前必须完成）：**在宣布任何任务完成之前，重新阅读页面上的每一处可见文本（标题、副标题、眉题、按钮标签、正文文案、说明文字、替代文本、页脚文字、错误消息）。标记任何存在以下问题的文案：
- 语法错误（“过去免费”、“两个方案，但只有一个诚实”、“不合语境的‘摆到桌面上’”）
- 指代不清（没有前文铺垫，却说“我们打算继续保持这种状态”）
- 听起来像 AI 幻觉（俏皮但错误的文字游戏、生硬且不合逻辑的比喻、“优雅的虚无”之类的表达）
- 像大模型在刻意显得深刻（被动攻击式的谦逊、虚假的匠人标签、故作诗意的微观元话语）重写所有标记的文案。如果不确定文案是否说得通，就换成直白、实用的句子。AI 生成的俏皮文案比平淡的文案更糟糕。
**虚假精确的数字会被标记。**像 92%、4.1×、48k、5.8 mm、13.4 lb 这样的数字，要么：
- 来自真实数据（需求说明、品牌指南、公开指标）——可以使用
- 明确标注为模拟数据（“模拟”“示例”“样本数据”）——可以使用
- 是 AI 虚构出来的规格点缀——禁止使用。不要伪造品牌并未宣称的工程精度。
**每个页面只采用一种文案语气。**不要在同一个版面中混用技术风格的等宽文本（“47 项任务 · 每天 0.6 次上下文切换”）、编辑风格的散文和营销式有力文案，除非品牌语调明确要求如此。

4.10 引言与评价

引言正文最多 3 行。绝不能有 6 行。如果原始引言更长 → 请删减。落地页上的引言是摘录，不是完整评价。
对于字号很小的情况（例如页脚风格的评价），行数上限可以稍微放宽。原则是：“一眼就能看完。”
引言文字中不要使用 em dash 作为装饰（表示长停顿、营造动感的 em dash、以 em dash 开头的项目符号）。请参阅第 9.G 节：完全禁止使用 em dash。
署名：姓名 + 职务 +（可选）公司。绝不能只写姓名（“- Sarah”）。
引号：使用真正的排版引号（“ ”），也可以完全不加。不要使用直的 ASCII 引号（"）。

4.11 页面主题锁定（浅色 / 深色模式一致性）

页面只有一种主题。各个区块不能切换主题。

如果页面采用深色模式，所有区块都必须采用深色模式。不能在深色区块之间插入暖纸色调的浅色模式区块（反之亦然）。用户滚动时不能觉得自己突然进入了另一个网站。
例外：如果需求明确要求使用“色块叙事”或“滚动时切换主题”效果，并且这是经过精心设计的构图（整页只切换一次主题，且过渡鲜明，而不是随意交替），则允许使用一次。
默认行为：在页面级别选择浅色、深色或自动（prefers-color-scheme）模式，并保持一致。同一主题系列内可以使用不同的区块背景色调（bg-zinc-950 与 bg-zinc-900 相邻）；但在 bg-zinc-950 页面中途切换到 bg-amber-50 就是不恰当的。
使用内置主题功能的设计系统（Radix Themes、带有 <Theme> 的 shadcn/ui）时，在 layout.tsx 或页面根节点设置一次主题。不要让各个区块单独覆盖主题。

5. 上下文感知的主动性

这些是工具，而非默认设置。只有设计解读需要时才使用。它们都不会自动触发。

**Liquid Glass / Glassmorphism：**适用于高端消费品、Apple 风格、奢侈品牌或媒体叠加效果。不适用于仪表盘、公共部门或“平平无奇的 B2B”场景。使用时，不能只加 backdrop-blur：还要添加 1px 内边框（border-white/10）和细微的内阴影（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]），以呈现真实的边缘折射效果。在 prefers-reduced-transparency 下提供纯色填充的回退方案。
**磁性微物理效果：**当 MOTION_INTENSITY > 5 且需求说明体现高端、趣味或代理机构风格时使用。只能在 React 渲染周期之外，使用 Motion 的 useMotionValue / useTransform 实现。绝不使用 useState。参见第 3.B 节。
持续的微交互（脉冲、打字机、浮动、闪烁、轮播）：当 MOTION_INTENSITY > 5 且该区块确实能从动态效果中受益时使用（状态指示器、实时动态、AI 感）。**不是每张卡片都需要无限循环动画。**如果区块用于传递信息，就保持静止。使用弹簧物理效果（type: "spring", stiffness: 100, damping: 20），不要使用线性缓动。
**“宣称有动效，就要让动效可见。”**如果 MOTION_INTENSITY > 4，页面就必须实际动起来：至少要有首屏 Hero 的入场过渡、关键区块的滚动显现和 CTA 的悬停物理效果。宣称 MOTION_INTENSITY: 7 的静态页面就是有问题的。反过来，如果无法在现有范围内交付可正常运行的动效，就把数值调到 3，交付简洁的静态页面。绝不要只做一半，留下会出问题的动效（被截断的 ScrollTrigger、跳动的入场效果、缺失的清理逻辑）。
**动效必须有明确目的（强制要求）。**添加任何动画之前，先问：“这个动画传达了什么？”合理的答案包括：层级（引导注意力关注正确内容）、叙事（按符合叙事的顺序呈现内容）、反馈（确认用户操作）和状态转换（展示变化）。“看起来很酷”不是合理答案。因为有 GSAP 就到处用 GSAP，是业余表现。每个 ScrollTrigger、每个跑马灯、每个固定区块都必须有充分理由。如果无法用一句话说清理由，就删掉该动画。
**每页最多一个跑马灯（强制要求）。**水平滚动的文字跑马灯（“不断滚动的 Logo”“横向滚动的宣言”“动态文字条”）每页最多使用一次。同一页面上出现两个或更多跑马灯，会显得像是在偷懒填充内容。选出最能服务内容的一个区块使用跑马灯，其他区块采用不同布局。
GSAP 粘性堆叠模式（使用滚动堆叠时）。“滚动时堆叠卡片”必须是真正的粘性堆叠，而非依次显现的列表。规范代码框架见下文第 5.A 节。常见问题：触发器在滚动到一半时触发，而不是固定在视口顶部。修正方法：使用 start: "top top"，而不是 start: "top center" 或 "top 80%"。
**GSAP 水平平移模式（使用水平滚动劫持时）。**规范框架见下文第 5.B 节。常见问题：动画在区块固定之前就开始，导致用户看到半张幻灯片。修正方法相同：使用 start: "top top"，固定外层容器，并在滚动时擦动内层轨道。

5.A 粘性堆叠 - 规范框架

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",                              // pin at viewport top
          endTrigger: cardEls[cardEls.length - 1],
          end: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          ease: "none",
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <div ref={ref} className="relative">
      {cards.map((card, i) => (
        <div
          key={i}
          className="stack-card sticky top-0 min-h-[100dvh] flex items-center justify-center"
        >
          {card}
        </div>
      ))}
    </div>
  );
}

关键点：start: "top top"、pin: true；除最后一张外，每张卡片都要固定；缩放/透明度变换由下一张卡片的滚动触发器驱动（这样，前一张卡片会在下一张到来时缩小）。

5.B 水平平移 - 规范框架

"use client";
import { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function HorizontalPan({ children }: { children: React.ReactNode }) {
  const wrap = useRef<HTMLDivElement>(null);
  const track = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !wrap.current || !track.current) return;
    const ctx = gsap.context(() => {
      const distance = track.current!.scrollWidth - window.innerWidth;
      gsap.to(track.current, {
        x: -distance,
        ease: "none",
        scrollTrigger: {
          trigger: wrap.current,
          start: "top top",                              // pin starts when section top hits viewport top
          end: () => `+=${distance}`,                    // scroll distance = track width minus viewport
          pin: true,
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });
    }, wrap);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <section ref={wrap} className="relative overflow-hidden">
      <div ref={track} className="flex h-[100dvh] items-center">
        {children}
      </div>
    </section>
  );
}

关键点：start: "top top"、pin: true、end: "+=${distance}"（滚动距离 = 所需的水平移动距离）、scrub: 1。外层容器固定，用户垂直滚动时，内层轨道水平滑动。

5.C 滚动显示交错效果——标准骨架（更轻量的替代方案）

对于简单的“元素进入视口时显示”效果（无需固定定位），优先使用 Motion 的 whileInView，而不是 GSAP——更轻量，也不需要 ScrollTrigger：

"use client";
import { motion, useReducedMotion } from "motion/react";

export function RevealStagger({ items }: { items: string[] }) {
  const reduce = useReducedMotion();
  return (
    <ul className="grid gap-6">
      {items.map((item, i) => (
        <motion.li
          key={item}
          initial={reduce ? false : { opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{
            duration: 0.6,
            delay: i * 0.06,
            ease: [0.16, 1, 0.3, 1],
          }}
        >
          {item}
        </motion.li>
      ))}
    </ul>
  );
}

适用于：功能列表、客户评价网格、品牌 Logo 墙，以及任何只需要“滚动时进入视口”的内容。将 GSAP 留给真正需要固定定位或滚动联动的场景。

5.D 禁止的动画模式

禁止使用 window.addEventListener("scroll", ...)。它会在每一帧滚动时运行，容易造成卡顿，也没有批处理。请使用 Motion 的 useScroll()、GSAP 的 ScrollTrigger、IntersectionObserver 或 CSS scroll-driven animations（animation-timeline: view()）。
禁止在 React 状态中使用 window.scrollY 自行计算滚动进度。 原因相同：每一帧都会触发重新渲染。
禁止使用会操作 React 状态的 requestAnimationFrame 循环。 请改用 Motion 值（useMotionValue + useTransform）。
布局过渡： 对可见状态变化（列表重排、模态框展开、路由间共享元素）使用 Motion 的 layout 和 layoutId 属性。不要为了“保险”而给静态内容套用 layout 属性——这会增加测量开销。
交错编排： 对需要按顺序显示的内容，使用 staggerChildren（Motion）或 CSS 层叠（animation-delay: calc(var(--index) * 100ms)）。使用 staggerChildren 时，父元素（variants）和子元素必须位于同一个客户端组件树中。

6. 性能与无障碍防护要求

6.A 硬件加速

仅对 transform 和 opacity 添加动画。 不要对 top、left、width、height 添加动画。
谨慎使用 will-change: transform——仅用于确实会添加动画的元素。

6.B 减少动态效果（强制要求）

任何 MOTION_INTENSITY > 3 的动态效果都必须遵循 prefers-reduced-motion。 此要求不可妥协。
在 Motion 中：使用 useReducedMotion() 包裹，并降级为静态效果。
在 CSS 中：通过 @media (prefers-reduced-motion: no-preference) 控制动画，或在 @media (prefers-reduced-motion: reduce) 下提供禁用动画的覆盖规则。
无限循环、视差、滚动劫持和磁吸物理效果在减少动态效果时必须变为静态或立即完成。

6.C 深色模式（所有面向用户的页面均为强制要求）

从一开始就为浅色和深色两种模式进行设计。未经用户明确指示，不得只支持浅色或深色模式。
使用 Tailwind dark: 变体或 CSS 变量定义设计令牌。每个项目选择一种策略。
此处不要指定具体的深色模式配色。 以需求说明为准。在两种模式下都要保持视觉层次、品牌形象和 WCAG AA 对比度（正文需达到 AAA）。
遵循 prefers-color-scheme: dark。除非品牌要求使用固定模式，否则默认采用系统偏好。

6.D Core Web Vitals 目标

LCP < 2.5s。主视觉图片必须使用 next/image priority 或预加载。
INP < 200ms。将繁重任务移出主线程。
CLS < 0.1。为图片、字体和嵌入内容预留空间。
声明页面完成前先运行 Lighthouse。

6.E DOM 开销

颗粒／噪点滤镜仅可应用于固定定位且带有 pointer-events-none 的伪元素（例如 fixed inset-0 z-[60] pointer-events-none）。绝不要应用于可滚动容器——持续的 GPU 重绘会严重降低移动设备的 FPS。
注意包体积。Motion 并不轻巧。Three.js 体积很大。对所有首屏以下的内容进行懒加载。

6.F 克制使用 Z-Index

绝不要随意大量使用 z-50 或 z-10。仅在系统级图层上下文（粘性导航栏、模态框、覆盖层、颗粒效果）中使用 z-index。在项目常量文件中记录 z-index 层级。

7. 参数定义（技术参考）

DESIGN_VARIANCE（Level 1-10）

1-3（可预测）： 对称的 CSS Grid（12 列，每列使用相等的 fr 单位）、相等的内边距、居中对齐。
4-7（错位）： 使用 margin-top: -2rem 产生重叠，使用不同宽高比的图片（4:3 紧邻 16:9），左对齐的标题位于居中对齐的数据上方。
8-10（非对称）： 瀑布流布局、使用分数单位的 CSS Grid（grid-template-columns: 2fr 1fr 1fr）、大面积留白区域（padding-left: 20vw）。
移动端覆盖： 对于 4-10 级，在 < 768px 的视口中，md: 以上的非对称布局必须收缩为严格的单列布局（w-full、px-4、py-8）。

MOTION_INTENSITY（Level 1-10）

1-3（静态）： 不使用自动动画。仅使用 CSS :hover 和 :active 状态。prefers-reduced-motion 无论如何都是默认模式。
4-7（流畅 CSS）： transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)。通过 animation-delay 实现加载动画的级联效果。重点使用 transform 和 opacity。
8-10（高级编排）： 复杂的滚动触发式显示视效、视差、滚动驱动动画（CSS animation-timeline 或 GSAP ScrollTrigger）。使用 Motion hooks。绝不要使用 window.addEventListener('scroll')——这是严格禁止，而非“建议避免”。允许的替代方案见第 5.D 节。

VISUAL_DENSITY（Level 1-10）

1-3（艺术画廊）： 留出大量空白。区块间距很大（py-32 到 py-48）。显得精致、简洁。
4-7（日常应用）： 标准 Web 应用间距（py-16 到 py-24）。
8-10（驾驶舱）： 内边距紧凑。不使用卡片框；用 1px 线条分隔数据。强制要求：所有数字都使用 font-mono。

8. 深色模式协议

默认支持双模式。除非设计需求是模拟印刷品的编辑风格，否则绝不要假定只支持浅色模式。

8.A Token 策略（选一种并坚持使用）

Tailwind dark: 变体（工具类优先项目的默认方案）：为每个颜色工具类配对相应的深色变体（bg-white dark:bg-zinc-950、text-gray-900 dark:text-gray-100）。
CSS 变量（适用于 shadcn/ui、Radix Themes 或带有主题功能的组件库）：定义语义化 Token（--surface、--surface-elevated、--text-primary、--accent），并在 [data-theme="dark"] 或 @media (prefers-color-scheme: dark) 下切换值。

8.B 此处不要指定具体颜色

具体颜色由设计需求和品牌决定。本规范仅要求：

对比度——正文至少达到 WCAG AA 标准，主视觉文案以 AAA 为目标。
层级一致性——在浅色模式下有效的视觉层级，在深色模式下也必须有效。如果 CTA 在浅色模式下足够醒目，在深色模式下也应如此。
品牌忠实度——主要品牌色应保持可辨识。不要为了深色模式而降低品牌色的饱和度。
不要使用纯 #000000 或纯 #ffffff——请使用近黑色（zinc-950、接近黑色的暖灰色）和近白色。纯色会损失层次感。

8.C 默认模式

除非品牌明确要求，否则应遵循 prefers-color-scheme。如果任一模式会削弱品牌的关键表现，则添加手动切换开关。

8.D 完成前在两种模式下测试

开发期间应在两种模式下打开页面。不要发布只在一种模式下查看过的页面。

9. AI 痕迹（禁止使用的模式）

除非设计需求明确要求，否则应避免这些特征。

9.A 视觉与 CSS

默认禁止使用霓虹色或外发光。 请使用内描边或低调的色调阴影。
禁止使用纯黑色（#000000）。 请使用近黑色、zinc-950 或炭灰色。
禁止使用过度饱和的强调色。 请降低饱和度，使其与中性色融合。
禁止过度使用渐变文字作为大标题。
禁止使用自定义鼠标光标。 这种做法已经过时，不利于无障碍访问，也会影响性能。

9.B 排版

避免默认使用 Inter。 参见第 4.1 节。可使用覆盖方案。
禁止使用只会大声吸引注意的超大 H1。 通过字重和颜色控制层级，而非单纯放大字号。
衬线字体限制： 衬线字体适用于编辑、奢华或出版类设计，不适用于仪表盘。

9.C 布局与间距

内边距和外边距必须精准无误。 不要出现间距尴尬的悬浮元素。
禁止使用 3 列等宽功能卡片。 禁用常见的“横向排列的 3 张相同卡片”功能区。改用 2 列交错布局、不对称网格、滚动固定布局或横向滚动等替代方案。

9.D 内容与数据（“Jane Doe”效应）

禁止使用通用姓名。 将“John Doe”“Sarah Chan”“Jack Su”替换为有创意、真实且符合当地习惯的姓名。
禁止使用通用头像。 不要使用 SVG“鸡蛋”形头像或 Lucide 用户图标；应使用可信的照片占位图或特定样式。
禁止使用完美得不真实的数字。 避免使用 99.99%、50%、1234567。使用自然、不规整的数据（如 47.2%、+1 (312) 847-1928）。
禁止使用俗套的初创公司品牌名。 将“Acme”“Nexus”“SmartFlow”“Cloudly”替换为符合上下文、显得高端且真实的名称。
禁止使用空泛的动词。 不要使用“提升”“无缝”“释放”“下一代”“革新”等词；只使用具体的动词。

9.E 外部资源与组件

禁止手工绘制 SVG 图标。 使用 Phosphor / HugeIcons / Radix / Tabler。只有在明确要求时才使用 Lucide。
强烈不建议默认使用手工绘制的装饰性 SVG（见第 4.8 节）。
禁止使用基于 div 的假截图。 切勿用 <div> 矩形拼造假产品界面来模拟截图。应使用真实图片、生成图片，或省略预览。
禁止使用失效的 Unsplash 链接。 使用 https://picsum.photos/seed/{descriptive-string}/{w}/{h}、生成的照片占位图或实际素材。
shadcn/ui 定制： 允许，但默认状态下绝不可直接使用。应根据项目风格定制圆角、颜色、阴影和字体排版。
生产级代码的整洁度： 代码应在视觉上简洁、令人印象深刻且经过细致打磨。

9.F 生产测试中发现的特征（严格禁止）

这些模式来自真实的 LLM 生成落地页测试。它们是模型试图“设计得像样”时默认采用的典型特征。除非需求明确要求，否则一律严格禁止。

首屏与页面顶部

首屏禁止出现版本标签。 V0.6、v2.0、BETA、INVITE-ONLY PREVIEW、EARLY ACCESS、ALPHA 默认均禁止用作眉题。只有在需求明确涉及产品发布或预览状态时才可使用。
禁止使用“品牌名 · No. 01”式副眉题。 跳过“Marrow · No. 01 · The 6-quart”这类微型元信息行。

分区编号与微型标签

禁止使用分区编号眉题。 00 / INDEX、001 · Capabilities、002 · Featured commission、06 · how it works、05 · The honest table 等均禁止。眉题应以通俗语言说明主题，而不是列出编号。
禁止在图片或便当盒式网格卡片上使用 01 / 4 式分页。 用户自己会数，不需要这种标签。
禁止使用 Scroll · 001 Capabilities 式滚动提示。 一个简单的箭头或“Scroll”即可；不要添加分区编号前缀。
禁止使用“Index of Work, 2018 - 2026”式范围标签作为眉题。 直接说明分区内容即可。

分隔符与圆点

中点（·）应节制使用。 元信息栏每行最多使用 1 个。不要默认用它分隔所有内容（例如“foo · bar · baz · qux · quux”）。如需成组分隔，优先使用换行、细线或分栏。
禁止在每个列表项、导航链接或徽章前添加装饰性彩色状态圆点。 默认禁止在“ONE Q4 SLOT OPEN”前、每个导航链接前或每个任务行前添加彩色圆点。只有圆点确实表示语义状态（如服务状态、可用性标记）且使用克制时才可接受。 破折号与排版装饰
禁止将 em dash（—）用作设计元素，也禁止在其他任何地方使用。 完整且不可妥协的禁令见下文第 9.G 节。标题眉题、胶囊标签、正文、引语、署名、说明文字、按钮文本和替代文本中均不得出现 em dash 字符。请使用普通连字符（-）。
禁止默认使用 <br> 换行并加斜体的标题作为“设计手法”。例如“for thirty<br>years.”这类拆分。标题应首先读起来自然，只有在创意要求时才玩文字巧思。
禁止竖排旋转文字（例如将“INDEX OF WORK, 2018 - 2026”旋转 90°）。这是代理机构作品集的陈词滥调。只有当创意明确要求代理机构风格、Awwwards 风格或实验风格，且这种设计确实有助于构图时，才可使用。
禁止将十字准线或细线网格作为装饰。 禁止只为让页面“看起来有设计感”而绘制纵线和横线。只有在它们能组织实际内容时才可使用。

虚构的产品预览

禁止在主视觉区域使用基于 div 的虚构产品界面（例如虚构的任务列表、终端或仪表盘）。这是最明显的 LLM 设计套路。请使用真实截图、生成的图片、真实组件预览，或者干脆不放。
禁止在虚构截图中添加虚构的版本页脚（例如“v0.6.2-rc.1”或“last sync 4s ago · main”）。毫无帮助，还会暴露 AI 痕迹。

营销文案套路

禁止使用“Quietly in use at”或“Quietly trusted by”这类社会认同标题。 请使用自然的表达，例如“Trusted by”“Used at”“Customers include”，或者如果标志本身已经说明一切，就完全省略标题。
禁止在引语、博客或侧边栏版块使用“From the field”“Field notes”“Currently on the bench”“On our desks”“Loose plates”这类诗意标签。 读起来像刻意装作匠人风格。请使用直白、实用的标签（“Testimonials”“Latest writing”“Now working on”），或者省略标签。
禁止在正文中使用“我们尊重法国同行”这类假装谦逊的行业引用。 这种表达显得刻意卖萌，又很有 AI 味。
禁止在页眉或页脚中使用天气或地点信息条（例如“LIS 14:23 · 18°C”），除非创意明确与某个地点或跨时区工作室有关。
禁止在标题眉题下方添加微型说明句。 例如放在版块标题下方的“我们现在交付的每一项都是功能，而不是路线图上的承诺。这个列表会有意保持简短。”这类句子只会造成杂乱。标题眉题、主标题和正文已经足够。
禁止使用通用步骤标签。 “Stage 1 / Stage 2 / Stage 3”“Step 1 / Step 2 / Step 3”“Phase 01 / Phase 02 / Phase 03”“Pass One / Pass Two / Pass Three”均不允许。实际步骤内容本身就是标签。如果必须展示进度，请直接使用动词加名词（“Install”“Configure”“Ship”），而不是“Stage 1: Install”。

胶囊标签、标签与版本标记

禁止在图片上叠加胶囊标签、标签或标记。 不要在照片上叠加带有“Brand · 02”“PLATE · BRAND”“Field notes - journal”等文字的 <span>。要么让图片本身传达信息，要么在图片下方直接添加说明文字（不要放在图片上）。
禁止将照片署名说明当作装饰。 例如放在图库或 Picsum 图片下方的“Field study no. 12 · Ines Caetano”“Plate 03 · House archive”“Frame XII · 35mm”等文字都显得矫饰。只有在获得许可且确实为真实照片署名时，才允许标注摄影师。否则，请省略说明，或使用一句实用的说明（例如“The 6-quart, in Sage.”）。
禁止在营销页面中添加版本页脚。 “v1.4.2”“Build 0048”“last sync 4s ago · main”等页脚文字属于命令行或开发工具内容，不属于着陆页内容。在营销、着陆页或作品集页面中均禁止使用。
禁止将“Reservation 412 of 800”这类实时库存计数器当作装饰。 只有当创意明确涉及限量发售的候补名单且数据真实时才可使用。 装饰性文字条
主视觉底部不得有装饰性文字条。 像 BRAND. MOTION. SPATIAL.、TYPE / FORM / MOTION、DESIGN · BUILD · SHIP、ESTD. 2018 · LISBON · BRAND. MOTION. SPATIAL. 这类以小号等宽大写字母横跨主视觉底部的文字条，是代理公司作品集中的陈词滥调。默认禁止。只有当文字条包含真实、可导航的链接（粘性底部导航），或真实的状态信息（Cookie 横幅、文档站点上的构建信息）时才可接受。
章节标题中不得有右上角的浮动副文本。 这种模式是：章节有一个靠左对齐的大标题，同一章节标题区域的右上角浮动着一段小号说明文字，却没有与其他内容明确对齐。这就是明显的迹象。副文本应直接放在标题下方，或采用清晰的两栏标题布局（左侧：标题，右侧：对齐的正文），但不要把小段文字放在角落里。

列表、分隔线与评分

长列表或规格表的每一行不得同时使用 border-t 和 border-b。 二选一（行间使用下边框，或在分组上方使用上边框），并谨慎使用。一个有 10 行规格的表格，每行下方都有细线，是最敷衍的布局。其他 UI 组件方案请参见第 4.9 节。
对比图表中不得使用带填充背景轨道的评分条或进度条。 如果需要展示“X 占 Y”的对比，优先使用数字加小图标，或不带背景轨道的微型内嵌条形图。在落地页上，带部分填充的大片 bg-zinc-200 轨道会显得像杂乱的仪表板 UI。

地区、时间与滚动提示

99% 的需求中禁止使用地区、城市名、时间或天气文字条。 主视觉中的“里斯本，与创始人合作”，页脚中的“1200-690 Lisbon, Portugal”，导航栏中的“Lisbon 14:23 · 18°C”，这些都是代理公司作品集的装饰性迹象。仅在以下情况下允许使用：需求明确描述了业务涉及相关时区的全球分布式工作室，或是旅游品牌，或是真实的实体场所。页脚中提及一次联系地址没有问题，但不要使用氛围感地区文字条。
禁止使用滚动提示。 Scroll、↓ scroll、Scroll to explore、Scroll to walk through it、动态鼠标滚轮图标。如果用户还没有滚动，他们看到的就是主视觉。他们知道如何滚动。视口底部不需要标签。
默认不得出现装饰性状态圆点。 导航项、列表行、徽章或状态标签前的彩色圆点都是明显的迹象。仅当它传达真实的语义状态时才可接受（如实际服务器状态的在线指示灯、实时可用状态标记），并且每个页面区块最多一个。

9.G 禁用 EM 短横线（最常见的明显迹象）

彻底禁止使用 EM 短横线（—）。 这是大模型惯用的标志性修辞拐杖，也是生产测试中最明显的视觉迹象。不存在“有限使用”的例外，也不存在“符合自然语言频率”的例外，更不存在“正文中可以使用”的例外。没有任何例外。

标题中禁止使用。 使用句号或逗号。
眉题、标签、药丸形元素、按钮文字、图片说明和导航项中禁止使用。 改用换行、分栏或细线。
正文中禁止使用。 重组句子：拆成两个句子并用句号，或改用逗号、括号或冒号。
引文署名中禁止使用。 使用带空格的普通连字符（-），或换行并使用字重较轻的姓名。
也禁止将 EN 短横线（–）用作分隔符。 日期范围（2018-2026）使用连字符。数字范围（€40-80k）使用连字符。

页面中唯一允许使用的短横线字符是：

普通连字符 -（用于复合词、范围、标记语言中的分隔线）
数学中的负号（-5°C）

如果输出中任何面向用户的可见位置出现一个 — 或 –，就未通过预检，必须重写。

这条规则不可妥协。过去 Agent 常常忽视对 EM 短横线的限制，因为规则被表述为“谨慎使用”。这里的措辞是绝对的：一个 EM 短横线也不许出现。

10. 参考词汇（Agent 应了解的模式名称）

这是一份词汇表，不是一个库。Agent 应了解这些模式名称，以便围绕它们进行交流、在设计时将其纳入考量，并在设计要求适用时采用这些模式。实现和代码示例位于模块库（第 12 节），并会逐步完善。

主视觉范式

非对称分栏主视觉 - 一侧放文本，另一侧放素材，留出充足的空白。
编辑式宣言主视觉 - 大字号，不含素材，整体近似海报。
视频 / 媒体蒙版主视觉 - 将文字镂空为蒙版，叠加在视频背景上。
动态字体主视觉 - 以动画文字排版作为主要视觉元素。
帘幕揭示主视觉 - 主视觉的各部分随滚动展开，如同拉开帘幕。
滚动固定主视觉 - 主视觉保持固定，内容在其后滚动。

导航与菜单

Mac OS Dock 放大效果 - 边缘导航，悬停时图标平滑缩放。
磁吸按钮 - 向光标方向移动。
黏稠菜单 - 子项像黏稠液体一样分离。
动态岛 - 可变形的胶囊形状态 / 警报栏。
上下文径向菜单 - 在点击位置展开的圆形菜单。
悬浮快捷菜单 - FAB 弹出并展开为弧形的次级操作项。
巨型菜单揭示效果 - 全屏下拉菜单，内容依次淡入。

布局与网格

便当盒网格 - 非对称的方块组合（Apple 控制中心）。
瀑布流布局 - 错落排列的网格，没有固定行高。
色彩网格 - 边框 / 方块带有细微的渐变动画。
分屏滚动 - 两个区域向相反方向滑动。
粘性堆叠区块 - 区块在滚动时固定并堆叠。

卡片与容器

视差倾斜卡片 - 根据鼠标坐标进行 3D 倾斜。
聚光边框卡片 - 光标经过时边框亮起。
玻璃拟态面板 - 磨砂玻璃效果，带有内部折射。
全息箔卡片 - 悬停时呈现虹彩变化。
Tinder 滑动卡片堆 - 真实的卡片堆叠，滑动即可移走卡片。
变形模态框 - 按钮展开为自身的对话框。

滚动动画

粘性滚动卡片堆 - 卡片固定并实际堆叠。
横向滚动劫持 - 垂直滚动 → 横向平移。
Locomotive / 序列滚动 - 视频 / 3D 序列与滚动条联动。
缩放视差 - 中央背景图像在滚动时放大。
滚动进度路径 - SVG 线条沿滚动路径绘制。
液态滑动过渡 - 页面过渡效果如同黏稠液体。

图库与媒体

圆顶图库 - 3D 全景图库。
Coverflow 轮播 - 带倾斜边缘的 3D 轮播。
拖拽平移网格 - 可无限拖拽的画布。
手风琴图片滑块 - 悬停时展开的窄条。
悬停图片轨迹 - 鼠标移动时留下接连弹出的图片。
图像故障效果 - 悬停时 RGB 通道偏移。

字体排版与文本

动态跑马灯 - 滚动时反向移动的无尽文字带。
文本蒙版揭示 - 用超大文字作为视频的透明窗口。
文本乱码效果 - 加载 / 悬停时以矩阵风格解码。
圆形文字路径 - 沿旋转圆形弯曲排列的文字。
渐变描边动画 - 带有流动渐变的空心文字。
动态字体网格 - 字母躲避光标。

微交互与效果

粒子爆炸按钮 - 成功时，CTA 化为粒子。
液态下拉刷新 - 刷新指示器如同脱落的水滴。
骨架屏微光 - 占位符上移动的光线反射。
方向感应悬停按钮 - 填充效果从光标所在的准确一侧进入。
点击涟漪效果 - 从点击坐标向外扩散的波纹。
动画 SVG 线条绘制 - 矢量图形实时自行绘制。
网格渐变背景 - 有机的熔岩灯状色块。
镜头模糊景深 - 模糊背景 UI，以突出前景操作。

动画库选择

Motion (motion/react)——默认用于 UI / Bento / 状态变化动画。
GSAP + ScrollTrigger——用于整页滚动叙事和滚动劫持。将其隔离在专用的叶组件中，并使用 useEffect 清理。
Three.js / WebGL——用于画布背景和 3D 场景。遵循相同的隔离规则。
**绝不要在同一组件树中混用 GSAP / Three.js 与 Motion。**它们会争夺同一帧。

11. 重新设计协议

此技能适用于从零构建和重新设计。错误判断模式是重新设计效果不佳的最大原因。

11.A 检测模式（第一步）

从零构建——没有现有网站，或已批准全面改版。根据第 1 节设定基准。
重新设计 - 保留——在不破坏品牌的前提下实现现代化。先审查，提取品牌令牌，再逐步演进。
重新设计 - 全面改版——在现有内容之上采用全新的视觉语言。视觉设计按从零构建处理；保留内容和 IA。

如果无法确定，只询问一次：“这次重新设计应该保留现有品牌，还是从视觉上重新开始？”

11.B 动手前先审查

提出修改方案前，记录当前状态：

品牌令牌——主色 / 强调色、字体栈、Logo 处理方式、圆角。
信息架构——页面树、主导航、关键转化路径。
内容区块——现有内容、发挥作用的内容、填充内容。
要保留的模式——标志性交互、易于识别的首屏、文案语气。
要淘汰的模式——AI 味过重的设计迹象、布局问题、失效链接、通用素材图、性能陷阱。
现有网站的设计参数——推断当前的 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY。这是你的起点，而不是基准。
SEO 基线——当前排名页面、元标题、结构化数据、OG 卡片。SEO 迁移是重新设计的首要风险。

11.C 保留规则

**除非收到要求，否则不要更改信息架构。**保持页面 slug、锚点 ID、主导航标签稳定，以兼顾 SEO 和用户习惯。
**应用第 4.2 节前先提取品牌颜色。**已采用紫色的品牌就继续保持紫色——应用 LILA 规则的覆盖原则。
**除非收到改写要求，否则保留原有文案语气。**视觉现代化 ≠ 内容改写。
**尊重现有的无障碍成果。**不要削弱焦点状态、替代文本、键盘导航和对比度。
**尊重现有分析事件。**不要重命名下游追踪所依赖的按钮、表单字段和区块 ID。

11.D 现代化手段（按优先级排列）

按顺序应用，达到需求后即停止：

刷新字体排版——单位风险带来的视觉提升最大。
间距与节奏——增大区块内边距，调整纵向节奏。
重新校准颜色——降低饱和度，统一中性色，同时保留品牌强调色。
动效层——为现有组件添加符合 MOTION_INTENSITY 的微交互。
重新组合首屏和关键区块——使用第 10 节的术语重构漏斗顶部。
全面替换区块——仅在现有区块无法挽救时采用。

11.E 决策树：针对性演进还是全面重新设计

IA、内容和 SEO 状况良好 → 针对性演进（手段 1-4）。以约 40% 的风险获得约 70% 的价值。
视觉问题属于结构性问题（IA 混乱、缺乏设计系统、移动端体验糟糕）→ 全面重新设计，并严格保留内容。
品牌本身正在改变 → 从零构建。

11.F 绝不能在不告知的情况下更改的内容

未经用户明确批准，绝不修改：

URL 结构 / 路由 slug。
主导航标签。
表单字段名称或顺序（会影响分析和自动填充）。
品牌 Logo 或字标。
现有的法律 / 同意 / Cookie 文案。

12. 区块库（契约——实现将在此逐步添加）

参考词汇表（第 10 节）为模式命名。区块库通过真实的 props、真实的动效规范和真实的代码草图来实现这些模式。

**状态：**此处已定义架构。区块将逐步添加。请勿擅自新增区块，必须遵循此架构。

12.A 文件位置

skills/taste-skill/blocks/
  hero/
    asymmetric-split.md
    editorial-manifesto.md
    kinetic-type.md
    ...
  feature/
    bento-grid.md
    sticky-scroll-stack.md
    zig-zag.md
    ...
  social-proof/
  pricing/
  cta/
  footer/
  navigation/
  portfolio/
  transition/

12.B 必需的 Frontmatter

---
name: asymmetric-split-hero
category: hero
dial_compatibility:
  variance: [6, 10]
  motion: [3, 10]
  density: [2, 5]
when_to_use: "Landing pages with one strong asset and one strong message. Default hero for SaaS, agency, premium consumer."
not_for: "Editorial / manifesto launches where the message IS the design."
stack: ["react", "next", "tailwind", "motion"]
---

12.C 必需的正文部分

视觉草图 - 简短的 ASCII 图或布局描述。
Props API - 组件的接口。
代码草图 - 最小可用实现（默认使用 Server Component，动效使用 Client island）。
移动端回退 - 明确说明 < 768px 时的折叠规则。
动效变体 - 为每个 MOTION_INTENSITY 档位（1-3、4-7、8-10）提供一个变体。明确说明减少动效的回退方案。
深色模式说明 - 针对此区块的令牌策略。
反模式 - 此区块常见的错误用法。
参考资料 - 指向生产环境真实示例的链接。

12.D 区块库规范

每个文件包含一个区块。禁止在单个文件中放置多个区块。
每个区块都必须能独立运行（放入页面即可渲染）。
每个区块都必须通过预检（第 14 节）。
依赖第 2.A 节设计系统的区块，放在 blocks/<category>/<name>--<system>.md 下（例如 feature/bento-grid--material.md）。

13. 不在范围内

此技能不适用于：

仪表板 / 密集型产品 UI / 管理面板（使用第 2.A 节中的 Fluent、Carbon、Atlassian 或 Polaris）。
数据表格（使用 TanStack Table 或 AG Grid）。
多步骤表单 / 向导（使用表单专用模式；此技能无法让它们变得更好）。
代码编辑器（使用 Monaco / CodeMirror 及其官方皮肤）。
原生移动应用（直接使用 Apple HIG / Material）。
实时协作 UI（在线状态、光标、支持 OT——属于不同的问题类别）。

如果需求属于上述任一项，请明确说明，指出合适的工具，并且仅将此技能中适用于营销页面 / 关于页面 / 落地页的部分应用到相关界面。

14. 最终预检

输出代码前，请运行此检查矩阵。这是最后一道检查。

此项不可跳过。请逐项检查。如果任何一项未通过，就表示尚未完成。

附录 - 有真实来源支持的参考资料

以下各节为随附的参考内容。它们为第 2 节中提到的每个设计系统提供真实的安装命令、权威文档链接和可用的入门代码片段。请以此为依据，确保决策符合生产实践，而非训练数据中的臆想。

附录 A - 各设计系统的安装命令

# Material Web (Material 3)
npm install @material/web

# Fluent UI React (v9)
npm install @fluentui/react-components

# Fluent UI Web Components (framework-free)
npm install @fluentui/web-components @fluentui/tokens

# IBM Carbon
npm install @carbon/react @carbon/styles

# Radix Themes
npm install @radix-ui/themes

# shadcn/ui (open code, owned components)
npx shadcn@latest init
npx shadcn@latest add button card badge separator input

# Primer CSS (GitHub product/devtool UI)
npm install --save @primer/css

# Primer Brand (GitHub marketing UI)
npm install @primer/react-brand

# GOV.UK Frontend
npm install govuk-frontend

# USWDS (US Web Design System)
npm install uswds

# Atlassian Design System (Atlaskit)
yarn add @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/badge @atlaskit/section-message @atlaskit/card

# Bootstrap 5.3
npm install bootstrap

# Shopify Polaris Web Components (Shopify apps only)
# Add this to your app HTML head:
#   <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
#   <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

附录 B - 权威来源（重新发明之前请先阅读）

Material Web

Fluent UI

Carbon

Shopify Polaris

Atlassian

Primer

GOV.UK

USWDS

Bootstrap

Tailwind

Radix

shadcn/ui

原生 CSS / W3C 标准

Apple Liquid Glass（仅限 Apple 平台）

附录 C - Apple Liquid Glass：诚实的 Web 近似实现

不要将随意的 CSS 代码片段视为 Apple 官方的 Liquid Glass 实现。

什么是官方内容

Apple 在《Human Interface Guidelines》和面向 Apple 平台的开发者文档中介绍了 Liquid Glass。它是一种用于 Apple 平台 UI 的动态材质。Apple 的原生实现属于 Apple 平台 API 和系统组件，不是公开的 Web CSS 包。

什么不是官方内容

Apple 并未为普通网站提供 liquid-glass.css。

Web 近似效果可以使用：

backdrop-filter
透明背景
分层边框
高光叠加层
渐变
动效
高对比度回退方案

但这属于 Web 磨砂玻璃效果近似实现，并非 Apple 官方 Liquid Glass。请在注释中将其标注为近似实现。

更安全的 Web 近似实现框架

.liquid-glass-web-approx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .32);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .30), rgb(255 255 255 / .08)),
    rgb(255 255 255 / .12);
  backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .48),
    inset 0 -1px 0 rgb(255 255 255 / .12),
    0 18px 60px rgb(0 0 0 / .18);
}

.liquid-glass-web-approx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 0%, rgb(255 255 255 / .55), transparent 34%),
    linear-gradient(90deg, rgb(255 255 255 / .18), transparent 42%, rgb(255 255 255 / .14));
  pointer-events: none;
}

.liquid-glass-web-approx::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / .14);
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .liquid-glass-web-approx {
    border-color: rgb(255 255 255 / .18);
    background:
      linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)),
      rgb(15 23 42 / .42);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .22),
      0 18px 60px rgb(0 0 0 / .42);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass-web-approx {
    background: rgb(255 255 255 / .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

重要： prefers-reduced-transparency 在不同浏览器中的支持并不一致，请进行测试。即使没有模糊效果，也始终要确保对比度足够。

附录结束。 上方的安装命令是实际依据。Apple Liquid Glass 框架是已注明的近似实现，并非 Apple 发布的包。要查看各设计系统的权威文档，请参阅该系统的官方文档（链接见第 2 节和附录 B）。

支持 Markdown

登录后评论