品牌统一输出：从 Spec 到多页面系统

背景：同一个品牌规范（AI 心理健康产品 MindAI），需要输出官网首页 + 功能页 + 博客页 + 关于页 四个不同的页面。传统做法是设计师一个一个画，每页都要重新对齐品牌色、间距、字体——四页做完总会有某个细节对不上。huashu-design 用品牌资产协议 + 页面模板系统，一次性输出四个页面，20 分钟。

多页面设计的最大痛点：一致性

做过多页面的设计师都经历过这种事：首页用了 #7B68EE，功能页不小心用了 #6B5EDD，博客页标题用了 18px，关于页标题用了 20px——每个页面单独看都不错，放到一起一看就知道不是同一套系统。

品牌一致性不是态度问题，是系统问题。 没有一个共享的设计系统，就不可能靠「记住」来保持一致。

第一步：品牌资产协议（一次性）

开工前，AI 先按品牌资产协议收集/确认了 MindAI 的品牌规范：

# MindAI · Brand Spec

## 色板
- Primary: #7B68EE（温暖薰衣草）
- Light: #FAF8FF（柔白背景）
- Text: #2D2D2D（深灰正文）
- Muted: #8A7F75（辅助文字）

## 字体
- Display: Cormorant（衬线，标题）
- Body: Inter（无衬线，正文）

## 间距
- 网格: 8px 基准
- 区块间距: 32px

## Logo
- assets/mindai/logo.svg
- 透明背景，使用暖薰衣草色

这个 brand-spec.md 是接下来所有页面的设计依据。所有页面共享同一个 spec，从根本上避免偏差。

第二步：页面模板系统

有了品牌 spec，AI 用一个模板引擎一次性生成 4 个页面：

模板变量:
  - 品牌色: #7B68EE, #FAF8FF
  - 字体: Cormorant, Inter
  - 间距: 8px 网格
  - 导航: 统一组件

页面:
  1. 首页 (index.html)    — Hero + 功能卡片 + CTA
  2. 功能页 (features)    — 三列功能详情
  3. 博客页 (blog)        — 文章列表 + 侧边栏
  4. 关于页 (about)       — 品牌故事 + 团队

每个页面共享导航、页脚、按钮样式、配色方案。差异只在于 layout 和内容。

第三步：4 个页面的设计要点

首页（Hero + 功能卡片）

首页的核心是引导用户继续浏览。Hero 区展示产品价值主张，下方 3 张功能卡片引导到功能页。CTA 按钮是品牌色 solid。

功能页（Feature Details）

三列布局，每列 icon + 标题 + 详细描述 + 示意截图。间隔 32px（4 × 8px 网格），整齐但不死板。

与首页共享：导航、按钮、配色。差异：内容区从 Hero 变为三列详情。

博客页（Blog List）

文章列表 + 右侧热门标签。文章卡片用白底 + 阴影，标签用灰色 pill。

与首页共享：导航、页脚、字号系统。差异：多了侧边栏布局，少了 Hero 区。

关于页（About）

品牌故事 + 团队介绍 + 时间线。全宽排版，少量留白，阅读体验优先。

与首页共享：字体、色值、间距系统。差异：叙事驱动的排版，非组件驱动。

第四步：一致性的检查清单

所有页面生成后，AI 自动跑了一致性检查：

6 × 4 = 24 项检查，全部通过。 这是人肉做 4 页很难达到的精度。

第五步：从 4 页到 40 页

页面模板系统的真正威力是规模化：

• 4 页：20 分钟（一次性生成）
• 40 页：约 40 分钟（新增页面只需填充内容，模板和 spec 不变）

边际成本递减。第一页最贵（因为要建 spec + 模板），后面的页面几乎零设计成本。

这就是品牌资产协议 + 页面模板的组合威力：不是自动化设计，是系统化设计。

耗时复盘

核心心得

品牌统一输出的本质：不是把每个页面做得一样，而是让每个页面都遵循同一套规则。

品牌 spec 是规则，模板系统是执行器。规则越清晰，执行越一致。当品牌规范从设计师的「我记得」变成文件的「已定义」，多页面品牌输出的质量就不会因页面数量增加而下降。

下次你要做一个多页面品牌站点的时候，别从首页开始画——先从 brand-spec.md 开始写。写完了，页面自然会有一致性。

截图清单

1. ✅ 品牌统一输出（4 页面并排 + 共享品牌 spec + 一致性检查）— 已插入上文