当 Agent 开始生产网站：从分类法到设计决策链

过去，"网站怎么分类"是一个图书情报学问题；今天，它正在变成 AI 的工程问题。因为当网站的生产者从人变成 Agent，分类法就不再是写给读者看的知识，而是 Agent 选择模板、组装页面的决策依据。这篇文章想聊聊：一个 Agent 在生成网站的那几秒钟里，到底"知道"些什么，又是怎么做出决定的。

本文另有可交互版本 HTML——可以亲手给同一个页面"换肤"，逐步拆解 Agent 的决策链。

一、一个正在发生的转变

如果你用过 v0、Lovable 或者任何一个 AI 建站工具，你会有类似的体验：输入一句"帮我做一个 SaaS 产品的落地页，深色科技感"，十几秒后，一个结构完整、配色合理、甚至文案都像模像样的页面就出来了。

这个体验背后藏着一连串非常密集的决策：这是什么类型的网站？应该用什么布局？配色往哪走？组件从哪里拿？字体用什么气质？

人类设计师做这些决策，靠的是多年积累的经验、审美和行业惯例——这些东西大多是隐性的，说不清道不明。但 Agent 不一样：它所有的"经验"都必须以某种结构化的知识存在。而"网站的分类法"和"UI 设计的可选空间"，正是这个知识体系里最基础的两层。

所以，重新梳理"网站有哪些分类、UI 有哪些风格"，不是怀旧，而是在拆解 Agent 的世界观。

我们先花两节把这两层知识讲清楚，然后在第四部分解剖核心问题：Agent 决定"用哪套模板"的那条决策链，每一步的依据到底是什么。

二、Agent 的第一层知识：网站是什么

传统的六个维度，是 Agent 的"需求解析词典"

经典网站分类学给出的维度，今天依然有效——但对 Agent 来说，每个维度的价值不在于"分类"，而在于它直接决定了一类设计决策：

• 功能用途（门户、电商、社交、工具、企业官网、政务、教育……）→ 决定信息架构和首屏目标：门户重分发，工具重效率，官网重信任。
• 内容主题（金融、医疗、科技、娱乐等垂直领域）→ 决定行业惯例和配色气质，详见第四部分的经验规则库。
• 技术形态（静态页、动态站、Web 应用）→ 决定技术栈选型，以及动效和交互的预算能开多大。
• 访问权限（公开、付费墙、内网）→ 决定首屏呈现的是内容、登录墙还是定价页。
• 商业模式（广告、订阅、交易抽佣、Freemium）→ 决定页面的转化目标——说白了，按钮往哪指。
• 运营主体（政府、企业、组织、个人）→ 决定信任要素：政务要权威背书，个人站要人格化表达。

对 Agent 来说，这六个维度不是分类学知识，而是需求解析的词典。用户说"帮我做个律师事务所官网"，Agent 实际上是在这六个维度上各打了一个标签：功能=企业官网，主题=法律，模式=获客导向……标签打完，页面的骨架就已经隐约浮现了。

AI 时代的四个新维度，是 Agent 理解新需求的必备

但老词典不够用了。AI 不只是给网站加了个功能，而是改变了网站的生产方式、交互方式和角色定位。至少需要补进四个新维度：

1. AI 原生程度。 传统网站 → AI 增强型（在原有产品上嵌入 AI 能力，如电商的 AI 客服）→ AI 原生（从架构之初就以大模型和自然语言交互为核心构建块）。一个"AI 原生"标签，会从根本上改变信息架构——对话流可能取代导航栏成为一级入口。

2. 交互范式。 人驱动（点击、搜索、浏览）→ 人机对话驱动（自然语言为主入口）→ 智能体驱动（用户"委托"而非"搜索"，Agent 代表用户跨站完成任务）。Web 的演进大致可以划分为 PC Web、Mobile Web、Agentic Web 三个阶段，交互范式的切换是每一代的本质。

3. 内容来源。 PGC、UGC 之外，新增了 AIGC。这不只是"内容是谁写的"的问题——它影响版权提示、审核机制、乃至页面上要不要标注"AI 生成"。

4. 服务对象。 这是最容易被忽略、但可能最深远的一个维度。过去的网站只服务于人；现在的网站越来越多地需要同时服务于 AI Agent——提供结构化数据、MCP 接口、Agent 可读的协议。"网站不仅要被人访问，还要能被 AI 使用"，正在成为新的设计约束。

三、Agent 的第二层知识：UI 的可选空间

确定了"这是个什么站"，接下来是"它该长什么样"。这里有一个被无数从业者混淆的概念对，必须先掰扯清楚。

风格简史：一条不断轮回的演化线

UI 视觉风格的演进主线大致是五个阶段，每一代都是对上一代的反叛：

• 拟物化（Skeuomorphism，约 2007–2013）：早期 iOS 时代的风格，界面模仿真实材质——皮革缝线、木质书架、玻璃高光。它的使命是教育市场：让第一代触屏用户通过现实经验理解屏幕上的元素。
• 扁平化（Flat Design，2013 年起）：iOS 7 和微软 Metro 推动的大转向。用户已经懂屏幕了，材质隐喻成了累赘，于是去掉阴影和渐变，留下纯色块、细线条、大留白，信息优先。
• 新拟态（Neumorphism，约 2019–2020）：Dribbble 上走红的"软阴影"风格——用同色系的高光和暗影，让元素像从背景里挤出来或凹进去。观感柔和精致，但对比度先天不足，基本停留在概念稿，极少真正上线。
• 玻璃拟态（Glassmorphism，2020 年起）：macOS Big Sur 和 Windows Fluent 带动的风格——半透明面板 + 背景模糊 + 一圈细描边，元素像一块毛玻璃浮在内容之上。至今仍是"科技感"的默认选项之一。
• 液态玻璃（Liquid Glass，2025 年起）：苹果在 WWDC 2025 发布的新设计语言，玻璃拟态的进阶——材质会折射光线、随底层内容流动变形，从"一块静态的毛玻璃"变成"活的玻璃"。

主线之外还穿插着若干支线风格：

• 新粗野主义（Neo-brutalism）：粗黑描边、高饱和撞色、硬阴影、等宽字体，故意做得"糙"，表达一种反精致的态度，Gumroad 和 Figma 社区把它带火。
• Bento Grid：苹果发布会带火的"便当盒"布局——用大小不一的网格卡片组织功能卖点，已经成了 SaaS 落地页的事实标准之一。
• 极繁主义、复古未来主义（Y2K）、拼贴风等：小众但辨识度高，常见于作品集和活动页。

风格的特点是：它是公共的、描述性的、随潮流起落的审美倾向。任何人都可以做玻璃拟态，不需要谁的授权，也没有官方文档。

设计系统：规则手册 + 零件库

设计系统是另一个层次的东西。它是成文的规范 + 可复用的实现：设计原则、设计令牌（色板、字号阶梯、间距体系）、组件库、使用指南。Material Design、Ant Design、Apple HIG、Fluent——这些是有所有权、有文档、有代码的体系。

用一个类比来说：

• 视觉风格 = 穿搭风格（日系、法式、街头）——公共的，谁都能穿
• 设计系统 = 某品牌的完整服装体系：版型标准、面料清单、尺码规范——私有的，有组织在维护

皮与骨的分离，正是 Agent 能混搭的前提

为什么要强调这个区分？因为混淆它们，就看不懂 Agent 在做什么。

设计系统是因，视觉风格是果——一个系统被严格执行后自然呈现某种外观。但二者是多对多关系：玻璃拟态这种风格，iOS 的 HIG 和各团队自建的规范都可以去实现它；Material Design 从 1.0 到 Material You，风格大变，却是同一个系统的版本迭代。

Agent 建站时，这个区分是操作性的：

• 用户说"要玻璃拟态" → 指定的是皮（风格层）
• Agent 选择用 shadcn/ui 还是 Ant Design → 选的是骨（系统层）
• 实际执行 = 在选定系统的骨架上，套用风格的皮肤：用 shadcn 的组件，把 token 改成半透明、模糊、细边框——你就得到了"shadcn 实现的玻璃拟态"

成熟设计系统的默认外观辨识度太高（一说 Ant Design 你脑子里就有画面），才让人误以为"系统 = 风格"。但严格说，那只是系统的出厂皮肤。

四、Agent 的决策链解剖

铺垫完了，来看核心问题：Agent 决定"用哪套模板"时，依据到底是什么？

完整的决策链分四步，权重从上到下：

① 用户输入（权重最高）。 显性指令直接锁定风格——"参考 Apple 官网"、"深色科技感"都是强约束。没有显性指令时，Agent 做隐性推断：从需求描述里解析行业和受众。

② 行业惯例与受众预期（经验规则库）。 Agent 内置的映射大致是：金融/法律/政务 → 保守、高对比、信息清晰；AI/SaaS/科技 → 渐变、玻璃拟态、深色模式；时尚/艺术/作品集 → 可以激进；电商/内容站 → 转化率和可读性优先，装饰让位。

③ 技术栈与组件库（能力边界约束）。 这是经常被忽略的一层：Agent 往往不是从零设计，而是在既定设计系统里组装。v0 默认生成 React + Tailwind + shadcn/ui，风格天然偏现代极简；国内一些工具则提供 Ant Design、Arco Design 等大厂规范可选。所以"模板选择"很大程度上 = "选哪套设计系统 + 在其上做多大程度的定制"。

④ 通用设计原则（兜底校验）。 无论选什么风格都要过的底线：文字对比度符合 WCAG、操作元素可识别、信息层级清晰、响应式。新拟态和玻璃拟态最大的坑正是对比度不足——风格可以激进，底线不能破。

整个流程长这样：

用户需求解析
   ├─ 显性风格要求？── 有 → 直接采用
   └─ 没有 → 隐性推断：
        ① 站点类型（落地页 / 电商 / SaaS / 作品集…）
        ② 行业与受众（B 端稳重 / C 端活泼）
        ③ 内容密度（内容多 → 克制装饰）
        ④ 品牌资产（Logo、品牌色 → 围绕它展开）
   ↓
匹配设计系统（骨架）+ 风格模板（皮肤）
   ↓
套用布局模式 + 配色 token + 字体
   ↓
原则校验（对比度 / 无障碍 / 响应式）

一个案例：同一个需求，两种产出

同样是"律师事务所官网"：

• 输入一："帮我做一个律师事务所官网。" → Agent 走默认推断：企业官网 × 法律行业 × B 端受众 → 保守稳重的中性配色、清晰的业务介绍结构、克制的装饰——安全但平庸。
• 输入二："帮我做一个专做科技初创公司业务的精品律所官网，参考 XX 的风格，深色，要有现代感。" → 受众从"传统客户"变成"科技公司创始人"，风格空间瞬间打开：深色底 + 玻璃拟态卡片 + 精致排版都变成了合理选项。

结论很直白：你给 Agent 的风格线索越具体，它的"模板选择"就越准。提示词里的受众描述、参考网站、品牌资产，本质上都是在帮 Agent 压缩决策空间。

五、两个开放的问题

文章最后，留两个我自己也还没有答案的问题，权当钩子。

第一，当网站的服务对象包括 Agent 本身，UI 还重要吗？

如果一个网站的相当比例"访客"是替人类办事的智能体——它不欣赏你的渐变和毛玻璃，只想要干净的结构化数据和可调用的接口——那么"给人看的界面"和"给 Agent 的接口"会不会分化成两个工种？前者越来越像品牌设计，后者越来越像 API 设计。llms.txt、MCP 这类面向 Agent 的协议正在冒头，也许分化已经开始。

第二，当生成成本趋近于零，"风格"会贬值还是升值？

一种可能是贬值：玻璃拟态谁都能一键生成之后，风格本身不再是壁垒。另一种可能是升值：正因为生成太容易，"知道什么场合该用什么风格、并敢于不用默认皮肤"的品味反而成了稀缺品。我倾向于后者——决策链里的第①②步（理解意图、匹配惯例）越自动化，第④步之上的审美判断就越值钱。

分类法从来不是终点。它只是 Agent——以及和 Agent 协作的我们——理解这个世界的一张地图。地图画得越好，路才走得越准。

---

参考方向：Agentic Web 相关研究（PC Web → Mobile Web → Agentic Web 的三阶段划分）、AI 原生架构的行业讨论、苹果 Liquid Glass 设计语言（WWDC 2025）、Neo-brutalism 与 Glassmorphism 的风格实践、v0 / Lovable 等 AI 建站工具的产品形态。