来源台账与出处复用政策
本页说明 ark-ui-skill 中两个治理文件的完整机制：references/source-ledger.md（来源台账，负责"观察与证据"）与 references/legal.md（出处与复用政策，负责"决策与处置"）。二者共同约束本技能在**净室（clean-room）**前提下做"基于证据的设计复用"。
目的与范围
本页覆盖
- 证据分级模型：
Direct/Supported/Inference三级置信度的定义、判定来源与记录要求。 - 官方视觉表面清单：15 个被直接观察的官方页面（企业站、明日方舟系列、Endfield、Ex Astris、POPUCOM、塞壬唱片、泰拉记事社、SKLAND、招聘站等）及其直接观察结论。
- 生产资产清单：以 SHA-256 指纹 + 字节数 + Last-Modified 三元组登记的 16 个公开生产 CSS/JS 文件，及其"证据指针而非打包依赖"的定位。
- 直接令牌样本：各表面对应的主色、可选色与字体族抽样。
- 线上复核流程：2026-07-20 复核批次的做法与漂移检测逻辑。
- 官方评论与招聘证据：哪些渠道可产出"Supported"级事实，哪些二手镜像只能作次要证据。
- GitHub 搜索结论：身份纠偏（
HyperGryph组织误归属）与 5 个社区仓库的逐仓处置决定。 - 推导观察：5 条由重复直接观察归纳的跨产品结论及其边界。
- 复用政策四分类（A 官方生产证据 / B 官方开源 / C 社区开源 / D 净室打包代码）、必备行为清单与实用来源决策流程。
- 失效模式：误归属、许可不明、时效性声明漂移、指纹漂移、粉丝二创污染。
留给兄弟页面的内容
| 主题 | 归属 |
|---|---|
| 共享视觉语法（信息层级、边缘停靠、双语微标签、克制的强调色） | 设计语言参考页 |
| 五种风格族配方 | 风格族配方页 |
| 四档应用深度标尺与验收维度 | 深度分级页 |
| 实现与代码评审所需的前端证据 | 前端证据页 |
本页只回答一个问题："这个设计事实/这段素材，是从哪来的、可信到什么程度、允许怎么用。"
概述
ark-ui-skill 的核心主张是"evidence-based family resemblance"（基于证据的风格族相似性），而不是"官方 UI 复刻"。为了让这个主张可审计，仓库维护了两份互补文件：
references/source-ledger.md是观察账本。它登记研究批次（research pass）日期、被直接观察的官方页面、抓取到的生产资产指纹、官方渠道陈述、GitHub 检索结论，以及由重复观察推导出的结论。它回答"我们看见了什么"。references/legal.md是处置政策。它把所有可能遇到的素材分为 A/B/C/D 四类，规定每类的允许动作，并给出一条四步走的实用决策流程。它回答"我们允许怎么用"。
两份文件由 SKILL.md 第 7 步统一驱动：当任务涉及来源归属、出处或资产决策时，Agent 必须同时读取二者。典型使用场景包括：
- 实现新界面前：从台账中查找目标风格族对应的官方表面与令牌样本，确认色彩/字体是有直接证据的，而不是臆造的。
- 引用设计事实时：判断某句话是 Direct、Supported 还是 Inference，并按政策使用 "Hypergryph-inspired" 而非 "official Hypergryph UI" 的措辞。
- 决定是否打包素材时：走
legal.md的四步决策流程，决定"授权内使用 / 仅引用 / 逐文件检查 / 从零重写"。 - 素材或结论过期时：对照资产清单的 SHA-256 与复核记录，检测线上漂移，再决定是否需要新一轮研究。
架构
证据治理在工作流中的位置
source-ledger.md 与 legal.md 不是孤立的合规文档，而是被 SKILL.md 工作流在第 7 步强制加载的两个决策输入，其结论直接决定 assets/ 与 scripts/ 下哪些代码可以打包分发：
要点：
- SKILL.md 是唯一入口。工作流第 7 步原文规定："For source attribution, provenance, or asset decisions, read
references/source-ledger.mdandreferences/legal.md."——两份文件成对读取，不存在只读政策不读证据的路径。 - 台账 → 政策是单向供血。政策中的 A 类（官方生产证据）规则之所以允许"引用与分析"，前提是台账里存在对应的直接观察记录与资产指纹。
- 政策 → 净室产物是硬闸门。只有 D 类（净室新写代码）能进入
assets/与scripts/；台账里登记的所有官方资产一律停留在"证据指针"状态。 - 虚线回流：SKILL.md 同时规定了向台账回写新来源的字段（页面 URL、资产 URL、检索日期、框架、颜色、字体、可复用模式），使台账成为可持续追加的活文档。
两份文件的协作契约
| 维度 | source-ledger.md | legal.md |
|---|---|---|
| 角色 | 记录"看见了什么、什么时候看见的" | 规定"允许做什么" |
| 数据形态 | 表格化的表面清单、资产指纹、渠道证据、处置决定 | 分类规则 + 行为清单 + 决策流程 |
| 时效性 | 带 research pass 日期，需在时间敏感结论前复核 | 规则性内容，随研究批次更新 B 类结论 |
| 变更触发 | 新增官方表面、资产指纹漂移、新渠道证据 | 发现新的素材来源类别或授权边界 |
| 输出 | 证据等级（Direct/Supported/Inference） | 处置决定（使用 / 引用 / 检查 / 重写） |
核心机制一：证据分级模型（source-ledger.md）
台账开篇即声明研究批次日期，并强制"时效性结论需先复核"：
Research pass: 2026-07-20 (Asia/Shanghai). Re-check live sources before making time-sensitive claims.
这句声明决定了台账的定位：它是一个可失效的快照，而非永久事实库。
三级置信度
| 等级 | 定义 | 典型来源 | 允许的表述 |
|---|---|---|---|
| Direct（直接） | 在渲染后的官方页面或其公开加载的生产 CSS/JS 中观察到 | 浏览器 DevTools 直接观察 | "官方 CSS 中 #18d1ff 为主动态色" |
| Supported（支持） | 由官方/已验证公司渠道或官方招聘站陈述 | 官方微博镜像、career.hypergryph.com | "官方渠道确认 UI 为跨产品工艺、有具名内部设计师" |
| Inference（推导） | 由重复的直接观察归纳而来，非公司陈述 | 多表面横向比对 | 台账"Derived observations"5 条结论 |
访问红线
台账明确声明："No source map, private endpoint, credential, or non-public repository was accessed."（未访问任何 source map、私有端点、凭证或非公开仓库。）这条红线与 legal.md 的"不得抓取或暴露 auth token、cookie、私有 API、source map、非公开端点"双向呼应，构成净室方法的取证边界。
官方视觉表面清单
台账共登记 15 个直接观察的表面。以下是节选，展示字段结构与观察粒度：
| 表面 | URL | 直接观察到什么 |
|---|---|---|
| Hypergryph corporate | https://www.hypergryph.com/ | Monochrome full-screen art, translucent charcoal header, black information panels, acid-lime hover/rules, React 18.2 runtime, hashed CSS/JS |
| Arknights CN | https://ak.hypergryph.com/ | Black top navigation, cyan active state, full-bleed blueprint/character stage, right download dock, oversized lower title, Next.js/React/Swiper patterns |
| Endfield CN | https://endfield.hypergryph.com/ | Pale vertical rail, white/charcoal/yellow shell, segmented key art, docked platform actions, large section identifiers, Next.js App Router/CSS Modules/Swiper patterns |
| Ex Astris CN | https://exa.hypergryph.com/ | Midnight full-bleed composition, slim left navigation, outlined orbital controls, serif narrative typography, aqua/violet signals, Next.js/CSS Modules |
| POPUCOM CN | https://popucom.hypergryph.com/ | Dark dotted top bar, blue/yellow/orange illustrated field, rounded arrowed action capsules, floating character layers, Next.js/CSS Modules |
Source: source-ledger.md
注意每个条目同时记录视觉特征（颜色、层级、装饰）与技术栈指纹（React 版本、Next.js 模式、构建产物特征）。这是为了支撑后续"框架选择"类结论——例如 Endfield 用 App Router + CSS Modules 的证据直接来自该表。
核心机制二：生产资产指纹清单
台账用 SHA-256 + 字节数 + Last-Modified 三元组登记 16 个生产 CSS/JS 文件：
| SHA-256 | Bytes | Last-Modified | Public production asset |
|---|---|---|---|
55b9681174b545b4b5fbabcc0127afd76a7fe753c2ce0a9ce302a8ea56f7c380 | 107,343 | 2026-02-09 | https://web.hycdn.cn/arknights/official/_next/static/css/3759d2520092f84b.css |
2adc174e1ddfe29a75de2ae161df2d32faa82fc2cdbc8fda2f4dd602363a4302 | 105,545 | 2025-04-24 | https://web.hycdn.cn/exastris/official-v2/_next/static/css/2adc512da22068ed.css |
1d30ea94f180e01a9af66fd01114e08c54125a1d2fd6642a5e70c4e019d45eab | 100,571 | 2025-12-12 | https://web.hycdn.cn/popucom/official-v2/_next/static/css/65a96b931171e4ec.css |
888ea1be139d3fb91399ced088fcce93c21627cea3f191986eceb6e10d3ef89a | 47,680 | 2026-01-22 | https://web-ipv6.hycdn.cn/hypergryph/official/index.a0435f.css |
Source: source-ledger.md
设计意图：指纹化的目的不是"引用"，而是漂移检测。完整表格可从原文查看，此处仅节选用于说明字段结构。
直接令牌样本
台账为每个表面抽样了主色/可选色与字体族：
| 表面 | 主导色 | 可选色 | 字体 |
|---|---|---|---|
| Corporate | #000, #fff, #333 | #f3ff00 | Source Han Sans, Geometos, Bender |
| Arknights current | #000, #fff | #18d1ff | Bender, Oswald, Novecento Sans Wide, Source Han Sans |
| Endfield | #191919, #fff | #fffa00, #00ffa2 | Gilroy, Space Grotesk, Novecento Sans Wide |
| Ex Astris | #000, #fff | #46f6e6, #925dff | Source Han Serif, Source Han Sans, Sumerhan, Trajan |
| POPUCOM | #fff | #3994ff, #ffa800, #ffcc1a, #3a5dad | heavy CJK sans and product face |
Source: source-ledger.md
这张表是设计语言页与风格族配方页的色彩/字体事实来源；本页只负责证明这些值是 Direct 级观察。
线上复核流程
台账的 "2026-07-20 live verification" 小节示范了如何用指纹做漂移检测：
- Arknights CN 主样式表 SHA-256 仍为
55b96811…c7380，#000/#fff/#18d1ff占主导，14 个 mask 声明、8 个 blend-mode 声明、六个 keyframe 家族。 - Ex Astris 主样式表仍匹配
2adc174e…a4302，44 个 mask 声明、orbital/point/glint keyframe、白色与午夜表面上克制使用的 aqua 强调色。 - POPUCOM 主样式表仍匹配
1d30ea94…d45eab，蓝为结构主色，黄/橙为动作信号。 - Hypergryph 企业与招聘页仍匹配
888ea1be…ef89a，#f3ff00作为克制的主动信号。
Source: source-ledger.md
复核动作会同时回答两个问题：指纹是否漂移（若漂移需更新台账并重新观察）与观察结论是否仍成立（如 Arknights 的黑色边缘壳层、青色激活态、双语索引导航）。
核心机制三：官方评论与 GitHub 检索结论
官方评论证据（Supported 级）
| 来源 | 证据 |
|---|---|
| https://www.sina.cn/news/detail/5215896102241360.html | 已验证 Hypergryph 微博（2025-09-28）的镜像，介绍 UI 设计师 栊一水又、阿树、AZE、阿福，并讨论游戏内与外部 UI 的制作方式。Supported 事实：UI 是具名内部设计师的跨产品工艺 |
| https://www.bilibili.com/opus/1094593447877148672 | "鹰角网络 LOGO 设计杂谈"，官方"何以鹰角"传播系列，为识别系统思考提供 Supported 语境 |
| https://career.hypergryph.com/ | 官方招聘站。Supported 事实：交互设计与视觉/游戏 UI 是当前招聘分类中的独立学科 |
| https://www.nowcoder.com/jobs/detail/413535 | 资深游戏 UI 岗的第三方镜像，措辞按次要证据处理 |
Source: source-ledger.md
台账明确划出下界："Do not treat fan video essays, Behance redesigns, or secondary job mirrors as official design rules."（不得将粉丝视频、Behance 重设计或二手岗位镜像视为官方设计规则。）
GitHub 搜索：身份纠偏与逐仓处置
这是台账最具操作价值的部分之一——它记录了一次误归属纠偏：
https://github.com/HyperGryph只有一个仓库HyperGryph/hyperloop，是圭尔夫大学 Hyperloop 团队软件，与上海鹰角网络无关。https://github.com/gryphline在研究批次中无公开仓库。
对 5 个社区仓库的逐仓处置决定：
| 仓库 | Commit | License | 决定 |
|---|---|---|---|
| Yue-plus/nextjs-starter-arknights | 18f51aa…f77a | MIT | 有用的社区 Next.js 主题参考。非官方；内嵌素材仍需独立权利审查。未复制进本技能 |
| mikezw/msrplayer | 9cc1734…c0cb | MIT | 有用的 Monster Siren API/播放器集成参考。非官方；不作为公司 UI 归属来源 |
| khanhn201/monster-siren-download | b6f4bc3…2c86 | MIT | 记录了公开 Monster Siren 数据访问模式；非 UI 来源 |
| sayuriu/endfield | c576b7c…d62a | 未检测到许可 | 粉丝站点。不要复制 |
| Jet-Fighters/cyber-music | 5228c2a…7b1f | 未检测到许可 | 粉丝模仿作品。不要复制 |
Source: source-ledger.md
关键限定："Public availability does not make them official or grant rights to bundled Hypergryph assets."（公开可得不等于官方，也不等于对内嵌 Hypergryph 素材的权利授予。）这直接对应 legal.md C 类规则中"仓库许可不授予第三方游戏美术的复制权"的条款。
核心机制四：复用四分类（legal.md）
legal.md 把可能遇到的一切素材归入 A/B/C/D 四类，每类给出明确的"允许/禁止"边界：
A. 官方公开生产证据
HTML, CSS, JavaScript, images, fonts, and media loaded by official Hypergryph sites are public to a browser but are not automatically open source. Use them to verify framework choice and derive high-level design facts. Do not bundle or redistribute them without a license or user-provided rights.
Source: legal.md
允许：验证框架选型、推导高层设计事实（例如从 CSS 统计色彩主导性）。禁止：在无许可或用户未提供权利时打包或再分发。台账里的 SHA-256 清单正是 A 类素材的登记形态——只作证据指针。
B. 官方开源代码
No verified official Hypergryph GitHub organization or licensed frontend repository was found during the July 2026 research pass.
Source: legal.md
B 类目前是空集，且带批次日期限定——若未来出现官方开源前端仓库，需更新此结论。同时再次警示 HyperGryph GitHub 用户的误归属风险。
C. 社区开源
A repository license does not grant rights to third-party game art embedded in it.
Source: legal.md
C 类的可复用性必须逐文件核查四要素：仓库所有者、现行许可、内嵌素材、署名要求。这正是台账 GitHub 表格中 "Commit inspected / License / Decision" 三列存在的原因——台账负责记录核查结果，政策负责定义核查标准。
D. 净室打包代码
All code under this skill's
assets/andscripts/is newly written from high-level observations. It intentionally excludes official logos, character art, media, production bundles, and fonts.
Source: legal.md
D 类是本技能产出的唯一合法分发形态：基于高层观察新写，有意排除官方 logo、角色美术、媒体、生产 bundle 与字体。
核心流程：实用来源决策
当面对任意一个待用素材时，legal.md 给出四步决策流程：
Source: legal.md
四步的顺序本身表达设计意图：先问权利，再问来源，最后才落到许可模糊地带。任何走到第 4 步的素材，默认动作是"从零重写"，而不是"先用了再说"——这是净室方法的兜底原则。
决策流程与证据台账的交互
流程第 2 步的判断依据来自台账的资产清单：只有出现在 SHA-256 清单里的文件才被认定为"已被观察的官方生产资产"。流程第 3 步的核查标准（所有者/许可/内嵌素材/署名）由 legal.md 定义，核查结果回写台账 GitHub 表格。这条闭环使得两份文件构成一个完整的"观察 → 分级 → 处置"流水线。
必备行为清单（Required behavior）
legal.md 的"Required behavior"一节是面向 Agent 执行层的硬约束，共 7 条：
| # | 行为 | 对应失效场景 |
|---|---|---|
| 1 | 使用 "Hypergryph-inspired" 或 "evidence-based family resemblance" 措辞，不用 "official Hypergryph UI"（除非用户在授权官方素材上工作） | 措辞误导：让受众误以为产出与官方有从属关系 |
| 2 | 复制带许可的社区代码时保留第三方许可声明 | MIT/其他许可的署名义务 |
| 3 | 优先使用原创 CSS/SVG 纹理与用户自有图像 | 未经授权的美术复制 |
| 4 | 使用开源字体或系统回退；打包任何字体文件前核验许可 | 字体再分发限制（台账中 Geometos、Novecento 等均为商业字体） |
| 5 | 不得抓取或暴露 auth token、cookie、私有 API、source map、非公开端点 | 与台账"访问红线"互为镜像的取证边界 |
| 6 | 把直接观察与推论分开记录 | Direct 与 Inference 混写导致置信度被夸大 |
| 7 | 若用户提供官方素材且涉及再分发，需确认其拥有使用权 | 权利来源断链 |
Source: legal.md
其中第 6 条直接对应台账的置信度三级模型：分级不是为了学术严谨，而是为了让后续引用者能判断"这句话有多可信"。
失效模式、边界条件与治理行为
已识别的失效模式与防御
| 失效模式 | 触发条件 | 防御机制（源证据） |
|---|---|---|
| 误归属 | 把 HyperGryph GitHub 用户（圭尔夫大学 Hyperloop 团队）当作游戏公司 | 台账 Identity correction 小节 + legal.md B 类双重提示 |
| 许可不明即使用 | 社区仓库未检测到许可（如 sayuriu/endfield、Jet-Fighters/cyber-music） | 台账 Decision 列写明 "Do not copy"；决策流程第 4 步兜底为"从零重写" |
| 时效性声明漂移 | 官方站点改版，台账快照过期 | 台账首行声明 "Re-check live sources before making time-sensitive claims" |
| 资产指纹漂移 | 生产 CSS/JS 重新构建，SHA-256 不再匹配 | 复核批次逐条记录指纹仍匹配/需更新的结论 |
| 二手证据被抬级 | 把粉丝视频、Behance 重设计、岗位镜像当作官方设计规则 | 台账 GitHub 检索结论与"官方评论"表均显式降级处理 |
| 仓库许可被误当作素材许可 | MIT 仓库内嵌官方美术，被误认为可随许可复制 | legal.md C 类规则明文排除 |
时效性与并发性
- 研究批次是单一时点的快照：台账明确标注 "Research pass: 2026-07-20 (Asia/Shanghai)"，任何时间敏感结论必须先复核线上来源。这是把"时效性"作为一等公民写入治理文档的做法。
- 无并发写入保护：台账是纯 Markdown 文档，多人/多任务同时追加记录时无锁机制。当前以"研究批次 + 复核小节"追加而非改写的方式缓解历史冲突——2026-07-20 live verification 就是作为独立小节追加，而非覆盖 2026-07-10 的原始指纹记录。
- 资产清单带 Last-Modified 字段：配合 SHA-256，形成"内容指纹 + 时间戳"双重锚点，即使 URL 不变也能识别内容变更。
对净室产出的影响
legal.md D 类规则直接决定了本仓库 assets/ 与 scripts/ 的内容形态：
对应本仓库实际结构：assets/react/ArkUI.jsx、assets/showcases/*.html、assets/promo/ 下的内容均为新写实现，台账中登记的 16 个官方生产文件一律不进入这些目录。这也是为什么本页将资产清单定位为"证据指针而非打包依赖"。
与 SKILL.md 工作流的集成
source-ledger.md 与 legal.md 在 SKILL.md 中有两处显式集成点：
读取时机（第 7 步）：
- For source attribution, provenance, or asset decisions, read
references/source-ledger.mdandreferences/legal.md.
Source: SKILL.md
回写要求：
Record the page URL, asset URL, retrieval date, observed framework, colors, fonts, and reusable pattern in
references/source-ledger.md. Separate direct observations from inference.
Source: SKILL.md
第二条定义了台账新增记录的最小字段集：页面 URL、资产 URL、检索日期、观察到的框架、颜色、字体、可复用模式，并要求把直接观察与推论分开——与台账现有表格的列结构完全一致，说明字段约定与实际记录格式是对齐的。
配置与记录字段参考
台账记录字段（由 SKILL.md 规定的最小集）
| 字段 | 类型 | 示例 | 说明 |
|---|---|---|---|
| 页面 URL | string | https://ak.hypergryph.com/ | 被直接观察的官方页面 |
| 资产 URL | string | https://web.hycdn.cn/arknights/official/_next/static/css/3759d2520092f84b.css | 公开加载的生产资源 |
| 检索日期 | date | 2026-07-10 / 2026-07-20 | 研究/复核批次日期 |
| SHA-256 | string | 55b9681174b545b4b5fbabcc0127afd76a7fe753c2ce0a9ce302a8ea56f7c380 | 内容指纹，用于漂移检测 |
| 字节数 | int | 107,343 | 辅助校验 |
| Last-Modified | date | 2026-02-09 | 服务端时间戳 |
| 观察到的框架 | string | Next.js App Router / CSS Modules / Umi / React 18.2 | 技术栈指纹 |
| 颜色 | list | #000, #fff, #18d1ff | 直接观察的令牌 |
| 字体 | list | Bender, Oswald, Novecento Sans Wide | 直接观察的字体族 |
| 可复用模式 | string | 垂直导航轨、停靠平台动作、大号区块编号 | 高层模式描述 |
处置决定枚举（GitHub 表格 Decision 列）
| 取值 | 含义 |
|---|---|
| 参考但不复制 | 有 MIT 许可的社区仓库，可借鉴集成思路，素材需独立审查 |
| 不作为 UI 归属来源 | 仓库只能证明集成/API 模式，不能证明官方 UI 所有权 |
| 不要复制 | 无许可粉丝作品，禁止任何形式复制 |
推导观察（Inference 级）及其边界
台账 "Derived observations" 列出 5 条由重复直接观察归纳的跨产品结论：
- 稳定的跨产品身份在于信息层级、边缘停靠、双语微标签与受控强调色——而非某一套固定配色。
- 每个产品允许一个强子身份：工业青、场域黄、宇宙青、或俏皮蓝/黄。
- 生产营销站偏好媒体重的全屏区块与大量竖屏专用样式。
- 技术可信度来自真实的布局结构、状态与克制的元数据，而非随机 HUD 装饰。
- 公司反复使用自定义/展示字体，但再分发应使用有许可的替代品。
Source: source-ledger.md
边界提示：这 5 条是 Inference 级，台账原文限定为 "inferences supported by repeated official surfaces"（由重复官方表面支持的推论）。引用它们时应表述为归纳结论，而非公司陈述。第 1 条与第 4 条是设计语言页中"克制的强调色""真实结构而非装饰"等规则的直接证据基座。
相关链接
- source-ledger.md — 来源台账全文
- legal.md — 出处与复用政策全文
- SKILL.md — 工作流第 7 步与台账回写字段约定
- frontend-evidence.md — 实现与代码评审所需的前端证据（兄弟页面）
- design-language.md — 由本页证据支撑的共享视觉语法（兄弟页面）