Repository Wiki
Brandon030722/ark-ui-skill

前端实现证据

本页汇总 Ark UI 技能中「前端实现证据」（frontend implementation evidence）的完整参考：从公开站点可直接观测到的技术栈指纹，到可安全复刻的七类实现模式、响应式架构约定、生产环境建议与禁止复制清单。它回答的问题是——"官方页面是怎么做出来的，我可以在自己的代码里复刻到什么程度"。

Purpose and Scope

本页覆盖以下内容：

  • 证据边界（Evidence boundaries）：什么是可观测的公开证据，什么是对证据的误用（重新分发生产 bundle）。
  • 观测到的技术栈（Observed stacks）：各官方公开站点暴露的前端框架、CSS 架构与运行时指纹，及其置信度。
  • 可复用实现模式（Reusable implementation patterns）：主题令牌、边框仪器化外壳、遮罩揭示、分节标题、CSS/SVG 纹理、渐进式动效、响应式朝向七类模式。
  • 生产环境建议与禁止复制清单：把证据转化为可维护工程实践的规则，以及法律/许可红线。

本页不覆盖以下内容，它们属于兄弟页面：

  • 视觉语法与家族选择：参见 设计语言参考 中的设计语言/家族配方页。
  • 应用深度的四级评分细则：参见 深度等级 相关页面（references/depth-levels.md）。
  • 证据的 URL、抓取日期与逐条溯源记录：参见 来源账本（source ledger） 页面（references/source-ledger.md）。
  • 许可与法律边界细节：参见 references/legal.md 对应页面。

本页的单一权威源文件是 references/frontend-evidence.md，配套的落地实现位于 assets/react/ArkUI.jsx、assets/tokens/ark-ui.tokens.json 与 assets/starter-vanilla/、assets/showcases/。

Overview

「前端实现证据」是 Ark UI 证据驱动工作流的技术层。该技能的核心主张是：从已记录的实现证据出发构建原创界面，而不是从模糊的 "cyberpunk" 提示词出发（见 SKILL.md）。当任务涉及实现或代码评审时，SKILL.md 明确要求读取 references/frontend-evidence.md。

关键概念：

概念含义
实现证据浏览器可公开访问的生产 HTML、CSS、JS bundle、媒体 URL 与框架指纹
证据边界观测到的 bundle 属于"实现证据"，不是重新分发许可
Clean-room 实现assets/ 内的代码是基于高层观察的原创实现，不是 Hypergryph 源码
正交双轴视觉家族（data-ark-theme）与应用深度（data-ark-depth）相互独立，分别挂载在根属性上
模式（pattern）从证据中提炼、可在原创代码中安全重现的结构性做法（网格外壳、遮罩揭示等）

典型使用场景：

  1. 实现新界面：选择家族 + 深度后，按本页模式搭建外壳、令牌与响应式结构。
  2. 代码评审 / 视觉审计：用本页模式清单判断现有代码是否偏离证据结构（例如是否滥用绝对定位、是否把文字烤进图片）。
  3. 补充新证据：用 scripts/analyze-css-evidence.py 分析新的官方页面，再把观测结果登记进来源账本。

Architecture

证据到产物的整体链路如下：

Loading diagram...

设计意图说明：

  • 取证层与实现层严格分离。官方 bundle 只被"看"，从不进入交付物；assets/ 全部是 clean-room 原创。这是整个技能的法律与工程基线（见 references/frontend-evidence.md）。
  • 知识层是单一事实来源。本页对应的 references/frontend-evidence.md 由 SKILL.md 在"实现或代码评审"场景下强制读取，避免实现者凭印象编造结构。
  • 验证层闭环。产出物必须通过 audit-ark-ui.mjs 的启发式审计与 capture-showcases.mjs 的桌面/竖屏截图检查，截图与所选深度等级比对（见 SKILL.md）。

证据边界与观测到的技术栈

证据边界

官方公开站点向每个浏览器暴露生产 HTML、CSS、JS bundle、媒体 URL 与框架指纹；但它们不暴露有许可的源码仓库。因此：

  • bundle 分析 = 实现证据（可以据此归纳模式）；
  • bundle 内容 ≠ 重新分发许可（不能拷贝进交付物）；
  • assets/ 内代码是基于高层观察的原创 clean-room 实现，不是 Hypergryph 源码。

同时注意：这些观测只覆盖公开 Web 前端，不能据此推断公司内部游戏 UI 技术栈。

观测栈清单（含置信度）

站面直接观测置信度
Hypergryph 企业站React 18.2 生产运行时、CSS bundle、Tiny Slider 风格轮播代码、哈希 CDN 资源高
明日方舟 当前 CN 站Next.js app chunks、React、CSS 模块/哈希类名、Swiper CSS/运行时模式高
明日方舟 一周年/三周年独立哈希 JS/CSS bundle、重媒体分层页面、响应式朝向规则高
Endfield CN v4Next.js App Router chunk 路径、CSS 模块、Swiper、分节滚动架构高
Ex Astris v2Next.js app chunks、CSS 模块、横向/分节切换器、sprite 逐帧动画高
POPUCOM v2Next.js App Router chunks、CSS 模块、交互式小游戏/商店面高
Monster Siren RecordsUmi 生产 bundle、API 驱动的封面网格/音乐面高

Source: references/frontend-evidence.md

工程含义：主流站面普遍是 React/Next.js + CSS 模块 架构，这意味着"视觉家族放在 CSS 模块或令牌层、坐标不全部内联"是与证据一致的默认选择；而重媒体活动页依赖独立 bundle 与朝向规则，这正是本页响应式模式的来源。

七类可复用实现模式

以下模式均直接摘自 references/frontend-evidence.md，是本页最核心的"可复刻内容"。

模式 1：主题令牌（Theme tokens）

用语义化自定义属性，在根属性上切换家族，并保持组件选择器独立于字面家族颜色：

css
1[data-ark-theme="endfield"] { 2 --ark-ink: #191919; 3 --ark-paper: #f2f2f0; 4 --ark-signal: #fffa00; 5 --ark-state: #00ffa2; 6}

Source: references/frontend-evidence.md

应用深度挂在另一个根属性上。深度改变覆盖率与编排，不改变家族色板：

css
1[data-ark-depth="minimal"] { 2 --ark-stage-layer-opacity: .18; 3 --ark-instrument-shadow: none; 4} 5 6[data-ark-depth="complex"] { 7 --ark-stage-layer-opacity: .68; 8 --ark-instrument-shadow: .4rem .4rem 0 color-mix(in srgb, var(--ark-ink), transparent 86%); 9}

Source: references/frontend-evidence.md

配合 depth-levels.md 的稳定键与评分细则使用；不要为每个深度复制整套页面，而应使用变量、可选且有边界的装饰、共享组件变体与状态驱动组合。

模式 2：边框仪器化外壳（Edge-instrumented shell）

用 CSS Grid 而不是几十个视口相关的绝对定位值：

css
1.ark-shell { 2 min-block-size: 100svh; 3 display: grid; 4 grid-template-columns: 4.5rem minmax(0, 1fr); 5 grid-template-rows: 4.5rem minmax(0, 1fr); 6} 7.ark-rail { grid-row: 1 / -1; } 8.ark-topbar { grid-column: 2; } 9.ark-stage { grid-column: 2; min-width: 0; }

Source: references/frontend-evidence.md

绝对定位只允许出现在有边界的 stage 内部，用于艺术指导（art direction）。

模式 3：遮罩揭示（Masked reveal）

官方站点反复使用 mask 与 clip path。复刻该行为时内容仍保留在 DOM 中以保证可访问性：

css
1.ark-reveal { 2 clip-path: inset(0 100% 0 0); 3 transform: translateX(-12px); 4 transition: clip-path .65s cubic-bezier(.22,.8,.2,1), transform .65s; 5} 6.ark-reveal[data-visible="true"] { 7 clip-path: inset(0); 8 transform: none; 9}

Source: references/frontend-evidence.md

模式 4：分节标题与规则线元数据（Section title and ruled metadata）

把大标题、序号与规则线做成独立元素，避免"把字烤进图片"：

html
1<header class="ark-section-title"> 2 <p class="ark-kicker">FIELD OPERATIONS / 01</p> 3 <h2>Signal Archive</h2> 4 <span class="ark-rule" aria-hidden="true"></span> 5</header>

Source: references/frontend-evidence.md

模式 5：CSS/SVG 纹理（CSS/SVG textures）

生成原创纹理，而不是复制官方素材：

css
1.ark-grid { 2 background-image: 3 linear-gradient(rgb(255 255 255 / .08) 1px, transparent 1px), 4 linear-gradient(90deg, rgb(255 255 255 / .08) 1px, transparent 1px); 5 background-size: 4rem 4rem; 6}

Source: references/frontend-evidence.md

半调（halftone）或图示类艺术请使用内联 SVG：currentColor 上色、低透明度、pointer-events:none。

模式 6：渐进式动效（Progressive motion）

  • 分节揭示用 IntersectionObserver。
  • 直接交互用 CSS transition。
  • 只有 CSS 表达不了的动效才用 requestAnimationFrame。
  • 暂停离屏媒体与循环。
  • 用 reduced-motion 媒体查询关闭持续运动。

Source: references/frontend-evidence.md

模式 7：响应式朝向（Responsive orientation）

官方站点包含大量朝向专用规则，而不只是宽度断点。两者都要用：

css
1@media (max-width: 760px), (orientation: portrait) { 2 .ark-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } 3 .ark-rail { position: static; grid-row: 3; flex-direction: row; } 4}

Source: references/frontend-evidence.md

除非实现了经过测试、键盘可访问的分节滚动器，否则不要锁死 html 的 overflow。

模式在验证流程中的位置

Loading diagram...

核心流程：从证据到可交付实现

Loading diagram...

流程要点（对应 SKILL.md）：

  1. 令牌引用 assets/tokens/ark-ui.tokens.json 作参考，随后改名以匹配目标项目。
  2. 重命名 starter 的类名、ID、data 属性或 ARIA 目标时，必须在同一次修改中更新所有 JS 选择器与引用——"样式完好但 DOM 断线"不算完成。
  3. 契约尽量用根属性表达：data-ark-theme="endfield" 与 data-ark-depth="complex"，组件选择器保持语义化，使两个轴可独立变化。
  4. 优先用 CSS/SVG 几何、渐变、规则线、mask 与原创抽象，而不是拷贝游戏美术。

令牌数据模型与双轴

assets/tokens/ark-ui.tokens.json 是五家族证据衍生主题与四级深度元数据的单一来源：

json
1{ 2 "themes": { 3 "endfield": { 4 "ink": "#191919", 5 "paper": "#f2f2f0", 6 "signal": "#fffa00", 7 "state": "#00ffa2", 8 "accentAlt": "#00ffa2", 9 "muted": "#888888", 10 "panel": "rgba(25, 25, 25, 0.84)", 11 "shell": "pale-rail-charcoal-dock", 12 "stage": "calibration-route-matrix", 13 "radius": "2px" 14 } 15 } 16}

Source: assets/tokens/ark-ui.tokens.json

五个家族的对照（全部来自同一文件）：

家族inkpapersignal（主强调）stateradiusshell 意图
ark#080a0b#f4f6f6#18d1ff#c8eb210pxblack-edge-dock
endfield#191919#f2f2f0#fffa00#00ffa22pxpale-rail-charcoal-dock
exa#080914#f3f2ef#00fbec#925dff999pxmidnight-archive-rail
popucom#141414#fffdf4#ffcc1a#3994ff999pxdotted-dark-cap
corporate#050505#f3f3f3#f3ff00#ffffff0pxtranslucent-media-header

Sources:

深度侧的元数据（节选）：

json
1{ 2 "depths": { 3 "minimal": { 4 "level": 1, 5 "label": "极简", 6 "stageLayers": "0-1", 7 "componentCoverage": "critical", 8 "motion": "direct-only", 9 "responsive": "safe-stack" 10 }, 11 "moderate": { 12 "level": 2, 13 "label": "中等", 14 "stageLayers": "1-2", 15 "componentCoverage": "shared-major", 16 "motion": "reveal-and-direct", 17 "responsive": "shell-adaptation" 18 } 19 } 20}

Source: assets/tokens/ark-ui.tokens.json

注意令牌中 shell / stage 字段是意图描述（如 calibration-route-matrix），不是可直接渲染的值——它们提示该家族外壳与舞台层的构图方向，需由模式 1/2 落地为具体 CSS。

使用示例：React 契约组件

assets/react/ArkUI.jsx 是模式 1（双轴根属性）、模式 2（Grid 外壳）与模式 4（分节标题）的落地实现。

基础用法：ArkShell 携带双轴契约

jsx
1export function ArkShell({ 2 brand, 3 code, 4 status, 5 theme = 'endfield', 6 depth = 'complex', 7 nav = [], 8 activeId, 9 onNavigate, 10 children, 11}) { 12 const [menuOpen, setMenuOpen] = useState(false); 13 const profile = arkThemeProfiles[theme] || arkThemeProfiles.endfield; 14 15 useEffect(() => setMenuOpen(false), [activeId]); 16 17 return ( 18 <div className="arkR-shell" data-ark-theme={theme} data-ark-depth={depth}> 19 <header className="arkR-topbar"> 20 <div className="arkR-brand"> 21 <span className="arkR-brandMark" aria-hidden="true" /> 22 <span><strong>{brand || profile.brand}</strong><small>{code || profile.code}</small></span> 23 </div> 24 <span className="arkR-online"><i aria-hidden="true" /> {status || profile.status}</span> 25 <button 26 className="arkR-menu" 27 type="button" 28 aria-expanded={menuOpen} 29 aria-controls="arkR-rail" 30 onClick={() => setMenuOpen((value) => !value)} 31 >Menu</button> 32 </header> 33 <nav className="arkR-rail" id="arkR-rail" data-open={menuOpen} aria-label="Primary"> 34 {nav.map((item, index) => ( 35 <button 36 key={item.id} 37 type="button" 38 className={item.id === activeId ? 'is-active' : undefined} 39 aria-current={item.id === activeId ? 'page' : undefined} 40 onClick={() => onNavigate?.(item.id)} 41 > 42 <span>{String(index + 1).padStart(2, '0')}</span>{item.label} 43 </button> 44 ))} 45 </nav> 46 <main className="arkR-main">{children}</main> 47 </div> 48 ); 49}

Source: assets/react/ArkUI.jsx

要点：

  • 双轴契约在根元素上：data-ark-theme={theme} 与 data-ark-depth={depth}，任何组件都不需要知道字面家族色。
  • 可访问性内建：菜单按钮带 aria-expanded/aria-controls；导航项用 aria-current="page"；切换路由时 useEffect 自动收起菜单。
  • fallback 契约：arkThemeProfiles[theme] || arkThemeProfiles.endfield 保证传入未知家族时界面仍完整（brand/code/status 有默认文案）。

进阶用法：键盘可达的 ArkTabs

jsx
1export function ArkTabs({ items = [], label = 'Details' }) { 2 const baseId = useId(); 3 const [selected, setSelected] = useState(items[0]?.id); 4 5 function onKeyDown(event, index) { 6 if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; 7 event.preventDefault(); 8 let next = index; 9 if (event.key === 'ArrowLeft') next = (index - 1 + items.length) % items.length; 10 if (event.key === 'ArrowRight') next = (index + 1) % items.length; 11 if (event.key === 'Home') next = 0; 12 if (event.key === 'End') next = items.length - 1; 13 setSelected(items[next].id); 14 document.getElementById(`${baseId}-tab-${items[next].id}`)?.focus(); 15 } 16 17 return ( 18 <div className="arkR-tabs"> 19 <div className="arkR-tabList" role="tablist" aria-label={label}> 20 {items.map((item, index) => ( 21 <button 22 key={item.id} 23 id={`${baseId}-tab-${item.id}`} 24 type="button" 25 role="tab" 26 aria-selected={selected === item.id} 27 aria-controls={`${baseId}-panel-${item.id}`} 28 tabIndex={selected === item.id ? 0 : -1} 29 onClick={() => setSelected(item.id)} 30 onKeyDown={(event) => onKeyDown(event, index)} 31 >{String(index + 1).padStart(2, '0')} / {item.label}</button> 32 ))} 33 </div> 34 {items.map((item) => ( 35 <section 36 key={item.id} 37 id={`${baseId}-panel-${item.id}`} 38 role="tabpanel" 39 aria-labelledby={`${baseId}-tab-${item.id}`} 40 hidden={selected !== item.id} 41 >{item.content}</section> 42 ))} 43 </div> 44 ); 45}

Source: assets/react/ArkUI.jsx

要点：完整的 WAI-ARIA Tabs 模式——role="tablist"/"tab"/"tabpanel"、aria-selected、aria-controls/aria-labelledby、roving tabIndex，以及 ArrowLeft/ArrowRight/Home/End 键盘导航。这直接落实 SKILL.md 的"保留键盘访问、可见焦点"要求。

深度与家族切换器

jsx
1export const arkDepths = [ 2 { value: 'minimal', level: 1, label: 'Minimal' }, 3 { value: 'moderate', level: 2, label: 'Moderate' }, 4 { value: 'complex', level: 3, label: 'Complex' }, 5 { value: 'maximal', level: 4, label: 'Maximal' }, 6]; 7 8export function ArkThemePicker({ value, onChange }) { 9 return ( 10 <div className="arkR-themePicker" role="group" aria-label="Visual family"> 11 {arkThemes.map((theme) => ( 12 <button 13 key={theme} 14 type="button" 15 aria-pressed={value === theme} 16 onClick={() => onChange?.(theme)} 17 >{theme}</button> 18 ))} 19 </div> 20 ); 21}

Source: assets/react/ArkUI.jsx

Source: assets/react/ArkUI.jsx

ArkDepthPicker（L109-L122）结构相同，按钮文案为 {level} / {label}。两者均用 role="group" + aria-pressed 表达当前选择，无需依赖颜色。

配置选项

根属性契约（HTML/CSS 侧）

属性类型默认（React 壳）说明
data-ark-theme"ark" | "endfield" | "exa" | "popucom" | "corporate""endfield"视觉家族轴；驱动 --ark-ink/paper/signal/state 等语义令牌
data-ark-depth"minimal" | "moderate" | "complex" | "maximal""complex"应用深度轴；驱动 --ark-stage-layer-opacity、--ark-instrument-shadow 等
.ark-reveal[data-visible]"true" | 其他未设置模式 3 的揭示状态；为 true 时撤除 clip-path 与位移
.arkR-rail[data-open]布尔存在性不存在窄屏下主导航展开状态，与 aria-expanded 同步

ArkShell 组件参数

参数类型必填默认说明
brand / code / statusstring否取 arkThemeProfiles[theme] 的家族档案值顶栏品牌、编号与状态文案
themestring否'endfield'写入 data-ark-theme
depthstring否'complex'写入 data-ark-depth
navArray<{id, label}>否[]侧栏导航项
activeIdstring否—当前激活导航项，驱动 is-active 与 aria-current，变化时自动收起菜单
onNavigate(id) => void否—导航点击回调（可选链调用）
childrenReactNode否—主舞台内容

Source: assets/react/ArkUI.jsx

SKILL.md 规定的深度默认策略

场景默认深度
生产力/产品类 UImoderate
游戏相邻或展示类 UIcomplex
用户显式指定深度保留用户值，不覆盖

Source: SKILL.md

API 参考

以下为 references/frontend-evidence.md 支撑的工作流 API（属于证据链路的一等公民）：

scripts/analyze-css-evidence.py <css-url-or-file>

  • 作用：从公开 CSS（URL 或已下载文件）提取颜色、字体、动效与几何证据。
  • 使用时机：任务需要新证据，或账本未覆盖某产品时。
  • 产出要求：把页面 URL、资产 URL、抓取日期、观测框架、颜色、字体与可复用模式登记进 references/source-ledger.md，并区分"直接观测"与"推断"。

Source: SKILL.md

node scripts/audit-ark-ui.mjs <html-or-css-path>

  • 作用：捆绑的启发式审计，标记缺失的可访问性/响应式问题与常见仿制陈词滥调。
  • 在验证流程中的位置：SKILL.md "Validate" 第 2 步强制执行。

Source: SKILL.md

scripts/capture-showcases.mjs

  • 作用：在精确桌面与可选移动 CDP 视口渲染五个样例，出现水平溢出即失败。
  • 配合：与 audit-ark-ui.mjs 构成截图回归基线。

Source: SKILL.md

失败模式、边界情况与注意事项

禁止复制清单（法律与工程红线）

  • 来自 web.hycdn.cn 或 web-ipv6.hycdn.cn 的哈希生产 CSS/JS bundle。
  • Logo、主视觉、角色 PNG、视频、二维码、年龄分级标记或专有图标表。
  • 许可不明的内嵌字体。
  • 私有 API 端点、鉴权逻辑、令牌或遥测。
  • 压缩后的类名与精确布局坐标——它们是实现产物，不是设计系统。

Source: references/frontend-evidence.md

常见失败模式与纠正

失败模式来源证据的纠正方式
把 bundle 分析当作再分发许可证据边界章节：bundle 只是实现证据
用几十个视口绝对定位拼外壳模式 2：CSS Grid + 有边界 stage 内的绝对定位
把标题文字烤进图片模式 4：标题/序号/规则线为独立元素；生产建议"Keep text as text"
复制官方纹理素材模式 5：原创 CSS/SVG 纹理
只有宽度断点，竖屏崩坏模式 7：orientation: portrait 与宽度断点并用
锁死 html overflow模式 7：除非实现经过测试、键盘可访问的分节滚动器
持续动效打扰用户模式 6：reduced-motion 媒体查询关闭连续运动
重命名类名后 JS 选择器断线SKILL.md：同一次修改中更新所有选择器与引用
把观测栈误当游戏内部 UI 栈观测范围仅公开 Web 前端

并发与状态一致性关注点

  • ArkShell 的菜单状态（menuOpen）与路由状态（activeId）通过 useEffect 解耦：路由变化自动收起菜单，避免多来源状态竞争。
  • ArkTabs 用 useId() 生成稳定 ID 前缀，保证同页多实例 ID 不冲突。
  • roving tabIndex + hidden 属性保证任意时刻只有一个 tabpanel 可达，防止焦点与视觉状态脱节。

生产环境建议（性能与运维）

来自 references/frontend-evidence.md 的生产建议，按主题归类：

框架选择

场景建议
React/Next.js视觉家族放 CSS 模块或令牌层；不要把所有坐标内联
Vue/Svelte使用同样的语义组件边界；无需框架特有行为
静态/活动页页面以展示为主时优先零依赖 HTML/CSS/JS

现代平台特性

  • 在项目支持范围内使用 svh、dvh、clamp()、容器查询与逻辑属性。
  • 大型媒体懒加载；使用 picture、AVIF/WebP、显式尺寸与恰当的 object-position。

字体与文本策略

  • 文字保持为文字。官方营销页有时依赖图片资源做标题美术；生产应用不应重复这一可访问性权衡。
  • 只预加载首屏实际使用的展示字体；优先许可清晰的开源字体或系统回退。

路由、焦点与回归

  • 全屏分节使用真正的路由与焦点管理策略。
  • 在桌面与竖屏断点添加视觉回归截图（capture-showcases.mjs 即为此内建）。

证据更新运维

当任务需要更新鲜的证据或账本未覆盖的产品时：

bash
python3 "$CODEX_HOME/skills/ark-ui/scripts/analyze-css-evidence.py" <css-url-or-file>

Source: SKILL.md

登记要求：页面 URL、资产 URL、抓取日期、观测框架、颜色、字体、可复用模式写入 references/source-ledger.md，并区分直接观测与推断。来源账本记录 URL 的目的是让未来的 agent 可以对照活的公开站点验证事实，而不需要把这些资源发布进交付物。

扩展点

1. 新增视觉家族

在 assets/tokens/ark-ui.tokens.json 的 themes 下新增一个对象（含 ink/paper/signal/state/accentAlt/muted/panel/shell/stage/radius 十个键），并在 ArkUI.jsx 的 arkThemes 数组与 arkThemeProfiles 映射中加入对应条目。组件层无需改动——因为组件只消费语义令牌与根属性。

Sources:

2. 新增深度等级变体

在令牌文件 depths 下扩展（现有 minimal/moderate/complex/maximal，各含 level/label/stageLayers/componentCoverage/motion/responsive），配合 references/depth-levels.md 的稳定键。深度通过 --ark-stage-layer-opacity、--ark-instrument-shadow 等变量生效，因此新增深度主要是新增一组变量覆盖。

3. 新增观测证据

用 analyze-css-evidence.py 分析新官方页面 → 登记 source-ledger.md → 若发现新模式，补充进 frontend-evidence.md 的模式列表。这是知识层的唯一合法扩充路径。

4. 从零项目接入

scripts/scaffold-ark-ui.py 可把 starter 复制进新的或空的目标目录（见 SKILL.md）；或在 React 项目中直接引入 assets/react/ArkUI.jsx + assets/react/ark-ui.css，随后按项目约定重命名令牌与类名。

测试与验证覆盖

SKILL.md 的 "Validate" 章节规定了本证据体系的验证闭环（SKILL.md）：

步骤内容与证据的关系
1运行目标项目的测试、lint、build工程基线
2audit-ark-ui.mjs 启发式审计检查可访问性/响应式缺失与仿制陈词滥调
3桌面与竖屏宽度渲染检查落实模式 7 的朝向断点
4浏览器中实际操作主控件、检查运行时错误不得仅凭静态标记推断行为
5每个装饰元素要么支撑分组/方向/状态/世界观反装饰噪声
6溯源确认：官方证据被引用、第三方代码查过许可、输出原创或正确署名证据边界的最终关卡
7文案密度审计中被删文字冗余或仍可通过键盘可达的 details 控件获取模式 4 的可访问性延伸
8图标控件有可访问名称；提交/破坏性操作保留可见动词模式 6/7 的紧凑布局延伸
9与所选深度逐项比对（外壳变形、舞台分层、组件覆盖、状态仪器化、动效、响应式重构）深度评分细则
10最密屏不超所选深度一个本地等级；主屏不低于所选深度记录有意的本地例外

capture-showcases.mjs 提供确定性的截图回归：在精确 CDP 视口渲染，水平溢出直接失败——这把"竖屏不崩坏"从口头约定变成 CI 可执行断言。

  • 设计语言与家族配方：仓库内 references/design-language.md、references/recipes.md、references/family-depth-matrix.md
  • 深度等级评分细则：references/depth-levels.md
  • 溯源与许可：references/source-ledger.md、references/legal.md
  • 实现资产：assets/react/ArkUI.jsx、assets/react/ark-ui.css、assets/tokens/ark-ui.tokens.json、assets/starter-vanilla/、assets/showcases/
  • 脚本：scripts/analyze-css-evidence.py、scripts/audit-ark-ui.mjs、scripts/capture-showcases.mjs、scripts/scaffold-ark-ui.py
  • 工作流总纲：SKILL.md

Sources

(4 files)
(root)
SKILL.md
assets/react
ArkUI.jsx
assets/tokens
ark-ui.tokens.json
references
frontend-evidence.md