Web Design 是一个“应用型”技能，作用是把品牌已定义的视觉系统应用到真实、以转化为目标的网站上，并在自定义代码中同时完成设计与构建。它消费品牌识别系统，而不是定义系统。
用途与定位 该技能位于 creative-direction（定义系统）和 logo-design（定义标志）之后，是第一个 Application 技能。它把色彩角色、字体规则、母题和标志性元素转化为真实的转化界面，并围绕真实文案来构建。它使用自定义代码作为媒介，构建定制的 HTML/CSS（若项目已有框架则沿用该框架），而不是 Webflow 或 Framer。
前置诊断 在开始前，需要打开 .agents/design.md、.agents/brand.md 和 .agents/product-marketing.md，并判断当前品牌处于哪种状态：
- 优化现有元素（“喜欢现有品牌，只是网站弱”）→ 继续，这是该技能的主场。
- 轻度创意方向调整（保留名称和标志，更换字体、颜色、图形）→ 仅当 design.md 已记录这些新选择时才继续；否则先回到 creative-direction。
- 全面重塑品牌（“全部换新”）→ 停止并回到 creative-direction。
- 重度演进（核心系统确实在改变）→ 同样回到 creative-direction。 只要视觉系统正在被定义或改变，就应回退；只有当系统已确定时才继续。若 .agents/design.md 缺失，说明尚无系统可应用，应回到 creative-direction。若 .agents/product-marketing.md 缺失或页面没有文案，应先完成文案，因为网站是围绕文案构建的。
文案优先 最重要的输入是文字。需要阅读 .agents/product-marketing.md 中的受众、语气、定位和页面文案。设计师的任务是给正在表达的内容以恰当的强调、愉悦和惊喜，而不是先搭模板再往空隙里填文案。尺寸跟随内容，而非模板：标题的尺度由文案本身决定。视觉系统服务于信息，网站是舞台，文案是演出。
参考现有网站时的忠实性 如果是在重设计一个线上网站，或“像”某个参考网站那样构建，需要实际查看该网站正在发生什么，而不是凭记忆近似。要移植每个区块，从上到下盘点并逐一保留；匹配网站驱动的行动，复现其机制而非仅复制文字；使用真实资产，如真实的集成/合作伙伴标志；并讲述视觉的真实故事。
构建方式 输出真实的生产级前端：若项目已有技术栈（如 Next.js / Tailwind / shadcn）则匹配；否则输出干净、自包含的 HTML/CSS。默认框架无关。不使用 Webflow 或 Framer。间距使用 rem，并用 clamp() 实现流式；生产环境不用固定 px。水平内边距基于百分比，区块内边距流式。
应用系统 从 .agents/design.md 拉取系统，不重新推导、不另行发明：
- 放置已锁定的标志，不重建。使用 logo-design 写入的规范文件，如 logo-lockup.svg、logo-icon.svg 及反色/单色变体。不自行设置字标、不选间距、不改色、不裁剪、不缩放至最小尺寸以下，并尊重其留白。若需要文件夹中没有的变体，应回到 logo-design。
- 按角色使用颜色：背景、文本（主/次）、行动/CTA、支持色。每种颜色五个层级，而非十个。
- CTA 颜色是一个刻意、始终如一的选择，且不是文本或图形颜色。选择一个读起来像“向前推进”的颜色（启发式上如绿色或蓝色），用于所有主要行动。它必须在色度上区别于承载标题、图标和装饰的颜色。只用于真正的 CTA，绝不用于标题或装饰性强调。给 CTA 差异化的形状，如胶囊或圆角，而非与卡片相同的方矩形。
- 按角色使用字体，追求对比而非竞争：展示、标题、正文各有明确职责。正文使用常规/书籍字重，标题行高 1.1–1.3，正文 1.5–1.6。次要文本比标题更柔和。
- 母题承载品牌，但在信息必须取胜处保持克制。在首屏中让母题平静下来，让信息和 CTA 主导；在后续区块中更有力地贯穿母题。
- 眉题（eyebrow）谨慎使用，避免每个区块都加。
- 深度、光线和表面过渡按系统意图处理，使用多层阴影堆叠、渐变背景过渡和恰当的明暗翻转。
逐段构建 把页面当作一个序列来处理，而不是孤立地做每个区块。为每个区块命名其唯一职责，并给承载它的元素独立通道和相应尺度。节奏是一套区块类型的词汇，而不是列数：轮换真正不同的区块类型，如非对称首屏、全出血人物/视频时刻、插画/对比节拍、超大格言、固定滚动叙事序列、彩色卡片、聚光物体揭示、轮播等。改变媒介（UI → 视频 → 插画 → 照片 → 卡片），而不仅是布局。用一条贯穿纹理和严格色彩纪律统一多样性，使用尺度对比，并在响亮节拍之间留白。每个文本区块都应与视觉平衡。合并区块，三个充实区块胜过五个单薄区块。CTA、标志和悬停状态是内容而非装饰。
动效 动效是系统的一部分，其性格源自品牌。从 .agents/design.md 读取动效性格和情感目标：活泼古怪的品牌适合弹性、慷慨、频繁的动效；严肃高端的品牌适合微妙、克制、稀疏的动效。按职责拆分：功能性/UI 动效在此构建，包括悬停、聚焦、按压反馈、CTA 状态、展开和菜单过渡、区块揭示，保持实用、快速、不打扰。表达性/叙事性动效交给 motion-design，包括编排的页面加载序列、固定滚动叙事节拍、标志性产品视觉行为、首屏时刻等。
此处应遵循的动效底线：使用命名的缓动集，ease-out 作为主力；UI 过渡在约 300ms 以内，悬停/按压在 100–200ms；按压反馈使用约 0.97 的轻微缩小；入场重叠并错开，而非排队；只动画 transform 和 opacity；揭示是分层的而非统一的；prefers-reduced-motion 不可妥协；复杂编排动效可使用 GSAP（现已完全免费，含所有插件），如 ScrollTrigger、SplitText、Flip。
工具与参考 在可用时优先使用 Relume MCP 生成站点地图、线框图和样式指南；不可用时使用 frontend-design 技能。web-design-guidelines 用于 UX/UI 和无障碍合规检查。Mobbin / Refero MCP 用于模式摄入。GSAP 用于真实动效。three.js / WebGL 用于品牌确实需要雄心勃勃的 3D 或交互深度时。
适用场景与限制 适用于品牌系统已确定、需要优化或轻度演进现有网站的场景。若品牌系统尚未定义或需要全面重塑，应先回到 creative-direction。若缺少文案，应先完成文案。该技能不定义品牌识别，不重建标志，不使用 Webflow 或 Framer，也不负责表达性动效的完整编排。