# 精密制造蓝图 — DESIGN.md > 适用：B2B 企业业务 / 工业制造 > 主题：精密蓝图 > 布局：证据优先的分栏网格 本文件是实现约束，不是营销文案。AI 在开始编码前必须先完成“素材替换清单”和“实现门禁”。 ## 1. 视觉意图 像一份经过设计的工程能力说明：准确、克制、层级清楚。通过细线、编号和局部暖色强调关键行动，不使用装饰性科技光效。 首页表达目标：用克制的工程蓝、清晰网格和可核验的能力证据建立采购信任。 - 首屏眉题：工业制造解决方案 - 首屏标题：把复杂制造能力，变成清晰的采购依据 - 首屏说明：从工艺、质量到交付，把决策所需的信息放在正确的位置。 - 行动层级：主按钮“查看制造能力”，次按钮“提交项目需求” ### 对标案例研究（只作方法参考） 官方研究页：[Protolabs — Online Manufacturing Services](https://www.protolabs.com/Services/)（核验日期：2026-09-12） 可迁移的排版与交互规律： - 首屏用一个清晰的制造价值命题承接即时询价，而不是同时推销所有能力。 - 按注塑、机加工、3D 打印、钣金等工艺建立稳定的能力分类。 - 把材料、质量、设计指南与行业应用放在买方评估路径内，而不是藏在页脚。 - 用“服务—材料—行业—资源”四条路径支持不同成熟度的采购任务。 不可复制边界：仅借鉴采购信息层级与任务路径；不得复用 Protolabs 名称、商标、报价系统界面、NASA 案例、工艺文案、图片、认证或交付数字。 实现时只迁移信息架构、视觉层级和交互原则。不得下载、热链、抓取或近似复刻参考站的品牌资产、文案、图片、视频、数据和标志性视觉表达。 ## 2. Design Tokens ```css :root { --ds-color-background: #F4F7F8; --ds-color-surface: #FFFFFF; --ds-color-accent: #1261A0; --ds-color-accent-secondary: #E36F2D; --ds-color-text: #10212B; --ds-color-muted: #63737D; --ds-font-heading: ui-sans-serif, system-ui, sans-serif; --ds-font-body: ui-sans-serif, system-ui, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --ds-radius: 4px; --ds-dark-mode-supported: 0; /* Template layout values plus shared touch-target and acceptance breakpoints. */ --ds-content-max: 1280px; --ds-page-gutter: 24px; --ds-hero-height: clamp(560px, 76vh, 760px); --ds-touch-target: 44px; --ds-breakpoint-phone: 360px; --ds-breakpoint-tablet: 768px; --ds-breakpoint-desktop: 1440px; /* Derived 50–900 ramps. These are generated values, not reference-brand tokens. */ --ds-color-brand-900: #07253D; --ds-color-brand-900-ink: #FFFFFF; --ds-color-brand-800: #0A3456; --ds-color-brand-800-ink: #FFFFFF; --ds-color-brand-700: #0D436F; --ds-color-brand-700-ink: #FFFFFF; --ds-color-brand-600: #0F5287; --ds-color-brand-600-ink: #FFFFFF; --ds-color-brand-500: #1261A0; --ds-color-brand-500-ink: #FFFFFF; --ds-color-brand-400: #3C7DB1; --ds-color-brand-400-ink: #000000; --ds-color-brand-300: #6699C2; --ds-color-brand-300-ink: #000000; --ds-color-brand-200: #8FB4D2; --ds-color-brand-200-ink: #000000; --ds-color-brand-100: #B9D0E3; --ds-color-brand-100-ink: #000000; --ds-color-brand-50: #E3ECF4; --ds-color-brand-50-ink: #000000; --ds-color-background-900: #363637; --ds-color-background-900-ink: #FFFFFF; --ds-color-background-800: #666667; --ds-color-background-800-ink: #FFFFFF; --ds-color-background-700: #959798; --ds-color-background-700-ink: #000000; --ds-color-background-600: #C5C7C8; --ds-color-background-600-ink: #000000; --ds-color-background-500: #F4F7F8; --ds-color-background-500-ink: #000000; --ds-color-background-400: #F6F9F9; --ds-color-background-400-ink: #000000; --ds-color-background-300: #F8FAFB; --ds-color-background-300-ink: #000000; --ds-color-background-200: #FBFCFC; --ds-color-background-200-ink: #000000; --ds-color-background-100: #FDFDFE; --ds-color-background-100-ink: #000000; --ds-color-background-50: #FFFFFF; --ds-color-background-50-ink: #000000; --ds-color-text-900: #10212B; --ds-color-text-900-ink: #FFFFFF; --ds-color-text-800: #253640; --ds-color-text-800-ink: #FFFFFF; --ds-color-text-700: #3A4A54; --ds-color-text-700-ink: #FFFFFF; --ds-color-text-600: #4E5F69; --ds-color-text-600-ink: #FFFFFF; --ds-color-text-500: #63737D; --ds-color-text-500-ink: #FFFFFF; --ds-color-text-400: #7D8A93; --ds-color-text-400-ink: #000000; --ds-color-text-300: #96A1A8; --ds-color-text-300-ink: #000000; --ds-color-text-200: #B0B9BE; --ds-color-text-200-ink: #000000; --ds-color-text-100: #C9D0D3; --ds-color-text-100-ink: #000000; --ds-color-text-50: #E3E7E9; --ds-color-text-50-ink: #000000; --ds-color-icon-900: #1F303A; --ds-color-icon-900-ink: #FFFFFF; --ds-color-icon-800: #293A44; --ds-color-icon-800-ink: #FFFFFF; --ds-color-icon-700: #34454F; --ds-color-icon-700-ink: #FFFFFF; --ds-color-icon-600: #3E4F59; --ds-color-icon-600-ink: #FFFFFF; --ds-color-icon-500: #485963; --ds-color-icon-500-ink: #FFFFFF; --ds-color-icon-400: #66747D; --ds-color-icon-400-ink: #FFFFFF; --ds-color-icon-300: #849097; --ds-color-icon-300-ink: #000000; --ds-color-icon-200: #A1ABB0; --ds-color-icon-200-ink: #000000; --ds-color-icon-100: #BFC7CA; --ds-color-icon-100-ink: #000000; --ds-color-icon-50: #DDE2E4; --ds-color-icon-50-ink: #000000; /* Semantic, functional, inverse, and chart roles. */ --ds-color-background: #F4F7F8; --ds-color-background-ink: #000000; --ds-color-surface: #FFFFFF; --ds-color-surface-ink: #000000; --ds-color-foreground: #10212B; --ds-color-foreground-ink: #FFFFFF; --ds-color-muted-foreground: #63737D; --ds-color-muted-foreground-ink: #FFFFFF; --ds-color-surface-foreground: #10212B; --ds-color-surface-foreground-ink: #FFFFFF; --ds-color-surface-muted-foreground: #63737D; --ds-color-surface-muted-foreground-ink: #FFFFFF; --ds-color-link: #1261A0; --ds-color-link-ink: #FFFFFF; --ds-color-surface-link: #1261A0; --ds-color-surface-link-ink: #FFFFFF; --ds-color-white-foreground: #10212B; --ds-color-white-foreground-ink: #FFFFFF; --ds-color-white-link: #1261A0; --ds-color-white-link-ink: #FFFFFF; --ds-color-primary: #1261A0; --ds-color-primary-ink: #FFFFFF; --ds-color-secondary: #E36F2D; --ds-color-secondary-ink: #000000; --ds-color-border: #63737D; --ds-color-border-ink: #FFFFFF; --ds-color-input: #63737D; --ds-color-input-ink: #FFFFFF; --ds-color-ring: #1261A0; --ds-color-ring-ink: #FFFFFF; --ds-color-success: #18794E; --ds-color-success-ink: #FFFFFF; --ds-color-success-surface: #DAE8E4; --ds-color-success-surface-ink: #000000; --ds-color-error: #B42318; --ds-color-error-ink: #FFFFFF; --ds-color-error-surface: #ECDEDD; --ds-color-error-surface-ink: #000000; --ds-color-inverse-background: #363637; --ds-color-inverse-background-ink: #FFFFFF; --ds-color-inverse-surface: #666667; --ds-color-inverse-surface-ink: #FFFFFF; --ds-color-inverse-foreground: #FFFFFF; --ds-color-inverse-foreground-ink: #000000; --ds-color-inverse-primary: #3C7DB1; --ds-color-inverse-primary-ink: #000000; --ds-color-chart-1: #1261A0; --ds-color-chart-1-ink: #FFFFFF; --ds-color-chart-2: #E36F2D; --ds-color-chart-2-ink: #000000; --ds-color-chart-3: #18794E; --ds-color-chart-3-ink: #FFFFFF; --ds-color-chart-4: #B42318; --ds-color-chart-4-ink: #FFFFFF; --ds-color-chart-5: #7B6867; --ds-color-chart-5-ink: #FFFFFF; /* Shared typography contract used by the visual spec and this file. */ --ds-type-display-1: 80px; --ds-type-display-1-weight: 600; --ds-type-display-1-line-height: 1.05; --ds-type-display-1-tracking: -0.015em; --ds-type-display-2: 56px; --ds-type-display-2-weight: 600; --ds-type-display-2-line-height: 1.07; --ds-type-display-2-tracking: -0.005em; --ds-type-display-3: 40px; --ds-type-display-3-weight: 600; --ds-type-display-3-line-height: 1.1; --ds-type-display-3-tracking: 0em; --ds-type-headline: 28px; --ds-type-headline-weight: 600; --ds-type-headline-line-height: 1.14; --ds-type-headline-tracking: 0.007em; --ds-type-copy: 21px; --ds-type-copy-weight: 400; --ds-type-copy-line-height: 1.19; --ds-type-copy-tracking: 0.011em; --ds-type-body: 17px; --ds-type-body-weight: 400; --ds-type-body-line-height: 1.47059; --ds-type-body-tracking: -0.022em; --ds-type-supporting: 14px; --ds-type-supporting-weight: 400; --ds-type-supporting-line-height: 1.43; --ds-type-supporting-tracking: -0.016em; --ds-type-footer: 12px; --ds-type-footer-weight: 400; --ds-type-footer-line-height: 1.33; --ds-type-footer-tracking: -0.01em; --ds-type-caption: 12px; --ds-type-caption-weight: 600; --ds-type-caption-line-height: 1.2; --ds-type-caption-tracking: 0.12em; --ds-type-label: 12px; --ds-type-label-weight: 700; --ds-type-label-line-height: 1.2; --ds-type-label-tracking: 0.08em; --ds-font-weight-400: 400; --ds-font-weight-500: 500; --ds-font-weight-600: 600; --ds-font-weight-700: 700; /* Shared spacing scale. */ --ds-space-4: 4px; --ds-space-8: 8px; --ds-space-12: 12px; --ds-space-16: 16px; --ds-space-24: 24px; --ds-space-32: 32px; --ds-space-48: 48px; --ds-space-64: 64px; --ds-space-96: 96px; --ds-space-128: 128px; /* Template radius plus derived/shared radius roles. */ --ds-radius-none: 0px; --ds-radius-sm: 2px; --ds-radius-md: 4px; --ds-radius-lg: 6px; --ds-radius-xl: 8px; --ds-radius-full: 999px; /* Shared elevation contract. */ --ds-shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 4%); --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 4%); --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%), 0 1px 3px -1px rgb(0 0 0 / 5%); --ds-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 5%); --ds-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 5%); --ds-shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 8%), 0 4px 8px -4px rgb(0 0 0 / 5%); --ds-shadow-xl: 0 16px 40px -10px rgb(0 0 0 / 10%), 0 8px 16px -8px rgb(0 0 0 / 6%); --ds-shadow-2xl: 0 24px 64px -12px rgb(0 0 0 / 12%); /* Borders and focus treatment derived from the template palette. */ --ds-border-structural: 1px solid #63737D; --ds-border-input: 1px solid #63737D; --ds-focus-ring: 0 0 0 2px #1261A0; /* Shared motion contract. */ --ds-motion-fast: 160ms; --ds-motion-standard: 240ms; --ds-motion-narrative: 400ms; --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Shared icon sizes and strokes. */ --ds-icon-size-16: 16px; --ds-icon-size-20: 20px; --ds-icon-size-24: 24px; --ds-icon-size-32: 32px; --ds-icon-stroke-regular: 1.5px; --ds-icon-stroke-strong: 2px; } /* Responsive type values come from the same display spec as the visual guide. */ @media (max-width: 768px) { :root { --ds-type-display-1: 56px; --ds-type-display-2: 40px; --ds-type-display-3: 32px; --ds-type-headline: 28px; --ds-type-copy: 19px; --ds-type-body: 17px; --ds-type-supporting: 14px; --ds-type-footer: 12px; --ds-type-caption: 12px; --ds-type-label: 12px; } } @media (max-width: 480px) { :root { --ds-type-display-1: 44px; --ds-type-display-2: 32px; --ds-type-display-3: 26px; --ds-type-headline: 24px; --ds-type-copy: 17px; --ds-type-body: 16px; --ds-type-supporting: 14px; --ds-type-footer: 12px; --ds-type-caption: 12px; --ds-type-label: 12px; } } ``` 来源规则：基础色、字体族、容器、沟槽、主圆角和首屏高度属于“模板原始值”；50–900 色阶、语义映射、围绕主圆角生成的 sm/lg/xl、边框与焦点环属于“推导值”；radius-none/full、字号、字重、间距、阴影、触控尺寸、断点、图标与动效基础值属于本组件库的“共享规范”，动效 recipe 是结合模板布局推导出的实现约束。这些值都不是对标品牌的官方设计令牌。 语义规则：背景色只用于页面底层，surface 用于内容面板；原始 accent 保留为主行动和当前状态的填充色，accent-secondary 只作少量辅助强调。文字和链接必须使用下表中与实际底色配对的安全前景角色，不得直接把 accent 当正文色。每个 50–900 色阶也提供配套的 `-ink` 前景色；在对应色块上放置文字或图标时必须成对使用。 | 前景角色 | 色值 | 使用底色 | 对比度 | 用途 | |---|---|---|---:|---| | `foreground` | `#10212B` | `background` | 15.31:1 | 页面背景上的可访问正文 | | `muted-foreground` | `#63737D` | `background` | 4.56:1 | 页面背景上的可访问辅助文字 | | `surface-foreground` | `#10212B` | `surface` | 16.48:1 | 模板 surface 上的可访问正文 | | `surface-muted-foreground` | `#63737D` | `surface` | 4.91:1 | 模板 surface 上的可访问辅助文字 | | `link` | `#1261A0` | `background` | 6.01:1 | 页面背景上的可访问链接 | | `surface-link` | `#1261A0` | `surface` | 6.48:1 | 模板 surface 上的可访问链接 | | `white-foreground` | `#10212B` | `white` | 16.48:1 | 白色 surface 上的可访问正文 | | `white-link` | `#1261A0` | `white` | 6.48:1 | 白色 surface 上的可访问链接 | | `inverse-foreground` | `#FFFFFF` | `inverse-background` | 12.07:1 | 反相背景上的文字 | 深色模式：`supported = false`。本模板不提供完整深色模式；inverse 令牌仅用于局部反相章节，不能替代整站深色主题。 ## 3. 字体与文字层级 - 标题字体：`ui-sans-serif, system-ui, sans-serif`；正文字体：`ui-sans-serif, system-ui, sans-serif`。 - 下表是唯一精确字号契约；Desktop 是根值，CSS 在 Tablet 和 Mobile 媒体规则中覆盖相同变量。 - Caption 与 Label 用于产品界面时在所有视口均不得低于 12px。 - 每行建议不超过 45–75 个中文字符；不用图片承载必要文字，价格、参数、合规和行动文案必须是可访问文本。 | Token | Desktop | Tablet | Mobile | 字重 | 行高 | 字距 | 用途 | |---|---:|---:|---:|---:|---:|---:|---| | display-1 | 80px | 56px | 44px | 600 | 1.05 | -0.015em | 首屏主标题 | | display-2 | 56px | 40px | 32px | 600 | 1.07 | -0.005em | 重点章节标题 | | display-3 | 40px | 32px | 26px | 600 | 1.1 | 0em | 章节标题 | | headline | 28px | 28px | 24px | 600 | 1.14 | 0.007em | 卡片组或功能标题 | | copy | 21px | 19px | 17px | 400 | 1.19 | 0.011em | 导语或引导说明 | | body | 17px | 17px | 16px | 400 | 1.47059 | -0.022em | 主要阅读正文 | | supporting | 14px | 14px | 14px | 400 | 1.43 | -0.016em | 辅助说明 | | footer | 12px | 12px | 12px | 400 | 1.33 | -0.01em | 页脚与紧凑元信息 | | caption | 12px | 12px | 12px | 600 | 1.2 | 0.12em | 界面说明；不得低于 12px | | label | 12px | 12px | 12px | 700 | 1.2 | 0.08em | 控件或令牌标签；不得低于 12px | | 字重 Token | 值 | 用途 | |---|---:|---| | `--ds-font-weight-400` | 400 | 正文与长篇阅读 | | `--ds-font-weight-500` | 500 | 控件与紧凑强调 | | `--ds-font-weight-600` | 600 | 标题与选中状态 | | `--ds-font-weight-700` | 700 | 短标签与强强调 | ### 图标规范 尺寸：`--ds-icon-size-16` = 16px；`--ds-icon-size-20` = 20px；`--ds-icon-size-24` = 24px；`--ds-icon-size-32` = 32px 描边：`--ds-icon-stroke-regular` = 1.5px；`--ds-icon-stroke-strong` = 2px | 状态 | 前景角色 | 用途 | |---|---|---| | default | `foreground` | 默认信息图标 | | muted | `muted-foreground` | 次级非交互图标 | | interactive | `link` | 带可见焦点态的交互图标 | | inverse | `inverse-foreground` | 局部反相 surface 上的图标 | ## 4. 布局与响应式 基础容器最大宽度为 1280px，桌面沟槽为 24px，主要圆角为 4px，首屏高度参考 clamp(560px, 76vh, 760px)。所有可点击/可触控目标最小尺寸为 `44px`。 | 视口 | 验收宽度 | 响应上限 | 列数 | 沟槽 | 用途 | |---|---:|---:|---:|---:|---| | phone | `360px` | `480px` | 1 | `16px` | 手机验收视口 | | tablet | `768px` | `768px` | 6 | `20px` | 平板验收视口 | | desktop | `1440px` | — | 12 | `var(--ds-page-gutter)` | 桌面验收视口 | ### 360px（手机） - 使用 1 列布局，页面左右安全边距 16px；导航折叠但保留主行动。 - 首屏文字先于媒体，按钮纵向排列并至少高 44px。 - 媒体按原始比例裁切，不把桌面端绝对定位直接缩小。 - 卡片、页签、筛选和轮播均支持触屏；不得出现横向页面溢出。 ### 768px（平板） - 使用 6 列网格、20px 沟槽；首屏可采用 5:7 或 1:1 分栏。 - 两张卡片并列；主要导航可保持精简横排，次级内容允许折叠。 - 保留与桌面相同的信息顺序和行动层级，不隐藏关键规格。 ### 1440px（桌面） - 使用 12 列网格；内容居中且不超过 1280px。 - 首屏文本通常占 4–5 列，媒体占 7–8 列；大图可以出血但正文不能超宽。 - 章节间距 96–144px；首屏内只保留一个主行动。 - hover 只能增强已有信息，不能成为访问内容的唯一方式。 ## 5. 核心组件 1. **全局导航**：品牌位、3–5 个主栏目、一个明确主行动；移动端具备关闭、Esc 和焦点回收。 2. **首屏 Hero**：眉题、单一 H1、简短说明、主次行动和一项主要媒体。 3. **核心工艺**：使用可扫描的卡片或索引，每项只表达一个选择依据。 4. **质量体系**：优先提供可核验信息；比较项使用统一单位和稳定列宽。 5. **应用行业**：补足决策信息，并提供下载、查看或下一步行动。 6. **收尾行动与页脚**：重复核心承诺和联系路径，不新增未经解释的营销口号。 ## 6. 交互与动效 本主题的动效特征：滚动进入采用 180–240ms 的淡入与 8px 位移；能力卡悬停只提升边框对比度；关键数字仅播放一次递增。 以下 recipe 是可执行契约；实现不得只保留文字描述： | Recipe | 用途 | Trigger | Property | From | To | Duration | Easing | Iterations | Reduced motion | Constraint | |---|---|---|---|---|---|---:|---|---:|---|---| | `translate-up` | 显现或抬升有边界的内容块 | `viewport-enter` | `transform, opacity` | `transform: translateY(8px); opacity: 0` | `transform: translateY(0); opacity: 1` | `240ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `remove-transform` | `content-remains-in-document-flow` | | `border-contrast` | 在悬停与键盘聚焦时提升卡片边框对比度 | `hover-or-focus-visible` | `border-color` | `border-color: var(--ds-color-border)` | `border-color: var(--ds-color-primary)` | `160ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `keep-non-motion-feedback` | `equivalent-focus-visible-feedback` | | `count-up` | 关键数字首次进入视口时仅递增一次 | `first-viewport-enter` | `number-value` | `value: 0` | `value: target` | `400ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `show-final-value` | `run-once; preserve-accessible-name` | - hover、focus-visible 和 active 状态必须分别定义；触屏不能依赖 hover。 - 普通反馈使用 160ms，内容切换使用 240ms；只有叙事性场景才可超过 400ms。 - 动画只改变 `transform` 和 `opacity` 时优先，避免触发布局抖动。 - 自动播放内容必须可暂停；视频默认静音并提供封面和失败回退。 - 路由、提交、下载和购买等操作必须给出明确进行中、成功和失败状态。 ### Reduced motion 在 `prefers-reduced-motion: reduce` 下取消视差、自动轮播、平移、缩放和计数动画；内容直接呈现，保留颜色、边框或下划线等非运动反馈。功能不能因关闭动画而缺失。 ## 7. 素材替换清单 | 编号 | 素材或配置 | 必需/可选 | 建议规格 | 用途 | 缺失时处理 | |---|---|---|---|---|---| | A01 | 品牌名称与 Logo | 必需 | SVG 优先，另备深/浅底版本 | 导航与页脚 | 使用明确标记的文字占位，不仿制参考品牌 | | A02 | 首屏标题、说明与眉题 | 必需 | H1 12–28 字，说明 30–80 字 | 首屏信息层级 | 使用行业中性占位并标注待替换 | | A03 | 首屏媒体 | 必需 | 1 张 16:9 或 3:2 的真实厂区/生产线横图，建议 2400px 以上，主体位于右侧 60% 区域。 | 建立主题与产品场景 | 使用本地中性渐变块，不使用第三方热链 | | A04 | 主次行动文案和 URL | 必需 | 每项 2–10 字；提供真实相对或绝对 URL | 转化路径 | 使用不可提交的占位链接并标注 | | A05 | 核心工艺、质量体系、应用行业内容 | 必需 | 每组 3–6 项；提供标题、说明、图片/图标和目标链接 | 三个核心内容章节 | 缺失章节保持结构，不编造指标或资质 | | A06 | 证明材料 | 可选 | 客户授权 Logo、证书、测试报告或真实评价 | 建立信任 | 整段隐藏，不制作虚假证明 | | A07 | 联系方式、政策与法律文本 | 必需 | 邮箱/电话/表单目标、隐私和条款 URL | 表单与页脚 | 禁用提交并标注阻断原因 | | A08 | 字体文件及媒体授权信息 | 可选 | WOFF2；素材来源、授权范围、替代文本 | 性能、授权和无障碍 | 使用系统字体；未确认媒体不上线 | ## 8. Do / Don’t ### Do - 把品牌、文案、媒体、数据和链接暴露为可替换配置或 props。 - 保持首屏层级、网格比例、焦点顺序和主行动位置稳定。 - 为图片提供尺寸、alt 和加载策略，为视频提供 poster 与 fallback。 - 用真实产品、场景和证据替换所有中性占位。 ### Don’t - 不要保留参考网站品牌、作者、热度、虚构评价、虚构指标或第三方热链。 - 不要为了适配素材而重新设计布局或用静态效果替代交互。 - 不要一次挂载多个自动播放视频或持续运行的装饰动画。 - 不要修改无关页面、路由、全局样式或项目配置。 ## 9. AI 实现门禁 ### 阶段一：只核对素材 1. 检查当前项目和对话中已经提供的 A01–A08。 2. 只输出缺失项表格，标明“已提供 / 必需缺失 / 可选缺失 / 已批准占位 / 已跳过”。 3. 一次性索取缺失素材，然后停止；不得安装依赖或修改文件。 4. 所有必需项必须已提供或获准占位，所有可选项必须已提供或明确跳过，并收到用户“开始实现”后才能继续。 ### 阶段二：确认后实现 1. 先检查项目框架、样式体系和依赖，优先复用已有能力。 2. 以本文件的布局、Token、交互与动效为约束；客户素材只替换内容层。 3. 在 360px、768px、1440px 验证无横向溢出、键盘顺序、触屏、focus-visible、资源失败和 reduced-motion。 4. 运行项目现有类型检查、测试和生产构建，报告改动文件、素材映射、适配差异和未解决阻断。