# 网站对标基准 v1.0

> 编号：D485（网站治理体系 v1.0，2026-10-02）·已生效 ｜ 调研：网站线总纲子任务A
> 方法：公开网络调研（browser_search + 公开文档），无 live browser 交互
> 本站基线：vertciti.com BlackRock 线——单页深色（`#0E1216` 主底），D481「编辑部档案馆」设计语言：中文衬线展示声三层字体系统、诚实材质（🟢🟡⚪）、证据优先于装饰、count-up 数字动画禁用、单强调色 teal（装饰配额 3 次）、双语原生（index.html＋en.html 镜像）
> 参考：《可验证的城市》design-philosophy.md（原则一~五）

---

## 一、总览：10 个对标站

| # | 类别 | 对标站 | URL | 奖项/地位（来源支撑） |
|---|---|---|---|---|
| A1 | Awwwards 深色编辑 | Oryzo AI | https://oryzo.ai | SOTM Apr 2026 + Developer Award（Lusion） |
| A2 | Awwwards 编辑 | Floema | https://www.floema.com/en | SOTM May 2026 + Developer Award（Bürocratik） |
| A3 | Awwwards 独立匠作 | MindMarket | https://mindmarket.com/ | SOTM Dec 2025 + Developer Award（Louis Paquet；Independent of the Year 2026 得主） |
| A4 | Awwwards 排印极简 | Kononenko Architectural Bureau | https://www.awwwards.com/sites/kononenko-architectural-bureau | SOTD 2026-08-23，score 7.27，2 色调色板 |
| B1 | 工程美学 | Stripe | https://stripe.com/payments | 开发者平台设计标杆 |
| B2 | 工程美学 | Linear | https://linear.app/ | 深色产品界面标杆 |
| B3 | 工程美学 | Vercel | https://vercel.com/ | 黑白几何＋"build & deploy" 叙事标杆 |
| B4 | 工程美学 | Apple | https://www.apple.com/iphone/ | 产品页叙事节奏标杆 |
| B5 | 工程美学 | Anthropic | https://anthropic.com | AI 公司克制编辑风标杆 |
| B6 | 工程美学 | Raycast | https://www.raycast.com | 开发者工具克制深色营销页标杆 |

注：By-Kin（SOTD+Dev+FWA+CSSDA，编辑排印）、Uncommon Studio（SOTD+Dev+FWA，网格）因未能从公开搜索结果中取得逐字可验证的官方 URL，暂列候补（按铁律不编造 URL）。

---

## 二、逐站对标卡

### A1 · Oryzo AI — https://oryzo.ai
- **奖项**：Awwwards SOTM Apr 2026 + Developer Award（2026 年 4 月榜单实证）。制作者 Lusion（shader research 型工作室）。
- **学什么**：
  - 生产级 WebGL/shader 大气层但**克制有品味**——深色底上的单氛围层做法，与 BlackRock 的深色调一致；可借鉴其"动效只做一处大气、其余全静态"的额度控制（我们的 teal 装饰配额 3 次可类比其"单氛围元素"预算）。
  - Scroll narrative 节奏：按该站的"Oryzo 公式"（一个 hero 对象 + 文字在后 + 滚动叙事），其段落 pacing 可作为我们 CH1/CH2/CH3 三章节动效时序的参考上限。
- **不学什么**：shader 大气层对我们是过度装饰——我们原则一"证据优先于装饰"，hero 已有流线纹理（装饰 1/2）配额满，不再加第二层大气。WebGL 引入的性能/LCP 成本与"证据陈列"无关，不借。
- **与 BlackRock 的关系**：深色大气层的"额度控制"榜样——它证明了深色站也可以只靠一处氛围赢奖，而 BlackRock 走的是更克制的纯编辑路线（无 WebGL），它可当我们的动效预算天花板。

### A2 · Floema — https://www.floema.com/en
- **奖项**：Awwwards SOTM May 2026 + Developer Award。制作者 Bürocratik。奖项来源实证 [L15 榜单]。官方页： https://www.floema.com/en
- **学什么**：
  - 编辑级排印匠艺 + 开发者级执行——这正是 D481「编辑部档案馆」要的方向：衬线展示声的段落节奏、章/节 eyebrow 层级（我们已有 `.eyebrow` 系统）可对其做逐项比对。
  - 2026 jury 三支柱（Art direction 单点视角 / Directed motion 编舞非特效 / Performance 60fps）是 A++ 的直接验收语言——我们的走查清单可逐项对齐该三支柱。
- **不学什么**：[未确认] 该站是否为深色——来源未说明其色调，不预设为深色对标；只取其编辑排印与执行纪律，不取其色板。
- **与 BlackRock 的关系**：编辑排印上的"工艺师傅"——我们的中文衬线展示声三层字体系统可拿 Floema 的字阶/行高/留白做反向校验（它不是深色站，但它的排印纪律与深色无关）。

### A3 · MindMarket — https://mindmarket.com/
- **奖项**：Awwwards SOTM Dec 2025 + Developer Award；作者 Louis Paquet 获 Awwwards Independent of the Year 2026（奖项来源实证）。
- **学什么**：
  - 独立匠作的"全栈一人交付"范式：与我们"全部 AI 自研、零不受控外部依赖"（2026-10-02 董事长指令）的工程伦理同构——其代码质量拿下 Dev Award 的路径（语义化/无障碍/WPO/响应式）可作为我们门禁清单的对照项。
  - jury 评分细则的另一面：Dev Award 单独可赢——我们的治理体系可设"工程分"与"设计分"双轨验收。
- **不学什么**：[未确认] 具体视觉风格未在来源中描述——不预设其排印/色调结论；其个人站属性（作品集）与我们"城市纵深"信息架构目标不同，不抄其 IA。
- **与 BlackRock 的关系**：工程伦理的同类——都是"小团队/独立交付 + 拿工程质量说话"，它证明了不靠大厂资源也能达到 SOTM 级完成度。

### A4 · Kononenko Architectural Bureau — https://www.awwwards.com/sites/kononenko-architectural-bureau
- **奖项**：Awwwards SOTD（2026-08-23），score 7.27/10；官方描述："minimalism, bold typography, thoughtful structure, immersive interactions"；调色板仅 2 色（来源实证）。
- **学什么**：
  - 极简 + 大排印 + 2 色纪律——与我们的"单强调色 teal + 深色底"纪律直接可比：它的 2 色克制可作为我们"装饰配额 3 次"制度的外部佐证（A++ 不是加法，是减法做到极致）。
  - "thoughtful structure"（有思考的结构）对应我们原则四"城市纵深"——章节即城区，可借鉴其结构清晰度。
- **不学什么**：建筑事务所的作品集属性——"immersive interactions" 若为装饰性沉浸（如大图 parallax），与我们"证据不许表演"冲突，只取结构与排印纪律，不取沉浸手法。
- **与 BlackRock 的关系**：色彩纪律的镜子——2 色 SOTD 证明克制即高级，与我们 teal 配额制是同一条路。

---

### B1 · Stripe — https://stripe.com/payments
- **学什么**：
  - 开发者优先的信息架构：产品能力按"问题→方案→代码示例"三段呈现——对应我们原则三"机器与人同读"（JSON 母语、HTML 译文）：Stripe 的文档-营销同源写法是 data-room.json 先行的最佳外部参照。
  - 渐进式信息披露：首屏一句主张 + 下钻细节，与我们 L1→L2→L3 城市纵深同构。
- **不学什么**：Stripe 的渐变/彩色几何品牌语言——与我们深色编辑风 + 单色纪律冲突；其营销式形容词（"increase conversion"类）违反我们"无来源形容词大字删除"清单。
- **与 BlackRock 的关系**：信息架构的老师——"同一份真相、两种渲染"（人读页、agent 调接口）正是 Stripe 文档哲学的营销页版本。

### B2 · Linear — https://linear.app/
- **学什么**：
  - 深色产品界面的完成度天花板：深色底 + 单强调色 + 高密度信息 + 60fps 交互——这是 BlackRock 深色编辑风在"工程感"维度最接近的参照系。
  - 动效的"物理化"标准：Linear 的过渡有质量感、零装饰——直接对应我们 D182「🟢 动效必须物理化」条款，可作为物理化动效的评审参照。
  - 2026 年 Linear CEO 宣布"issue tracking 已死"转向 agent-first（来源实证）——其"为 agent 设计界面"的产品转向与我们原则三（机器与人同读）方向一致。
- **不学什么**：Linear 是应用内界面（app chrome），不是营销叙事站——不抄其导航/侧边栏等应用 IA；其紫色品牌渐变与我们 teal 单色纪律冲突。
- **与 BlackRock 的关系**：深色工程美学的上限参照——BlackRock 的"编辑感" + Linear 的"工程完成度" = 我们 A++ 的两个端点。

### B3 · Vercel — https://vercel.com/
- **学什么**：
  - 黑白几何 + 网格 + 等宽字体的"基础设施美学"——与我们等宽字体=证据字体的规范（原则一）同源；其首页"Develop. Preview. Ship."三段式是"城市三城区"式 IA 的极简版本。
  - 性能即设计：Vercel 把速度做成品牌——对应我们门禁中的体积预算（size-gate）与性能验收，可互为佐证。
- **不学什么**：其黑白极简偏"冷"，缺少编辑温度——我们 D481 的中文衬线展示声是差异化，不向 Vercel 的无衬线冷感靠拢；其动态几何背景若为装饰性，与我们配额制冲突。
- **与 BlackRock 的关系**：基础设施美学的同路人——"快"和"等宽字体"都是证据气质，但 BlackRock 多一层编辑部的人文声线。

### B4 · Apple — https://www.apple.com/iphone/
- **学什么**：
  - 产品页叙事节奏：滚动即章节、每屏一个主张 + 一张证据图——这是"scroll as narrative form"（2026 趋势共识）在商业上的最高完成度；可作为我们 CH1→CH2→CH3 滚动叙事的 pacing 参考。
  - 克制文案：短句、大留白、让产品自己说话——对应我们"删无来源形容词"清单的精神（Apple 的形容词有产品实物背书，我们的每个断言有证据链背书）。
- **不学什么**：Apple 的浅色/产品摄影主导语言与我们深色编辑风完全不同——不取其色调与摄影依赖；其营销形容词（"best""magical"类）在我们站一律按删除清单处理。
- **与 BlackRock 的关系**：叙事节奏的老师、视觉语言的反面——学它的"一屏一主张"编排，不学它的浅色产品摄影风。

### B5 · Anthropic — https://anthropic.com
- **学什么**：
  - AI 公司的克制编辑风：长文、衬线倾向、研究气质——与我们"编辑部档案馆"在气质上最近的科技公司站；其 research/model-spec 等"把规则公示出来"的做法（来源实证：https://anthropic.com/model-spec）与我们"批准宪章"（D480 M-3）公示控制机制同构。
  - 信任叙事：Anthropic 把安全承诺做成公开可验证的文档——对应我们"证据陈列"哲学。
- **不学什么**：其米色/浅色编辑风与我们深色底不同——不取色调；其学术长文密度不适合我们单页营销节奏，只取"公示即信任"的方法论。
- **与 BlackRock 的关系**：气质最近的科技公司——"把规则和证据摆出来让人验证"是两家共同的方法论，只是 Anthropic 是浅色学术风，我们是深色编辑风。

### B6 · Raycast — https://www.raycast.com
- **学什么**：
  - 开发者工具的克制深色营销页：深色底 + 精准动效演示（快捷键演示动画）——其"用动效演示功能而非装饰"的做法是 D182 物理化动效的正面案例。
  - 单一主张 hero（一句话 + 一张图/一段演示）——对应我们 hero R1 公式改写（D481）的方向。
- **不学什么**：其红色品牌色与我们 teal 冲突；其偏极客的快捷键演示语言不适合我们"运营人生"的叙事主体。
- **与 BlackRock 的关系**：深色克制营销页的近邻——证明深色 + 单一主张 + 功能性动效可以在不堆装饰的情况下成立。

---

## 三、交叉结论（供治理体系引用）

1. **2026 jury 三支柱**（Awwwards jury Hon Tran 2026 实证）：Art direction（单点视角）/ Directed motion（编舞非特效）/ Performance（中端机 60fps）。建议：网站走查清单直接按此三支柱设验收项——BlackRock 的"单点视角"就是《可验证的城市》，"编舞"对应 D182 物理化动效审计，"性能"对应 size-gate + 60fps。
2. **深色是 premium tech 默认**（2026 趋势共识多源实证）——BlackRock 深色路线与趋势同向，无需论证。
3. **Serif 回潮**（2026 typography 趋势共识）——D481 中文衬线展示声与"serif comeback"同向，是加分项不是复古。
4. **单强调色纪律是 A++ 通行做法**：Awwwards 本站自己就是单暖色 `#FA5D29` + 深灰 `#222`（来源实证）；Kononenko 2 色 SOTD；我们的 teal 配额 3 次制有充分外部佐证。
5. **动效预算制**：Oryzo（单氛围元素）、Raycast（功能性演示动效）、Linear（物理化过渡）三方共同指向——"动效只允许有功能目的的"，与 D182 完全一致。

## 四、与 BlackRock 最接近的 2 个站

1. **Linear（B2）**——深色底 + 单强调色 + 高完成度工程感 + 物理化动效，是 BlackRock 在"工程美学"维度的上限镜像；差异只在 BlackRock 多了编辑部声线。
2. **Anthropic（B5）**——"把证据和规则公示出来让人验证"的方法论与《可验证的城市》同构，是气质最近的科技公司站；差异只在色调（浅色学术 vs 深色编辑）。

## 五、候补与缺口

- **By-Kin**（SOTD+Dev Award+FWA+CSSDA WOTD，编辑排印优先，Next.js+GSAP）与 **Uncommon Studio**（SOTD+Dev Award+FWA，自信网格）因公开搜索未取得逐字可验证官方 URL，按"绝不编造 URL"铁律暂列候补——后续可由有 live browser 的 parent 补采其 URL 后纳入。
- A 类中 MindMarket、Floema 的具体色调/视觉细节标 [未确认]——未做视觉断言，只引用奖项与工艺特征。

## 六、来源清单（全部来自本轮 browser_search 工具返回）

- 奖项榜单：https://github.com/hosnainrafi/designgate/blob/HEAD/docs/award-winners-2025-2026.md（SOTM 2026-04/05/12、SOTY 2026 提名、jury 三支柱）
- SŌM SOTD 页：http://www.awwwards.com:8080/sites/som（SOTD 2026-04-04，score 7.36）
- SOTD 榜单页：https://www.awwwards.com/websites/sites_of_the_day/?platform=hootsuite&mobile=1&page=5（Kononenko SOTD 2026-08-23；Oryzo SOTM Apr 2026）
- Kononenko SOTD 详情：https://www.awwwards.com/sites/kononenko-architectural-bureau（score 7.27，2 色，minimalism/bold typography）
- Awwwards 编辑语言实证：https://github.com/shuvam-banerji-seal/modern-design.md/blob/HEAD/websites/awwwards/design.md（单暖色 #FA5D29 学术引用）
- 2026 设计趋势：https://github.com/flitzrrr/frontend-design-skills/blob/HEAD/spec/domains/16-design-trends.md（scroll as narrative、dark default、type as hero）
- 趋势 Q3：https://github.com/delphinelil09-sys/universal-design/blob/HEAD/design-core/references/trends-2026-Q3.md（serif comeback、61% SOTD 用 3D）
- 评审维度：https://github.com/alanvaa06/award-craft/blob/HEAD/skills/direction/references/awwwards-rubric.md（jury checklist、By-Kin/Uncommon 工艺特征）
- 动效实证：https://github.com/barrythrill/design-measure/blob/HEAD/FINDINGS.md（Lenis 65/GSAP 50、中位 5 durations、0.3s 中心）
- Stripe：https://stripe.com/payments（官方 payments 页）
- Linear：https://linear.app/（官方主页引用）；Linear agent-first 转向：https://departmentofproduct.substack.com/p/linear-says-issue-tracking-is-dead
- Vercel：https://vercel.com/（多份部署文档引用）
- Anthropic：https://anthropic.com（awesome-anthropic 官方资源表）；model-spec：https://anthropic.com/model-spec（同表）
- Raycast：https://www.raycast.com（dev.to/Medium/官方文档引用）
- Apple：https://www.apple.com/iphone/（官方 iPhone 页引用）

---
*v1.0 已生效。候补站（By-Kin/Uncommon Studio）URL 待补采后纳入。*