长得像，没人知道差多少
生成的页面截图很漂亮，但样式偏差、交互缺失、边界崩塌无人度量。没有验证，"完成"只是一个感觉。
EVIDENCE-FIRST UI PIPELINE
让 AI 写的每一行 UI， 都有证据。
ui-dismantler × sg-data-pack —— 把静态页面拆解成可复用组件库， 把散落各处的业务数据归一化成可演化的数据资产。 Agent 负责创作，而你的工具层负责验证。
01 · THE PROBLEM
AI 三秒生成一个页面。
然后呢？
数据散落各处
引擎内嵌默认值、模板硬编码文案、按数组下标的引用、阶段间的重复拷贝——重新爬取一次数据，全部缠成一团。
改一处，崩三处
没有契约、没有溯源、没有门禁。AI 的每一次修改都是掷骰子，错误静默通过，直到用户在页面上看到它。
我们的回答不是更好的模型，而是一条确定性的产线—— 把创作交给 Agent，把验证交给工具。
02 · DISMANTLE — ui-dismantler
“把 LLM 关进可验证的笼子。”
拆解：从页面到组件库
输入一个 HTML 页面 / Vue SFC / SPA，拆解为可复用、可审查、可验证的组件—— 结构归结构，样式归样式，数据归数据。 每一次复刻都要经过往返等价测试，分数不撒谎。
<div>
<section>
</div>
Button
WHAT YOU GET — 组件库产物解剖
src/<lib>.css参数化样式，--sg-* 变量可换肤src/<lib>.js渲染引擎，mount / create / destroydocs/设计规范.md主题色 / 视图结构 / 交互 / 响应式examples/*.html注入源数据复刻原页 + 中性复用模板03 · NORMALIZE — sg-data-pack
“数据升维成资产。”
归一化：一个文件统治数据
组件库里散落的业务数据，被归一化为唯一的 lib/data/data.json：
全局唯一实体、仅 ID 引用、阶段只引用不复制、记录级溯源。
滚动到这里时你看到的粒子汇聚，就是它在做的事。
Single source of truth
引擎内嵌默认值降级为 fallback，正式数据只存在于 data.json。
ID-only references
实体使用稳定 slug id，aliases 把爬取名映射到 id，永不按下标。
Reference, never duplicate
relations 主边只存一次，stages 只携带 {a,b} 引用加 overlay。
Fail loudly
挂载时 SGDataLoader.assertValid 校验：E1–E16 抛错，W1–W8 如实告警。
EVOLUTION — 数据怎么安全地变
recrawl→
review-report→
人工 decisions→
candidate→
validate --strict
04 · QUALITY GATES
“候选值是观测，不是事实。无人工决策，绝不应用。”
三道门，层层收敛
15 个案例的确定性回归：catalog 校验、证据审计、typecheck、构建、串行浏览器测试。不需要外部源，随时可跑。
涉及浏览器评估、视觉、fixture 或阈值变更时触发：共享浏览器 + 本地资源缓存 + 自适应稳定性检查。
PR + Gold 之上，叠加三轮性能基线测量。质量趋势可追踪，退化无处遁形。
RUNTIME CONTRACT — 挂载时校验，失败即抛错
E1
E2
E3
E4
E5
E6
E7
E8
E9
E10
E11
E12
E13
E14
E15
E16
每一个校验项，都是一次真实事故沉淀成的契约。
05 · THE LOOP
这条产线， 生产了它自己的展示页。
你正在看的这个页面：UI 样式体系来自经产线拆解的 Warp 主页组件库， 质量阈值来自真实的 benchmark 协议，校验清单来自真实的运行时契约—— 页面上的每一个像素，都有出处。
original.html→
component library→
data.json→
verified UI↺
OPEN SOURCE · MIT