zstvns/网页设计

网页设计 是做什么的？

你将品牌的已定义视觉系统应用于一个真实的网站，并发布代码——同时进行设计和构建，全部使用自定义代码。这是首个"应用"技能：来自creative-direction的颜色角色、字体规则、主题元素和标志性组件，将围绕真实文案，成为一个真实的转化界面。

首先阅读design-principles。这个技能是其规则与浏览器相遇的地方：层级是核心任务，克制保护信息，"对比而非竞争"，"说明理由，否则保留默认"。将经过设计的网站与拼凑而成的网站区分开来的大部分内容都在这里。

在序列中的位置： 在creative-direction（系统）和logo-design（标志）之后，是首个"应用"技能。它消费视觉形象，而不定义视觉形象。自定义代码是媒介——此技能构建定制HTML/CSS（以及项目现有的框架），而非Webflow或Framer。

诊断品牌状态——已定品牌，还是需要重做？

在任何操作之前，诊断品牌当前的状态。打开 .agents/design.md、.agents/brand.md、.agents/product-marketing.md——到这个阶段三个文件都应该存在。然后问一个问题：

我们是在应用一个已确定的品牌，还是从头开始重新设计？

四种路径，以客户使用的简单语言表述：

• 优化现有元素（"我们喜欢我们的品牌，只是网站较弱"）→ 优化。继续执行——这正是此技能的核心场景。
• 轻量创意方向（"保留名称和标志；新字体、颜色、图形"）→ 轻量进化。只有当 design.md 已经记录了这些新选择时才继续执行；如果没有，则增量变化是未定义的 → 回退到 creative-direction，先完成轻量版本。
• 全面品牌重塑（"全新的所有内容"）→ 革命 → 停止并回退到 creative-direction。 不要在一个未定义的系统上设计网站。
• 重度进化（核心系统确实在改变）→ 也需回退。

即使用户带着一个标志直接过来也需要回退——没有系统支撑的标志不足以构建一个连贯的网站；将他们推回。经验法则：每当视觉系统正在被定义或更改时，就回退；只有当系统已确定时，才继续执行。

如果 .agents/design.md 缺失，这本身就是一个"回退"信号——还没有系统可以应用。回退到 creative-direction。如果 .agents/product-marketing.md 缺失或页面没有文案，则首先回退到营销库的 copywriting / website-copy：网站围绕文案构建，反之则不行。

文案优先——系统是舞台，不是表演本身

最重要的输入是文字。阅读 .agents/product-marketing.md 中的文案（受众、声音、定位以及页面文案本身）。设计师的工作是理解所说的内容，并赋予它适当的强调、愉悦和惊喜——而不是构建一个模板，然后把文案倒进空白处。线框图优先的思考方式是拼凑页面的最快标志。如果文案还没写，先把它写出来。

尺寸跟随内容，而非模板。 标题的大小由实际文案决定——一个旨在被第二行（例如，打字接续、旋转短语）补充的钩子线意味着一个更小的标题，而不是一个独自存在的巨大单行。一个只有孤立的钩子而没有后续的首屏区域，读起来会感觉不完整。为你拥有的内容进行设计；不要强行将其塞入固定的首屏外壳中。

视觉系统服务于信息。设计服务于信息。网站是舞台；文案是表演。

当你参考现有网站时，要忠实地再现它

正在重新设计一个现有的网站，或者要构建一个“像”某个参考网站的东西？那么查看那个网站上实际发生了什么——不要凭记忆去近似。完整方法见 references/faithful-replication.md。

• 移植每一个区块。 从上到下盘点来源网站，并将每个区块复制过来——正确的文案、正确的顺序。一个"重新设计"如果悄悄地丢弃了终端注册区、能力展示区或轨道式产品展示，那就不是重新设计，而是一个不同的网站。
• 匹配网站推动的行动。 阅读它鼓励访客做什么，并重现那种机制，而不仅仅是文字。如果首屏邀请你输入网址以获得免费计划，那么重新设计的首屏也需要那个URL输入框和按钮——主要操作才是页面的核心。
• 获取真实素材。 集成/合作伙伴标志是真实且可用的（来自Relume或品牌素材库、来源网站本身的标记、像simple-icons这样的品牌SVG来源）。使用真实的标志——永远不要用图标加文本的替代品代替，也永远不要发布一个对比度低的标志条。
• 传达视觉元素的真实故事。 产品插图必须传达产品做什么——例如，一个展示工作（写作、优化、发布、研究）围绕代理循环的轨道式展示，而不是错过要点的装饰。

你不是在制作一个供他人实现的模拟稿。你通过构建来进行设计——设计决策就是代码。输出真实的、生产级的前端：

• 匹配项目现有的技术栈（如果存在）（根据仓库约定使用 Next.js / Tailwind / shadcn）；否则，发布干净、自包含的 HTML/CSS。默认无框架依赖。
• 不使用 Webflow，不使用 Framer。 这个技能存在正是因为工作已经转向自定义代码——你可以根据工艺需求将定制标记推向任何高度，且没有构建工具的限制。
• 间距使用 rem，使用 clamp() 实现流式布局——生产环境中永远不要使用固定的 px。水平内边距基于百分比；区块内边距使用流式单位。详见 references/craft-details.md。
• 仅当用户明确想要一个平台构建（Webflow/Framer）时，才交叉引用营销库的 website-build-* 技能——这是此技能旨在远离的例外情况。

应用视觉系统

从 .agents/design.md 中提取系统——不要重新推导，不要在旁边做发明创造：

0. 放置已确定的标志；永远不要重建它。 从 logo-design 技能写入的规范文件中获取标志——.agents/assets/logo/logo-lockup.svg（导航、页脚）、logo-icon.svg（favicon、紧凑空间）、以及-翻转/单色变体（用于深色或单色背景）。它是一个固定的单一元素：不要自己设置文字商标，不要自己选择间距，不要重新为其着色以匹配某个强调色，不要裁剪它或将其放入一个盒子中，不要将其缩放到低于其最小尺寸，并尊重其留白区域。如果界面需要一个文件夹中没有的变体，请回退到 logo-design——不要在 CSS 中即兴创作。
1. 按角色分配颜色。 背景、文本（主要/次要）、行动号召/CTA、支持色。每种颜色五个色阶，不是十个。使用已定义的 token。
2. CTA颜色是一个经过深思熟虑的、一次性的选择——并且它不是文本或图形的颜色。 选择一个能传达前进感的单一颜色（启发式地，绿色或蓝色），并在所有地方用于主要行动。它必须在色度上与承载标题、图标和装饰的颜色区分开——否则按钮不会突出，而是会融合。只在实际的CTA上使用它——永远不要用于标题，也永远不要用于装饰性强调色。一个单独的品牌强调色可以承载重复强调（即使如此也要克制）；如果前进色开始出现在标签和图形上，它就不再意味着"行动"。也不要将非交互元素样式化为按钮——假的CTA会削弱真实的CTA。并且给CTA一个有区分度的形状——例如药丸形或圆角形，而不是与每个卡片相同的直角矩形——这样行动可以一眼识别。
3. 按角色使用字体，以创造对比而非竞争。 展示型、标题型、正文型——每种都有明确的工作。不要默认使用粗体；正文使用常规/书本粗细，更重的粗细保留给需要强调的时刻。标题行高 1.1–1.3，正文行高 1.5–1.6。次要文本使用比标题更柔和的色调/不透明度——即使在同一字体内也建立层级。通过一次系统性的操作，将整个页面正文的次要文本颜色统一更改，而不是逐个区块进行（详见 references/craft-details.md → 系统性工作）。
4. 主题元素承载品牌——但在信息必须胜出的地方要克制。 将标志性组件部署为纹理、图案或重复细节（这是独特性必须在应用中存活的地方——参见 design-principles）。在首屏，让它平静下来： 一个繁忙的主题元素放在标题和主要操作后面是干扰，而不是品牌标识。让信息和CTA主导；在后续区块中更自信地穿插主题元素。
5. 克制使用引导标签。 在每个区块上方加一个单行/大写的标签是混乱——它扁平化层级而不是构建层级。只有在区块确实需要标签时才使用引导标签；大多数区块用标题直接引导。
6. 深度、光影和表面过渡按照系统的意图——多层阴影叠加（不仅仅是平面的 shadow-md）、渐进式背景过渡以及有分寸的明暗切换，而非硬边缘的分段区块。

逐区块构建——让每个事物有它的位置

将页面作为一个序列来处理，永远不要孤立地处理每个区块。每个区块的完整剧本见 references/section-patterns.md。

• 命名每个区块的单一任务，然后赋予承载该任务的元素自己的位置，并按其级别进行缩放。定位行获得一个舞台；信任条获得一个全宽的跑道，而不是首屏的一个角落；首屏中的对象获得聚光灯。支持性的细节后退。
• 节奏是区块类型的词汇表，而不是列数。 轮换使用真正不同的区块类型——每种都是不同的媒介——并且永远不要重复使用同一种：非对称首屏、一个全出血的人物/视频时刻、一个插图/对比节奏、一个超大格言、一个固定滚动的叙事序列（一个标题固定，而语句在巨大的幽灵数字下方循环——与 motion-design 协作编排它）、彩色卡片、一个聚光灯下的物体展示、一个轮播。改变媒介（UI → 视频 → 插图 → 照片 → 卡片），而不仅仅是布局。然后使用一个贯穿始终的纹理 + 严格的颜色纪律来统一多样性，使用比例对比（幽灵数字 vs. 微小的文案），并在有力节奏之间留下安静的空间。失败模式是：用同一个乐器演奏整首曲子——相同的卡片/面板习惯用法，只是列数在变化。完整的词汇表见 references/section-patterns.md；研究 conversionfactory.co 以了解其节奏。
• 平衡每个文本区块与一个视觉元素。 一个本应包含图片的纯文本区块读起来会感觉不完整。使用分层、重叠的模拟稿来展示产品——一个设备、一张卡片、一个稍微旋转的贴纸，真实的深度——如同强大的营销网站所做的那样，而不是使用扁平截图或什么都没有。
• 整合。 三个充实的区块胜过五个单薄的区块。空白区域是一种强调，而不仅仅是呼吸空间。
• CTA、标志和悬停状态是内容，不是装饰。 主要和次要CTA在包括悬停在内的所有状态下都必须保持区分。合作伙伴/集成标志获得一个统一的信任区域——真实的标志，光学（而非像素）尺寸，统一颜色方案，以及足够的对比度以便于识别。

动效——承载品牌的动效特征，然后交接

动效是系统的一部分，而不是最后添加的装饰——并且像颜色和字体一样，其特征源自品牌。从 .agents/design.md 和情感目标中读取动效特征：一个有趣、特立独行的品牌需要活泼、大方、频繁的动效；一个严肃、高端的品牌需要微妙、受控、节俭的动效。"流畅"并非普适目标——将一个有趣品牌的动效以品味上过于简约的方式呈现，会使其扁平化为一个通用品牌。永远不要用自家默认的动效取代品牌自身的感受。

然后根据每个动画所做的工作来划分任务——这是你在这里处理的与委托给 motion-design 处理的界限：

• 功能性/UI动效——在这里构建。 悬停和聚焦状态、按压反馈、CTA的状态、展开和菜单过渡、区块展示。这类动效有明确的工作：反馈、定位、因果关系。不管品牌多么有趣，都保持其实用性——快速、不显眼、不碍事。
• 表达性/叙事性动效——交给 motion-design。 编排好的页面加载序列、固定的滚动叙事节奏、标志性产品展示行为、首屏时刻，以及任何其目的就是感受的内容特定创意。那是品牌自由度得以发挥的地方，也是十二条动效原则得以体现的地方。

你在这里需要达到的最低标准

以下是营销网站最重要的 motion-design 规则——直接应用它们；你不需要整个技能来做好它们：

• 一个命名的缓动集，并以 ease-out 作为主力。 使用自定义曲线，而不是原始的 linear（最明显的业余标志）也不是在所有地方都使用无差别的 ease。进入和退出动画在减速到静止时读起来效果更好。
• UI 过渡大约在 300ms 以下。 悬停/按压在 100–200ms 范围内；任何更慢的都必须值得等待。持续时间要匹配运动对象的质量——小的快，大的慢。
• 按压反馈。 在 :active 上做一个微小的缩放（约 0.97），让界面感觉像是在倾听。
• 进入动画重叠并交错；它们从不排队。 成组的元素共享时序，并通过小延迟（约 40–80ms）错开，而不是每个都等待上一个完成。这一个动作占据了从"还行"到"昂贵"之间的大部分距离。
• 只动画 transform 和 opacity。 动画 width/height/top/left/box-shadow 会触发布局或绘制并导致卡顿——而这种卡顿读起来就像是一个廉价的构建。
• 展示是分级的，而不是统一的。 每个元素完全一样地淡入是一个臭名昭著的差劲做法（见 references/web-slop.md）——失败之处是安全的做法

…

[已截断用于翻译]