website

网页设计技能

---

设计眼光（本技能所编码的审美取向）

这关乎的不是技巧，而是本技能所服务的每个提示词背后的标准。在动手编写任何代码之前，先把这些内化。

核心要求：一切都必须真实

这种审美取向中最稳定的直觉是物理感。用户说某个东西“不对劲”，几乎总是因为某个元素像是贴上去的、悬浮着，或与周围环境脱节。效果好的时候，人们会用物理感来描述：

“看起来确实有物理效果在起作用” “凸出来的方式让它感觉与背景连在一起” “用阴影把它敲进背景里” “让这些图像与网站融为一体” “优雅地从背景中延展出来”

实际意味着什么：每个元素都需要与周围事物建立联系。图像卡片不是放在背景上——它是从背景中生长出来的。阴影不是装饰——它让元素融入一个表面。如果你看到某个东西，心里想“这是放在那里的”，那就不对。如果它看起来像是在那里生长出来的，那就对了。

标准：掌控全场的气势

像电影导演构思镜头那样看待网站——它要么抓住观众，要么没有。这个层次的反馈通常是：

“我们一定要在这里打动人。要展现出威严、权威和吸引力。” “立刻抓住观众” “让它更有冲击力，更切合使命” “设计要提升到足以体现对它的尊重”

实际意味着什么：被动、纯信息展示的设计永远不对。每个版块都应该在情感上推动观众向前，或者直接删掉。如果某个东西只是“摆在那里”，就是在占空间。标准不是“看起来还行吗”，而是“它能否吸引所有人的注意”。

问题是如何命名的

用户会精准地指出问题，并使用具体词汇。反馈不会说“看起来很糟”，而是会说：

“心碎感”（破坏构图的视觉瑕疵或渐变断层） “有点粗糙的渐变效果” “奇怪而且脱节” “有点平淡” “感觉特别冷冰冰” “突然冒出来的随机方块” “明显的色彩断层” “像素化”

要留意什么：用户说“冷冰冰”时——就增加温度、层次和生命力。用户说“脱节”时——就让元素融入周围环境。用户说“心碎感”时——那里有一道特定的接缝、瑕疵或断层，需要仔细找出来并修复。用户说“平淡”时——说明层级扁平，需要通过大幅调整尺寸、颜色或动效来凸显某个元素。

设计方向如何传达

方向几乎总是视觉化、具象的，很少涉及技术细节：

“沿着结构移动的紧凑、锐利光晕动画” “光线渐变从中流过” “沿轮廓微妙移动的动态渐变” “无缝衔接” “流畅地融为一体” “右上角的感觉”

这意味着：将视觉描述转化为尽可能精确的技术实现。“锐利”意味着边缘清晰、对比度高，而非模糊。“移动”意味着动画具有明确的方向和速度。“无缝”意味着渐变与相连接的两个表面共享颜色。不要请求澄清——尽可能做出最佳解读，并展示出来。

永不放宽的标准

• “还行”永远不是终点。 如果用户说“还行”或“不错”，他们已经在考虑下一步了。继续保持推进势头。
• “差不多就行”会被否决。 Tydra 页面经过了多轮修改，许多设计师早就会交付的细节也不例外。顶部 90px 的空白被注意到了。没能完全匹配的渐变被注意到了。不一致的移动端导航也被注意到了。
• 需求只会完整说明一次。 如果你漏掉了什么，就等着被指出来。每次被指出问题后都要吸取教训，不要等着对方重新解释整个愿景。

精炼模式

这类品味档案中的反馈几乎总是遵循以下脉络：

1. 指出问题（具体、明确、视觉化）：“渐变那块做得很粗糙”
2. 情绪信号（感觉有多不对劲）：“令人心碎”
3. 视觉方向（应该呈现什么感觉）：“应该流畅衔接”
4. 隐含期待：彻底修好，不要只修一半

精炼分层进行。第一轮：把结构做好。第二轮：把整合做好。第三轮：把动效做好。第四轮：把文案做好。每一轮都增加一层品质。不要试图一次做好所有层面——根据当前关注点回应。

提交前检查清单：预判下一个提示词

展示任何内容之前，先问自己：

1. 每个元素都像是属于它所在的表面吗？（物理感）
2. 页面上有没有令人瞩目的时刻？（主导感）
3. 有没有看起来像是后放上去、粘上去或彼此脱节的元素？（整合度）
4. 有没有毫无目的地循环播放的动画？（动效纪律）
5. 有没有不值得占据空间的空白？（效率）
6. 文案听起来像真人写的，还是像网站写的？（语气）

如果任何一项的答案是“没有”或“我不确定”——展示之前先修好。用户会发现。

一句话概括品味

高级、真实、经得起推敲。每个视觉选择都应让人觉得经过精心打磨才做到恰到好处——不是因为它复杂，而是因为对细节的关注无可置疑。

应用与交互设计原则（来自 2025 年 4 月的课程平台构建项目）

这些原则不仅适用于落地页，也适用于产品 UI、课程平台和交互体验：

1. 执行 > 雄心。 流畅的简单动画胜过卡顿的复杂动画。如果无法达到 60fps，就缩减效果。只为 transform 和 opacity 添加动画。

2. 创意张力就是概念本身。 通过建立严格规则来融合相反的美学风格（模拟书籍 + 复古数字风格）——“书籍世界”使用衬线字体，“机器世界”使用像素字体，绝不在同一元素上混用。纪律本身就是设计。

3. 删掉多余步骤。 如果预览和目标页面展示相同信息，就将它们合并。用最短路径抵达体验。每个不必要的屏幕都是一个用户流失点。

4. 根据真实行为设计。 当受众不懂技术且容易感到压力时，加入渐进式披露（一次显示一个部分）、按时间控制内容展示（根据阅读时长逐段显示）和手动触发（“开始阅读”按钮），以控制体验节奏。大段文字 = 失去用户兴趣。

5. 功能性布局 > 装饰性布局。 “开始阅读”按钮应左对齐，因为阅读从那里开始。位置应服务于目的，而非对称。

6. 转场衔接处就是 bug。 每次状态变化都必须流畅衔接。按钮淡出 → 空间收拢 → 内容上移进入，形成一个连续动作。不能有硬切、突然出现或跳跃。

7. 反馈必须一目了然。 加载圆点应足够大、发光并带有动画。假设用户不会注意到细微提示。清晰 > 巧妙。如有疑问，就做得更明显。

8. 像素级空间感知。 对齐错误会立即被发现。展示之前，务必检查居中、内边距对称性和轴线对齐。

环境设计原则（源自社区聊天重设计，2026 年 4 月）

这些原则源自一份长达 3,000 字的聊天板块重设计方案。它们作用于最深层：先定义场所，再由此推导出各个组件。

9. 设计场所，而不是屏幕。 测试标准是：“这会让新用户觉得自己进入了一个世界，还是只打开了另一个标签页？” 设计任何板块之前，先定义它所代表的场所——一天中的时段、光源、材质、氛围。然后根据这个定义推导出每个视觉决策。

10. 分层构建背景。 背景是合成图层的堆叠，而不是单一颜色。方案为背景指定了五个明确图层：底色 → 颗粒纹理 → 暗角 → 环境光晕 → 扫描线叠加层。每一层都有明确的用途和特定的不透明度。深度正是这样构建出来的——通过逐层叠加，而不是依靠一个巧妙的渐变。

11. 字体区分就是信息架构。 衬线字体 = 人的表达（姓名、正文、描述）。像素字体 = 系统状态（计数、时间戳、状态、占位文本）。这两种字体绝不会出现在同一个文本元素中。它们之间的对比就是品牌。这也延伸到了命名：// SCHOLARS ONLINE 使用双斜杠语法，表示“系统正在发言”。

12. 物理隐喻就是规范。 设计方向中写着“放在桌上的便签卡片”，就意味着：比表面略亮、带有微妙阴影、质感温暖、尺寸有限、边缘可触。“盖在文件上的印章”，则意味着：压印效果、厚重感、印迹清晰。提取隐喻中所有隐含的视觉属性，并逐一实现。

13. 从世界内部为事物命名。 “在线玩家” → “在线学者”。占位文本使用带双斜杠的 // TYPE YOUR MESSAGE...。时间戳变成 APR 5 // 14:32。每个 UI 标签要么强化这个世界，要么破坏它。50 个细小的命名选择累积起来，就会形成“一个应用”和“一个场所”之间的差别。

14. 先为场景布光。 背景决定其上方的一切。背景规范要写得极其详细，因为背景会限制文本对比度、卡片颜色、光晕强度和动画亮度。先定义隐含光源，再由此推导所有前景颜色——不要分别挑选。

15. 关注情绪状态，而非功能状态。 空状态不是“没有消息”——而是像素风格的书籍插画，配上 // NO MESSAGES YET. SAY HELLO.。加载状态不是旋转图标——而是 Byte 思考的画面，配上像素字体的 Loading messages...。每种 UI 状态都有情感意图。先设计感受，再设计功能。

16. 受控的不对称引导视线。 激活状态使用左侧边框，而不是整体高亮。装饰性分隔线在中央放置菱形，两侧线条向相反方向渐隐。运用方向性的视觉权重来创建阅读路径和层级，而不是对称地高亮。

---

这些原则源自从零开始设计 tydra.netlify.app 和一个课程平台的过程。它们不是泛泛的最佳实践，而是从实际有效的改版前后对比中提炼出的原则。

---

核心流程

在写下一行代码之前，先回答以下四个问题：

1. 产品是什么？（它在实体或功能上是什么？）
2. 它解决了什么问题？（在它出现之前，什么出了问题？）
3. 买家是谁？（创始人？工程师？消费者？）
4. 访客看到第 3 个板块时，应该有什么感受？（好奇？紧迫？信任？）

答案决定配色方案、动态效果风格、字体排版和文案语气。不要跳过这一步。

---

叙事结构

落地页是一个分幕的故事。每个版块都是一个节拍，而不是信息倾倒。

第一幕 — 吸引注意（主视觉区）：明确说明这是什么，并在视觉上令人印象深刻。最多一句话。 第二幕 — 问题（为何重要）：展示过去哪里出了问题。用情绪表达，而不是列出要点。核心信息应在语言之前传达出来（通过符号、色彩、规模）。 第三幕 — 证据（数据／材料／科学）：用真实依据支撑主张。不要抽象描述——展示废料堆。 第四幕 — 解决方案（产品）：展示它能做什么，而不是它是什么。文案务实，不用营销话术。 第五幕 — 信任（人物／资历）：真实面孔，真实奖项。简短。 第六幕 — 行动（新闻通讯／行动号召）：只提出一个要求。采用高端的呈现方式。

滚动顺序就是论证顺序。如果论证站不住脚，布局就无关紧要。

---

色彩即语言

色彩不是装饰，而是含义。先分配用途，再指定十六进制色值。

用途	色彩	使用场景
错误／问题	红色／陶土色（rgba(210,90,65)）	删除线、问题状态、“之前”
解决方案／品牌	青绿色（#25c9b0 或类似色）	行动号召、成果、品牌标记
高端／明亮	暖象牙色（#f5f0e8）	阅读版块，与深色形成对比
深度／暗色	近黑墨色（#0d1117 或暖色变体）	主视觉区、深色版块、页脚
自然／温暖	琥珀色（rgba(194,152,98)）	人物、温馨时刻

在每个文件顶部建立 CSS 变量系统：

:root {
  --ink: #0e1117;
  --cream: #f5f0e8;
  --cream-dark: #e8e0d0;
  --teal-glow: #25c9b0;
  --terracotta: rgba(210,90,65,1);
}

设计中的每种颜色都应对应一个变量。不要使用一次性十六进制色值。

---

字体层级

四种字体，各司其职。不要超出此范围混用：

• Playfair Display（或同类展示用衬线字体）：品牌语调、情绪高潮、主视觉标题
• 等宽字体（例如 font-family: monospace）：标签、数据、技术精度、版块编号
• 衬线斜体：引语、温馨时刻、创始人口吻
• 系统无衬线字体：正文、易读性、UI

以规模讲述故事：字号不只是层级，更是强调。需要突出成果时，就把字号设得大得夸张（深色背景上用青绿色的 92px Playfair）。小字轻声细语，大字掷地有声。有意识地运用它们之间的差距。

标签规范：版块标签使用小号等宽大写字母：

<p class="s-label">05 — Why it works</p>
<h2 class="s-title">Six reasons chitin wins.</h2>

---

动效原则

规则 1：入场动画只播放一次。 使用 IntersectionObserver，在元素进入视口时触发 .reveal 类。触发后断开观察器。

规则 2：环境动效要缓慢而微妙。 色块、闪光扫过、浮动标签——这些动效可以循环播放，但时长应为 3–8s，幅度要小。它们应像呼吸，而非表演。

规则 3：错开 = 节奏 = 叙事。 多个元素按顺序显现时，让它们之间错开 0.1–0.2s。这会让列表读起来像对话，而不是信息倾倒。

规则 4：动效要有意义。

• 向上滚动（数字递增）：增长、提升
• 淡入 + Y 轴位移：到来、显现
• 完成时缩放脉冲：满足、确认
• 水平闪光扫过：精致、奢华

规则 5：拿不准时，就删掉。 Tydra 标题上的水波纹在技术上令人印象深刻，但也有些过头。删掉所有会与内容争夺注意力的元素。

显现系统（基础 CSS + JS）：

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

---

版块过渡：实体感，而非视觉效果

渐变的问题：看起来像刻意设计的。用户会感受到接缝。

解决方案：带阴影的卡片边缘。

/* Section that casts shadow over the next */
.dark-section {
  border-radius: 0 0 52px 52px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 20px 40px rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
}

/* Section that slides underneath */
.light-section {
  border-radius: 52px 52px 0 0;
  margin-top: -52px;
  position: relative;
  z-index: 1;
}

两条曲线相接，阴影营造出深度。无需渐变。视觉逻辑来自实体感：一张卡片叠放在另一张卡片上。

规则：深色版块平滑衔接（不做特殊处理）。浅色版块则作为独立的浮起卡片呈现。

Gooey 氛围 Blob（有机动感背景）

适用于高端产品／生物科技定位。营造生物、有机的视觉效果，但不直接照搬真实形象。

<svg style="position:absolute;width:0;height:0">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur"/>
      <feColorMatrix in="blur" mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
    </filter>
  </defs>
</svg>

.blobs-container {
  position: absolute; inset: 0;
  filter: url(#goo);
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: hard-light;
  opacity: 0.7;
}

使用 moveInCircle、moveVertical、moveHorizontal 关键帧为 Blob 添加动画，时长设为 15–25s。添加一个带缓动延迟、可跟随鼠标的 Blob，增强交互性。

重要：如果 Blob 边缘出现像素化，请移除滤镜中的 feColorMatrix，仅使用模糊效果（单独使用 feGaussianBlur）。融合效果会弱一些，但边缘会保持干净。

---

问题部分的设计模式

Tydra 页面中最有效的部分。适用于任何替代故障事物的产品。

结构：

1. 大号水印字符（×、! 或视觉符号），透明度为 0.07，并添加多层阴影
2. 点明问题所在的文案行，其中被划掉的词使用陶土色／红色
3. 用超大尺寸（80–100px）的青绿色展示衬线字体呈现一句点题文案，转向解决方案
4. 每一行依次错开 1s 出现（不要同时出现）
5. 也可以使用滚动吸附，让视口停留在此部分，直到完整播放完序列

.problem-watermark {
  font-size: clamp(220px, 35vw, 400px);
  opacity: 0.07;
  text-shadow:
    2px 2px 0 rgba(80,30,10,0.6),
    -2px -2px 0 rgba(80,30,10,0.4),
    0 0 180px rgba(20,80,80,0.3);
}
.strike { color: var(--terracotta); text-decoration: line-through; }
.payoff { font-family: 'Playfair Display', serif; font-size: clamp(48px,7vw,92px); color: var(--teal-glow); }

---

新拟态卡片（适用于统计数据、功能、数据）

根据卡片背景色推导阴影颜色。每种阴影颜色都在基础色上偏移 15%，不要使用随意选择的灰色。

.neu-card {
  background: var(--cream);
  border-radius: 24px;
  box-shadow:
    8px 8px 20px #c0b9ae,   /* 15% darker than --cream */
    -8px -8px 20px #ffffff; /* lighter */
  padding: 40px;
}

对于卡片内的图像背景：使用渐变叠加层，从透明渐变至卡片颜色，让图像自然融入表面，而不是被生硬裁切。

---

图像处理

规则：图像需要渐变过渡，而不是生硬边框。

.image-card {
  position: relative;
  overflow: hidden;
}
.image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, transparent 60%);
}

对于人物照片：调整 background-size 和 background-position，裁去分散注意力的背景。使用 background-size: 150–180%，放大图片以避开页眉／UI。添加与配色相匹配的描边，与整体调色板呼应。

悬停时：在 0.5s 内微微放大至 1.05 倍（transform: scale(1.05)）。效果要 subtle。

---

文案原则

• 朴实表达胜过术语：“继木材之后最常见的天然材料”，而不是“高丰度生物聚合物基材”
• 短句：每句 8–12 个词。大声读出来。如果读得上气不接下气，就再缩短。
• 具体实用：“发货时已预水合，可直接投入使用。无需新添工具。”——这是实实在在的承诺，不是功能形容词。
• 一句话传达情绪：“从此不再如此。”“走在科学前沿。”这些表达之所以有力，是因为它们够简短。
• 用标签引导理解：标题前的小号等宽字体标签，能告诉用户该如何理解接下来的内容。
• 页脚引言：每个高端页面都以一句富有哲理的话收尾。要有依据，避免陈词滥调。
• 写入文件前，先使用 humanizer skill 处理所有公开文案。

---

UI/UX 基础知识（快速参考）

字体排版润色

将所有标题的字距收紧至 -0.02em 到 -0.03em，并将行高降至 1.1–1.2。仅此一项调整，就能立刻让任何大号文字显得专业。正文保持正常字距，行高设为 1.5–1.6。

图标尺寸

图标应与相邻文字的行高一致。如果字体渲染后的行高是 24px，图标尺寸就应为 24px。图标过大是最常见的业余设计特征。

按钮基础知识

• 内边距比例：水平内边距 = 垂直内边距的 2 倍（例如，12px 24px）
• 四种必备状态：默认、悬停、激活／按下、禁用。也可以添加加载状态（旋转指示器）。
• 幽灵按钮：无背景，仅显示文字和可选边框。悬停时显示背景。适用于实心主按钮旁的次要 CTA。

输入框状态

每个输入框都需要：默认、聚焦（品牌色边框）、错误（红色边框 + 下方提示），也可以添加警告状态。状态缺失会让表单显得失效。

正确使用阴影

如果你第一眼注意到的是阴影，那它就太强了。降低不透明度，增加模糊度。同一层级背景上的卡片需要使用微妙的阴影；悬浮在内容上方的弹出层／下拉菜单则需要更强的阴影。

暗色模式规则

• 不要用盒阴影营造层次——应使用比页面背景更亮的卡片背景
• 降低边框对比度（深色背景上的浅色边框过于刺眼）
• 降低标签和徽章的饱和度与亮度；将其中的文字调亮
• 深紫色、深红色和深绿色都适用——不要默认使用灰色或海军蓝

语义颜色

蓝色代表信任。红色代表危险或紧急。黄色代表警告。绿色代表成功。颜色应服务于用途，而不是装饰。绿色标签意味着“新”或“成功”——不要只因为绿色好看就使用它。

从一种主色构建色阶

从品牌色开始。将其调亮用于背景，调暗用于文字。仅此一步，就能让你无需随意挑选次要颜色，便构建出一套完整的配色系统。

微交互

每个用户操作都需要有可见反馈。复制按钮 → 确认标签向上滑入。表单提交 → 显示成功状态。切换开关 → 平滑过渡。如果用户进行了操作，但界面没有任何可见变化，那么 UI 就出问题了。

提升文字可读性的图片叠层

有以下 3 种方案，从基础到高级：

1. 全屏半透明叠层（可用，但会遮挡图片）
2. 从透明到背景色的线性渐变（保留图片，并逐渐提升文字可读性）
3. 在渐变上叠加渐进式模糊效果（现代、高级的观感）

响应式网格指南

对于结构化或重复内容（图库、博客网格、卡片布局）：桌面端 12 列、平板端 8 列、移动端 4 列。自定义或叙事型版块无需遵循列网格——留白和视觉权重比对齐更重要。

---

应避免的做法

这些做法单独看起来很出色，但会让页面效果变差：

• 水波纹 / 对文字应用复杂的 SVG 扭曲效果：过度了，容易分散注意力。
• 数字持续递增：进入页面时播放一次动画，然后停止。不要无限跳动。
• 导航栏颜色检测（根据版块切换明暗样式）：会造成认知失调。选定一种导航栏样式并坚持使用。
• 版块之间的渐变过渡：改用卡片边缘和阴影。
• 同时显示内容：始终错开显示。
• 如果 gooey 滤镜上的 Color Matrix 导致像素化：只使用模糊效果。
• 轮播图：尽可能改用静态的全幅卡片。
• 通用促销 CTA：每个 CTA 都应与所在版块的内容相关。

---

部署（通过 API 使用 Netlify）

# Deploy single HTML + images to Netlify without CLI
NETLIFY_TOKEN="your-token"
SITE_ID="your-site-id"

# Create zip, deploy via API
zip -j deploy.zip index.html image1.jpg image2.jpg
curl -X POST "https://api.netlify.com/api/v1/sites/$SITE_ID/deploys" \
  -H "Authorization: Bearer $NETLIFY_TOKEN" \
  -H "Content-Type: application/zip" \
  --data-binary @deploy.zip

对于仅包含 HTML 的部署，使用 Netlify Files API 根据文件的 SHA 逐个 PUT 文件：

1. 计算每个文件的哈希值
2. POST 部署清单
3. PUT Netlify 尚未存储的文件
4. 上传所有必需文件后，部署会自动发布

---

完整网站构建检查清单

每个多页面网站的构建都应按以下顺序完成这些步骤。跳过不适用的步骤，但要逐项检查。

阶段 1：基础

1. 探索——这是什么业务？谁会访问网站？他们应该有什么感受或采取什么行动？
2. 设计系统——运行 UI/UX Pro Max --design-system，确定配色、字体和样式
3. CSS 变量——将颜色、阴影、圆角和间距都定义为自定义属性。不使用任何一次性的十六进制颜色代码。
4. 字体——加载 Google Fonts。设置标题字体、正文字体，以及用于标签或统计数据的等宽字体。最多使用 3 种字体系列。
5. 基础样式——设置 Reset、body、img、a、button 的默认样式。配置显示动画系统（.reveal、.d1-.d6）。

阶段 2：页面结构（index.html）

6. 导航栏 — 固定置顶，滚动时显示阴影和背景模糊效果。Logo + 页面链接 + CTA 按钮。汉堡菜单 + 移动端菜单浮层。
7. 首屏 — 标题中包含强调色文本，副标题和 CTA 按钮。可选：带图片的统计卡片、浮动标签/徽章、地点徽章。
8. 能力 / 功能 — 图标 + 标题 + 描述卡片，采用三列网格布局。
9. 产品展示 — 左右并排布局，中间设分隔线，用于比较不同选项（例如，两种扫描仪类型）。添加徽章标签、带渐变淡出效果的图片卡片。
10. 团队 — 带姓名、职位（等宽字体标签）和资质列表的照片卡片。照片上叠加渐变层，使其自然融入卡片背景。
11. 用户评价 — 星级评分、斜体引言、头像姓名首字母、作者姓名 + 补充信息。采用三列网格布局。添加来源说明行。仅使用真实评价，绝不捏造。
12. 流程 / 步骤 — 横向步骤流程，包含编号图标、连接线和箭头指示器。在移动端纵向堆叠。
13. 地点 — 地图嵌入卡片，包含地址、电话、传真和徽章（例如“提供 X 射线检查”）。在地图底部边缘叠加渐变层。
14. 保险 / 价格 — 分栏布局：已接受保险计划清单 + 展示自费/其他选项的视觉卡片。
15. 常见问题手风琴 — 同一时间仅展开一项。展开时加号图标旋转为 X。使用 max-height 实现平滑过渡。
16. 联系 — 深色区块，包含表单（姓名、电子邮件、电话、地点选择框、消息文本框）。社交链接。兼作页脚容器。
17. 页脚 — 在深色联系区块内采用多列布局：品牌 + 描述、页面链接、地点列。版权栏包含社交图标。
18. 移动端固定 CTA — 仅在移动端显示的底部固定栏。包含“立即致电”和“预约”按钮。通过 IntersectionObserver 在滚动超过首屏后显示。为页脚添加底部内边距，避免内容被遮挡。

阶段 3：子页面

19. 严格遵循设计系统 — 使用相同的导航栏、页脚、CSS 变量、字体导入和显现系统。每个子页面都应给人同一网站的感觉。
20. 页面首屏 — 比首页首屏更短。包含区块标签、h1 和副标题。可选面包屑或返回链接。
21. 子页面类型 — 技术（扫描仪规格、图像质量）、专科医生（完整简介、资质）、患者（准备信息、就诊预期）、保险（完整计划列表、账单信息）、联系（独立表单）、医生/转诊（转诊步骤、传真信息、能力）。

阶段 4：润色

22. 文案 — 使用 /humanizer 处理所有面向公众的文本。避免营销腔。句子简短。
23. 文本孤行 — 为所有标题、副标题和短段落添加 text-wrap: balance。为正文设置 max-width 约束，避免换行后只剩一个词。
24. 响应式审查 — 检查 375px、768px、1024px 和 1440px 下的每个区块。检查网格折叠、字号限制和移动端隐藏元素。
25. 图片处理 — 所有图片均使用 object-fit: cover、渐变淡出叠层和恰当的替代文本。悬停时在 0.5s 内执行 transform: scale(1.05)。
26. 动画 — 统计数字递增动画（仅触发一次，采用缓动三次函数，持续 1.4s）。首屏图片添加轻微视差效果（仅桌面端，范围 20px）。所有区块均采用交错显现效果。
27. 无障碍性 — 为仅含图标的按钮添加 ARIA 标签，为表单添加标签，使用语义化 HTML，并提供清晰可见的焦点状态。

---

从 Extremity MRI 构建中总结的模式

统计数字递增动画

首屏卡片或统计区块中的数字应在滚动进入视口时从 0 开始递增。使用 IntersectionObserver 触发，用 requestAnimationFrame 实现平滑插值，并采用三次缓出。仅触发一次。小数（0.4）和后缀（+）应分别处理。

function animateCountUp(el, target, suffix) {
  const duration = 1400;
  const isFloat = String(target).includes('.');
  const start = performance.now();
  function tick(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);
    const current = isFloat ? (eased * target).toFixed(1) : Math.round(eased * target);
    el.textContent = current + suffix;
    if (progress < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

常见问题手风琴

同一时间仅展开一项：点击一项时关闭其他所有项。使用答案容器上的 max-height 实现动画。展开时，加号图标（+）旋转 45 度变为 ×。

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }

粘性移动端 CTA

底部固定栏默认隐藏（transform: translateY(100%)），当 Hero 离开视口时显示。在 Hero 区块上使用 IntersectionObserver——当元素不再相交时，添加 .visible 类。

卡片内的浮动标签

注意事项：如果卡片设置了 overflow: hidden（用于裁切图片），任何定位在卡片外部（top: -0.75rem）的元素都会被裁切。将浮动标签定位在卡片边界内侧（top: 0.75rem; right: 0.75rem; z-index: 2），让它覆盖在图片上方。

背景裁切文字 + 斜体裁切

注意事项：-webkit-background-clip: text 与 font-style: italic 和较紧的 line-height 搭配使用时，会裁切斜体字符的边缘（尤其是末尾的 “s”、“g”、“y”）。修复方法：在强调文本的 span 上添加 padding: 0 0.15em，并设置 margin: 0 -0.1em 进行补偿，同时添加 box-decoration-break: clone。

用户评价卡片

绝不要编造评价。如果没有真实评价，请使用占位文本 [Paste real Google review here]。为客户审核而编写占位评价时，要让它们听起来像真实用户所写——语法随意、细节具体、不使用营销词汇。每条评价都应突出不同的卖点。

多地点处理

• Hero：在 CTA 按钮下方添加含图钉图标和分隔线的低调地点徽标
• 导航栏：为每个地点设置单独的电话 CTA 按钮（“Miami”／“Broward”）
• 地点区块：并排展示地图嵌入卡片
• 页脚：每个地点分别设置单独的列
• 移动端：地点纵向排列，隐藏分隔线

导航栏中的电话号码 CTA

对于服务类企业，导航栏 CTA 按钮应使用 tel: 链接，而非页面锚点。显示地点名称，而非电话号码（更简洁）。将其设计为与导航栏风格一致的胶囊按钮。

---

参考：Tydra

• 在线网站：https://tydra.netlify.app
• 工作文件：~/Desktop/tydra-v2.html
• 配色：--ink（深色）、--cream（象牙色）、--teal-glow（品牌青绿色）、--terracotta（问题红色）
• 字体：Playfair Display（展示字体）、系统等宽字体（标签）、Georgia（引言）
• 区块：Hero → 几丁质说明 → 问题 → 关于／数据 → 产品系列 → 应用场景 → 工作原理 → 团队 → 电子报 → 页脚

参考：Extremity MRI

• 工作目录：~/Desktop/extremity-mri/
• 配色：--ivory: #f5f0eb、--blue: #5a8abf、--black: #0a0a0a、--blue-pale: #dce8f4
• 字体：Space Grotesk（标题和正文）、JetBrains Mono（标签／统计数据）
• 页面：index、technology、specialists、patients、insurance、contact、physicians
• 区块：Hero（统计卡片 + 地点）→ 功能 → 扫描仪（分栏）→ 团队 → 用户评价 → 步骤 → 地点 → 保险 → 常见问题 → 联系方式／页脚
• 关键模式：统计数字递增、常见问题手风琴、粘性移动端 CTA、Hero 视差效果、多地点导航栏

---

从真实品牌套件构建中总结的模式

数据呈现原则

1. 始终注明并链接来源。 引用基准数据或行业平均值时（例如“Instagram 的平均值为 0.50%”），请在数据附近添加不显眼的可点击来源链接。字号小、透明度低，不会喧宾夺主，但有需要的人可以据此核实。未注明来源的数据会削弱可信度，审核者也会立刻发现。

2. 为数据标注时间范围。 “总互动量为 397,486”如果没有时间范围，就毫无意义。对于有时限的数据，始终注明时间段：“过去 90 天内”。没有时间范围的数据看起来像是编造的。

3. 引导观众理解数据。 不要只是把两个数字并排展示。在数据和背景之间加上一句承接的话，例如“这很惊人，因为……”。观众需要知道一个数字为何重要，而不只是它是什么。通过视觉设计呈现对比——让“Ours”在视觉上明显大于平均值，让观众先感受到差距，再读到数字。

4. 数字必须对得上。 如果你展示的每周增长柱状图合计为 31.9K，但实际粉丝数是 28K，就会有人注意到。务必检查各项数字的总和是否等于标注的总数。除非明确标注，否则使用净值，而非总量。审查时有人立即发现了约 4K 的差额。

5. 补充单位或背景词。 “从 0 增至 58,500”——58,500 个什么？务必注明名词：“粉丝数从 0 增至 58,500”。不要假设观众知道这个数字代表什么。

文案原则（品牌资料包专用）

6. 用通俗语言替代行话。 “优先分享行为”是营销术语。“自带口碑传播”才是人们会说的话。如果读者需要琢磨才能理解一句话，就重写它。

7. 使用“社区”，而非“人们”。 “我们的社区在说什么”比“人们在说什么”更有说服力。“社区”意味着忠诚度、归属感和重复互动——这些都是赞助商看重的特质。

8. 删除解释过多的副标题。 如果标题本身足够有力（“四个月内粉丝数从 0 增至 58,500”），再用更多文字重复解释同一件事的副标题只会削弱效果。让数字自己说话。别依赖副标题。

9. 补充平台背景。 “我们在 Facebook 上的起步晚于 Instagram”能让观众明白为什么某个平台的粉丝可能较少。没有背景，他们就会以为该平台表现不佳。

视觉／设计原则

10. 通过设计而不仅是文案，突出主要产品。 如果 30-Day Placement 是你最重要的赞助方案，就不该把它做成与其他三项同样大小的卡片。将它设计成全宽主视觉卡片，添加金色边框、“Most Popular”徽章和数据明细。设计比文字更快传达优先级。

11. 在平台版块中添加头像和可点击的账号名。 每个平台版块都应在版块标题旁内联显示一张小型圆形头像和可点击的 @ 账号名。这能建立信任——观众可以核实账号是否存在，并自行查看数据。

12. 可读性优先于含蓄。 对比数字如果太小或对比度太低，比较的意义就会荡然无存。如果你展示 0.50% 与 18.3% 的对比，就要让“Ours”在视觉上明显更大（36px，而非 28px），让观众在视觉上感受到差距。标签必须清晰可读——10px 且透明度为 0.25 时，根本看不见。

13. 每个版块都必须有存在的理由。 构建版本删掉了增长时间线、爆款帖子版块和“按观看次数排名的热门内容”面板。如果某个版块不能直接促进销售（用于品牌资料包）或推动叙事（用于落地页），就应将其删除。填充内容会因相邻关系而削弱有力版块的效果。

结构原则

14. 将数据放到相关位置。 Facebook 的逐周增长图表最初单独放在“Results”部分。后来它被移到了 Facebook 部分中。关于某个平台的数据应放在该平台的部分。不要为有明确归属的数据单独创建孤立的部分。

15. 使用引导标签引导视线。 在重要数据和解释之间添加简短的斜体或全大写标签：“这之所以令人惊叹，是因为”。它既是设计元素，也是叙事手法——在读者看到下一条信息之前，它会告诉读者应以怎样的思路来理解。

---

从 Barilette Cafe 构建项目中学到的模式

抓取和重建现有网站

1. Wix 网站需要使用浏览器自动化，而不是 WebFetch。 Wix 在客户端渲染。WebFetch 返回的是基础设施 JS，而不是内容。使用 Chrome 浏览器工具：导航到页面，通过 get_page_text 获取文案，通过 javascript_tool 从 DOM 中提取所有图片 URL。先滚动到页面底部，以触发延迟加载的图片。

2. 从线上网站提取配色方案。 对所有元素使用 getComputedStyle，提取实际渲染的颜色。过滤掉透明色、黑色和白色等干扰项。最具辨识度的两个非中性色可作为主色和辅助色。Barilette 的配色为：浓缩咖啡棕（#513408）和暖奶油色（#FAF9F5）。

3. 菜单图片需要手动转录。 餐厅菜单通常以图片形式呈现（设计好的菜单 JPG/PNG）。先截图，再通过视觉阅读内容，然后重建为结构化 HTML。采用标签页切换菜单部分，并在菜品之间使用点线分隔，看起来会比直接复现图片专业得多。

小型企业／咖啡馆网站模式

4. 对餐厅而言，使用标签页展示菜单是正确的做法。 将类别设为胶囊按钮标签页（早餐／美食／饮品／咖啡），每个标签页内采用双栏布局，菜品之间使用点线边框，菜品名称使用衬线字体，描述使用柔和色调，价格右对齐。这样更像真正的印刷菜单，而不是网站。

5. 平衡各栏内容。 如果一栏有 3 道菜，另一栏有 12 道，就在各栏之间移动类别，直到视觉分量大致相当。用户会立刻注意到一侧的空白区域。咸味菜品（3 道）所在的一栏太短——把 Healthy Hints 放到它下面后，布局就平衡了。

6. 不要在不同部分重复使用图片。 如果某张图片用作主视觉背景，就不要在故事部分或图库中重复使用。同一张图片应只出现一次。用户会立刻注意到重复。

7. 优先使用本地图片（来自 Downloads 的 avif/jpg），而不是远程 Wix URL。 用户提供已下载的图片时，应使用本地路径（img1.avif），而不是带有缩放参数的远程 Wix URL。带有 fill/encode 参数的 Wix URL 可能会失效或返回错误内容。本地文件可靠且加载迅速。

8. 咖啡馆／餐厅的主视觉背景应使用室内照片。 不是食物，也不是徽标——而是空间。展现氛围：爱迪生灯泡、质朴的架子、格子桌布、葡萄藤。食物放进图库。室内环境能让访客感受到在那里会是什么感觉。

9. 暖色调品牌适合棕色导航栏。 如果品牌配色以暖棕色／奶油色为主，奶油色导航栏会显得暗淡。改用棕色导航栏、奶油色文字和反色 CTA 按钮。这样更符合品牌风格，也能形成干净利落的顶部边缘。

10. 在地点部分嵌入 Google 地图。 使用包含商家地址的 Google Maps 嵌入式 iframe。采用双栏布局，搭配地址、营业时间、电话、电子邮件和配送信息（左侧信息，右侧地图）。地图使用圆角，与网站的边框圆角风格保持一致。

面向图片较多网站的图片整理

11. 编写任何 HTML 之前，先规划好所有图片的分配。 向网站添加 10 张以上图片时，先规划好每张图片的摆放位置：哪张图片放在哪个版块，以及原因。每张图片只分配一次。这样可以避免在制作过程中才发现图片重复使用，进而手忙脚乱。

12. 图片必须与所在版块的内容相符。 食物照片（鹰嘴豆泥拼盘）不适合作为饮品菜单的特色图片——应使用真正的饮品（冰沙）。早餐版块应展示糕点或早餐食物。咖啡版块应展示浓缩咖啡吧。图片应与旁边的文案相匹配，而不只是整体氛围相符。

13. 相似度很高的图片也算重复。 三张从略有不同的角度拍摄的牛油果吐司照片算一张，不是三张。同样，两张拍摄同一处室内角落的照片也算重复。精选出每个主题最出色的一张。只有在版面中彼此间隔较远且用途不同的情况下，才使用其他照片。

14. 不要过度使用同一种设计模式。 两组照片条就太多了——这样会让它失去特别之处。一组照片条 + 一个视差分隔区 + 一个扩展图库，就能提供足够的视觉丰富度。每种模式只应出现一次，除非有充分理由重复使用。

15. 大量图片时使用瀑布流图库。 图库中有 8 张以上图片时，将僵硬的网格改为 CSS columns 瀑布流。这样竖幅和横幅图片就能并存，而不必强行设定宽高比。交替排列食物和室内照片，营造节奏感。

图库网格

16. 根据图片数量匹配网格列数。 3 张图片 = 3 列。4 张图片 = 2x2。6 张图片 = 3x2。除非有 5 张以上图片，且其中一张显然应作为主图，否则不要强行使用跨行布局（第一项跨 2 行）。宽高比 4/3 适用于大多数食物和室内摄影。

参考：Barilette

• 工作目录：~/Projects/websites/barilette/
• 桌面符号链接：~/Desktop/barilette.html
• 配色：--espresso: #513408、--cream: #FAF9F5、--wine: #5a2b1c、--parchment: #D4CCC1
• 字体：Playfair Display（标题）、Inter（正文）
• 版块：主视觉区（室内背景）→ 品牌故事（室内照片 + 亮点）→ 照片条（5 张食物照片）→ 菜单（标签页：早餐/食物/饮品/咖啡，每个类别各有一张特色图片）→ 视差分隔区（室内照片 + 引言）→ 图库（9 张图片的瀑布流）→ 到访信息（信息 + Google Map）→ 页脚
• 关键模式：带点状分隔线的标签页菜单、棕色导航栏、img/ 文件夹中的本地图片、双列菜单布局、版块之间的照片条、带文字叠加层的视差分隔区、使用 CSS 列布局的瀑布流图库
• 图片分配：20 张不同的图片，每张只使用一次。按用途分类：室内照片用于营造氛围，食物照片与菜单类别相匹配，混合图片用于图库

---

客户方案与审计

在撰写方案或审计客户现有的网站/线上形象时，请遵循以下规则：

发布前核实每一项事实陈述

如果方案中提到了客户业务的具体信息（评价数量、回复状态、照片数量、服务区域的表述、页面速度），请在写入前进行全面核实。不要只查看 18 条评价中的 2 条，就笼统地说“没有回复”。不要不经查看就假设某个字段为空。一项错误的陈述就足以损害可信度。

流程：

1. 撰写任何审计发现之前，先查看实际来源（Google 商家资料、线上网站、搜索结果）并予以确认
2. 检查所有实例，而不是抽样检查。如果有 18 条评价，就逐条查看
3. 如果无法完全核实某项信息，请使用较为谨慎的措辞（“部分评价可能尚未收到回复”，而非“没有回复”）
4. 在发布方案之前，标出每一项事实陈述，并注明它是经过核实还是未经核实的假设。修正未经核实的假设。

经验教训（屋顶承包商客户提案，2026 年 3 月）

提案中写道“18 条评价均未回复”。实际上，客户已回复了其中一些评价。我们只查看了前 2-3 条评价，就假定其余评价也没有回复。这可能会损害我们在客户心中的可信度。务必逐条查看。