预览尺寸

精密制造蓝图

用克制的工程蓝、清晰网格和可核验的能力证据建立采购信任。

B2B 工业制造精密蓝图

DESIGN-industrial-precision-grid.md 下载 DESIGN.md

# 精密制造蓝图 — 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. 运行项目现有类型检查、测试和生产构建，报告改动文件、素材映射、适配差异和未解决阻断。

当前模板规范

完整设计系统

页面展示与 Design.md 使用同一份数据。对标案例只用于结构研究，下列内容不是对标品牌的官方设计令牌。

模板原始值推导值共享规范

推导色阶 · 根据当前模板基础色生成

brand-900 #07253D
brand-800 #0A3456
brand-700 #0D436F
brand-600 #0F5287
brand-500 #1261A0
brand-400 #3C7DB1
brand-300 #6699C2
brand-200 #8FB4D2
brand-100 #B9D0E3
brand-50 #E3ECF4

background-900 #363637
background-800 #666667
background-700 #959798
background-600 #C5C7C8
background-500 #F4F7F8
background-400 #F6F9F9
background-300 #F8FAFB
background-200 #FBFCFC
background-100 #FDFDFE
background-50 #FFFFFF

text-900 #10212B
text-800 #253640
text-700 #3A4A54
text-600 #4E5F69
text-500 #63737D
text-400 #7D8A93
text-300 #96A1A8
text-200 #B0B9BE
text-100 #C9D0D3
text-50 #E3E7E9

icon-900 #1F303A
icon-800 #293A44
icon-700 #34454F
icon-600 #3E4F59
icon-500 #485963
icon-400 #66747D
icon-300 #849097
icon-200 #A1ABB0
icon-100 #BFC7CA
icon-50 #DDE2E4

语义角色

模板原始值 background #F4F7F8 页面底层
模板原始值 surface #FFFFFF 卡片与面板
推导值 foreground #10212B 页面背景上的可访问正文
推导值 muted-foreground #63737D 页面背景上的可访问辅助文字
推导值 surface-foreground #10212B 模板 surface 上的可访问正文
推导值 surface-muted-foreground #63737D 模板 surface 上的可访问辅助文字
推导值 link #1261A0 页面背景上的可访问链接
推导值 surface-link #1261A0 模板 surface 上的可访问链接
推导值 white-foreground #10212B 白色 surface 上的可访问正文
推导值 white-link #1261A0 白色 surface 上的可访问链接
模板原始值 primary #1261A0 主行动与选中状态的填充色
模板原始值 secondary #E36F2D 少量使用的次级填充色
推导值 border #63737D 结构边界
推导值 input #63737D 表单控件边界
推导值 ring #1261A0 键盘焦点指示

功能与反色

共享规范 success #18794E 成功状态
推导值 success-surface #DAE8E4 成功消息底色
共享规范 error #B42318 错误与破坏性状态
推导值 error-surface #ECDEDD 错误消息底色
推导值 inverse-background #363637 局部反相章节
推导值 inverse-surface #666667 局部反相面板
推导值 inverse-foreground #FFFFFF 反相背景上的文字
推导值 inverse-primary #3C7DB1 反相 surface 上的行动填充色

图表色

模板原始值 chart-1 #1261A0 主要数据系列
模板原始值 chart-2 #E36F2D 次要数据系列
共享规范 chart-3 #18794E 正向数据系列
共享规范 chart-4 #B42318 负向数据系列
推导值 chart-5 #7B6867 辅助数据系列

字体族

模板原始值 heading

Aa 字

ui-sans-serif, system-ui, sans-serif

模板原始值 body

Aa 字

ui-sans-serif, system-ui, sans-serif

共享规范 mono

Aa 字

ui-monospace, SFMono-Regular, Menlo, monospace

字号层级

精密制造

display-1共享规范

桌面80px 平板56px 手机44px
600 / 1.05 / -0.015em --ds-type-display-1
为规模而建

display-2共享规范

桌面56px 平板40px 手机32px
600 / 1.07 / -0.005em --ds-type-display-2
清晰表达能力

display-3共享规范

桌面40px 平板32px 手机26px
600 / 1.1 / 0em --ds-type-display-3
可靠的生产证据

headline共享规范

桌面28px 平板28px 手机24px
600 / 1.14 / 0.007em --ds-type-headline
从设计到交付，每一步都清晰可核验。

copy共享规范

桌面21px 平板19px 手机17px
400 / 1.19 / 0.011em --ds-type-copy
从工艺、质量到交付，把决策所需的信息放在正确的位置。

body共享规范

桌面17px 平板17px 手机16px
400 / 1.47059 / -0.022em --ds-type-body
工业制造解决方案

supporting共享规范

桌面14px 平板14px 手机14px
400 / 1.43 / -0.016em --ds-type-supporting
参数、日期与辅助说明

footer共享规范

桌面12px 平板12px 手机12px
400 / 1.33 / -0.01em --ds-type-footer
设计系统

caption共享规范

桌面12px 平板12px 手机12px
600 / 1.2 / 0.12em --ds-type-caption
TOKEN LABEL

label共享规范

桌面12px 平板12px 手机12px
700 / 1.2 / 0.08em --ds-type-label

字重

共享规范

400正文与长篇阅读

共享规范

500控件与紧凑强调

共享规范

600标题与选中状态

共享规范

700短标签与强强调

space-4共享规范
4px
space-8共享规范
8px
space-12共享规范
12px
space-16共享规范
16px
space-24共享规范
24px
space-32共享规范
32px
space-48共享规范
48px
space-64共享规范
64px
space-96共享规范
96px
space-128共享规范
128px

圆角

共享规范 radius-none 0px

推导值 radius-sm 2px

模板原始值 radius-md 4px 当前

推导值 radius-lg 6px

推导值 radius-xl 8px

共享规范 radius-full 999px

边框与焦点

推导值 structural 1px solid #63737D

推导值 input 1px solid #63737D

推导值 focus-ring 0 0 0 2px #1261A0

阴影

共享规范 shadow-2xs 0 1px 2px -1px rgb(0 0 0 / 4%)

共享规范 shadow-xs 0 1px 2px 0 rgb(0 0 0 / 4%)

共享规范 shadow-sm 0 1px 2px rgb(0 0 0 / 5%), 0 1px 3px -1px rgb(0 0 0 / 5%)

共享规范 shadow 0 2px 4px -1px rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 5%)

共享规范 shadow-md 0 4px 8px -2px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 5%)

共享规范 shadow-lg 0 8px 24px -8px rgb(0 0 0 / 8%), 0 4px 8px -4px rgb(0 0 0 / 5%)

共享规范 shadow-xl 0 16px 40px -10px rgb(0 0 0 / 10%), 0 8px 16px -8px rgb(0 0 0 / 6%)

共享规范 shadow-2xl 0 24px 64px -12px rgb(0 0 0 / 12%)

content-max: 1280px
page-gutter: 24px
hero-height: clamp(560px, 76vh, 760px)
touch-target: 44px

共享规范

phone360px

1 列 · 16px · 手机验收视口

共享规范

tablet768px

6 列 · 20px · 平板验收视口

共享规范

desktop1440px

12 列 · var(--ds-page-gutter) · 桌面验收视口

模板原始值媒体规范

1 张 16:9 或 3:2 的真实厂区/生产线横图，建议 2400px 以上，主体位于右侧 60% 区域。

共享规范

图标规范

当前模板未附带可验证的真实图标资产，因此不伪造图标样例；尺寸和线宽规则仅供接入真实图标库时使用。

icon-1616px共享规范
icon-2020px共享规范
icon-2424px共享规范
icon-3232px共享规范
icon-stroke-regular1.5px共享规范
icon-stroke-strong2px共享规范

default: 默认信息图标
muted: 次级非交互图标
interactive: 带可见焦点态的交互图标
inverse: 局部反相 surface 上的图标

时长令牌

共享规范fast160ms悬停、聚焦与按压反馈
共享规范standard240ms内容与状态切换
共享规范narrative400ms仅播放一次的叙事显现

交互配方

translate-up推导值

自动预览 · translate-up

显现或抬升有边界的内容块

触发: 进入视口
属性: transform, opacity
起始: transform: translateY(8px); opacity: 0
结束: transform: translateY(0); opacity: 1
时长: 240ms
缓动: cubic-bezier(0.2, 0.8, 0.2, 1)
次数: 1
减少动效: 移除位移变换
约束: content-remains-in-document-flow

border-contrast推导值

在悬停与键盘聚焦时提升卡片边框对比度

触发: 悬停或键盘聚焦
属性: 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
减少动效: 保留非动效反馈
约束: equivalent-focus-visible-feedback

count-up推导值

自动预览 · count-up

关键数字首次进入视口时仅递增一次

触发: 首次进入视口
属性: number-value
起始: value: 0
结束: value: target
时长: 400ms
缓动: cubic-bezier(0.2, 0.8, 0.2, 1)
次数: 1
减少动效: 显示最终数值
约束: run-once; preserve-accessible-name

模板原始值本模板动效特征

滚动进入采用 180–240ms 的淡入与 8px 位移；能力卡悬停只提升边框对比度；关键数字仅播放一次递增。

cubic-bezier(0.2, 0.8, 0.2, 1)

BUTTON · 状态矩阵

输入框 · 状态矩阵

默认焦点成功错误只读禁用

NAVIGATION

CARD

工业制造解决方案

可验证制造能力

将工艺、材料、质量和交付证据放在同一决策路径中。

以上所有可见值均同步写入当前 Design.md。

DESIGN-industrial-precision-grid.md

可迁移规律

首屏用一个清晰的制造价值命题承接即时询价，而不是同时推销所有能力。
按注塑、机加工、3D 打印、钣金等工艺建立稳定的能力分类。
把材料、质量、设计指南与行业应用放在买方评估路径内，而不是藏在页脚。
用“服务—材料—行业—资源”四条路径支持不同成熟度的采购任务。

不可复制边界

仅借鉴采购信息层级与任务路径；不得复用 Protolabs 名称、商标、报价系统界面、NASA 案例、工艺文案、图片、认证或交付数字。

核验日期 2026-09-12

把复杂制造能力，变成清晰的采购依据

精密制造蓝图

Protolabs — Online Manufacturing Services

完整设计系统

颜色

brand

background

text

icon

语义角色

功能与反色

图表色

字体与字号

字体族

字号层级

字重

间距

圆角、边框与阴影

圆角

边框与焦点

阴影

布局与断点

交互与动效

时长令牌

交互配方

组件应用

可验证制造能力

可迁移规律

不可复制边界

Cookie 偏好