reskin

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

stardust:reskin — same content, donor design

stardust:reskin — 保留内容，应用donor设计

The user has a site (the content source) and a design that already exists somewhere else (the donor: another live site, or a directory of static HTML prototypes; Figma is future scope). Reskin rebuilds the content site's pages so that every visible byte of content survives — text, ordered images, CTAs, SEO metadata — while the surface comes entirely from the donor's tokens and module vocabulary.

The two halves have different contracts:

Content is non-negotiable. The gate is byte equality of whitespace-normalized visible text, the ordered visible-image set, and full metadata carry-over. Not "close" — equal, after an explicitly declared, executable normalization ledger.
Design is flexible. Content is re-laid-out onto donor modules; a carousel may become a static card grid, a sidebar may become a band. Structure (element counts, tag sequences) is informational, never gating — a reskin re-structures markup by design.

The decisive rule, validated in the UC2-E1 experiment (hirslanden × stripe: 2281/2281 text bytes, 7/7 images, 47/47 slots, 13/13 metadata, 17/17 donor-token probe): the page is generated programmatically from the captured content model — content strings are never retyped. Byte fidelity then holds by construction and the content gate becomes a regression check instead of a debugging tool.

用户拥有一个网站（content source，内容源），同时有一个已在别处存在的设计（donor，设计源：另一款已上线网站，或本地静态HTML原型目录；Figma属于未来规划范围）。Reskin会重建内容源网站的页面，确保所有可见内容的字节都完整保留——文本、有序图片、CTA、SEO元数据，而页面外观则完全来自donor的设计令牌和模块体系。

内容与设计遵循不同的规则：

内容不可协商：校验标准为经过空白字符归一化后的可见文本、有序可见图片集以及完整元数据迁移的字节级一致性。不是“接近一致”——而是完全一致，且需基于明确声明的可执行归一化规则集。
设计灵活适配：内容会重新布局到donor的模块上；轮播组件可能变为静态卡片网格，侧边栏可能变为横幅区域。内容结构（元素数量、标签序列）仅作为参考信息，而非校验标准——Reskin会根据设计重新构建标记结构。

经UC2-E1实验（hirslanden × stripe：2281/2281文本字节匹配、7/7图片匹配、47/47插槽匹配、13/13元数据匹配、17/17 donor令牌探测匹配）验证的核心规则：页面是从捕获的内容模型程序化生成的——内容字符串绝不会手动重新输入。字节级保真由此天然成立，内容校验也从调试工具转变为回归检查手段。

Inputs

输入参数

```
<content-url>
```
— required. The site whose content is preserved.
Donor, exactly one of:
- ```
--donor <url>
```
  — a live site whose design system is adopted.
- ```
--donor-dir <path>
```
  — a directory of local static HTML prototypes (claude-design / Mobirise / Relume / Lovable / v0 / hand-coded). Served on localhost and captured through the same path — recipe in
```
reference/donor-sources.md
```
  § Local prototypes.
- ```
--donor-figma <url>
```
  — not yet implemented. The contract is defined (
```
reference/donor-sources.md
```
  § Figma) but the adapter is future scope. Tell the user exactly this: "Figma donors are not implemented yet. Export the frames as static HTML prototypes (or point me at a live staging URL of the design) and re-run with
  --donor-dir
  /
  --donor
  . The Figma adapter — variables→palette, text styles→type, frame screenshots→vision references, provenance class
  figma-mcp
  — is specced in
  skills/reskin/reference/donor-sources.md
  and will land in a later release." Do not improvise a partial Figma capture.
```
--pages <slug,slug,...>
```
— optional. Restrict the content capture to specific pages. Default: the archetype set (one page per page family; scale to siblings happens in Phase 6 via
```
migrate
```
).
```
--scope <selectors>
```
— optional. Pre-declare the content-root scope for a single-page run (comma-separated,
```
!
```
suffix keeps a scope whole; see
```
reference/content-model.md
```
§ Scope declaration). Without it, run the scope-discovery procedure per page.

```
<content-url>
```
— 必填。需保留内容的目标网站。
Donor，三选一：
- ```
--donor <url>
```
  — 采用其设计系统的已上线网站。
- ```
--donor-dir <path>
```
  — 本地静态HTML原型目录（claude-design / Mobirise / Relume / Lovable / v0 / 手工编码）。需在本地主机上部署，并通过相同路径捕获——具体流程见
```
reference/donor-sources.md
```
  § Local prototypes。
- ```
--donor-figma <url>
```
  — 尚未实现。相关规则已定义（
```
reference/donor-sources.md
```
  § Figma），但适配工具属于未来规划。需告知用户以下确切内容：*"Figma donor目前尚未实现。请将帧导出为静态HTML原型（或提供该设计的已上线预发布URL），然后使用
```
--donor-dir
```
  /
```
--donor
```
  参数重新运行。Figma适配工具——变量→调色板、文本样式→字体、帧截图→视觉参考、来源类
```
figma-mcp
```
  ——已在
```
skills/reskin/reference/donor-sources.md
```
  中定义，将在后续版本中推出。"*不得尝试实现部分Figma捕获功能。
```
--pages <slug,slug,...>
```
— 可选。将内容捕获范围限制为特定页面。默认值：原型页面集（每个页面类型对应一个页面；在第6阶段通过
```
migrate
```
扩展至同类型兄弟页面）。
```
--scope <selectors>
```
— 可选。为单页面运行预声明内容根范围（逗号分隔，
```
!
```
后缀表示保留完整范围；详见
```
reference/content-model.md
```
§ Scope declaration）。若无此参数，则针对每个页面执行范围发现流程。

Setup

准备步骤

Run the master skill's setup (
```
../stardust/SKILL.md
```
§ Setup): impeccable dep check, context loader, state read.
Playwright import-resolvability probe — same contract as
```
../extract/SKILL.md
```
§ Setup:
```
node -e "import('playwright').then(()=>process.exit(0))"
```
from the project root; on failure
```
npm i -D playwright --no-save --legacy-peer-deps
```
. Re-run the probe at the start of every phase that renders — a
```
--no-save
```
install is pruned by any later real
```
npm i
```
.
Copy the scripts into the project. ESM resolves
```
import('playwright')
```
from the script's directory and the plugin tree ships no
```
node_modules
```
. Copy
```
skills/reskin/scripts/*
```
(all five files —
```
capture-content.mjs
```
and
```
dom-equality.mjs
```
import
```
source-normalize.mjs
```
as a sibling) byte-identical to
```
stardust/scripts/reskin/
```
, and
```
skills/diff/scripts/ live-session.mjs
```
to
```
stardust/scripts/diff/
```
— every reskin gate script (capture-content, dom-equality, donor-probe, and slot-coverage) imports it unconditionally at startup, regardless of target type: without the copy each one exits 2 immediately, even for
```
--help
```
or a local-file
```
--rendered
```
target. It supplies ALL live-target hardening (real-Chrome UA + standard headers, challenge detection, headed-stealth escalation), resolved from
```
../diff/
```
next to
```
../reskin/
```
, so keep the two dirs siblings. Run the copies.
Origin collision — if
```
stardust/state.json
```
records a different
```
site.originUrl
```
, stop and ask before mixing sites, per
```
../extract/SKILL.md
```
§ Setup.

运行主技能的准备流程（
```
../stardust/SKILL.md
```
§ Setup）：完整依赖检查、上下文加载、状态读取。
Playwright导入可访问性探测 — 与
```
../extract/SKILL.md
```
§ Setup遵循相同规则：在项目根目录运行
```
node -e "import('playwright').then(()=>process.exit(0))"
```
；若失败则执行
```
npm i -D playwright --no-save --legacy-peer-deps
```
。在每个渲染阶段开始时重新运行探测——
```
--no-save
```
安装的依赖会被后续任何实际的
```
npm i
```
操作清除。
将脚本复制到项目中。ESM会从脚本所在目录解析
```
import('playwright')
```
，而插件树未包含
```
node_modules
```
。需将
```
skills/reskin/scripts/*
```
（共5个文件——
```
capture-content.mjs
```
和
```
dom-equality.mjs
```
会导入同级的
```
source-normalize.mjs
```
）字节级完整复制到
```
stardust/scripts/reskin/
```
，同时将
```
skills/diff/scripts/live-session.mjs
```
复制到
```
stardust/scripts/diff/
```
——所有Reskin校验脚本（capture-content、dom-equality、donor-probe、以及slot-coverage）在启动时都会无条件导入该脚本，无论目标类型如何：若未复制，每个脚本都会立即退出并返回状态码2，即使是
```
--help
```
或本地文件
```
--rendered
```
目标。该脚本提供所有实时目标的加固功能（真实Chrome UA + 标准请求头、挑战检测、带界面的隐身模式升级），从
```
../reskin/
```
旁边的
```
../diff/
```
目录解析，因此需保持这两个目录为同级目录。运行复制后的脚本。
源冲突 — 若
```
stardust/state.json
```
记录的
```
site.originUrl
```
与当前目标不同，则停止操作并询问用户是否混合处理不同网站，遵循
```
../extract/SKILL.md
```
§ Setup的规则。

Procedure

执行流程

Phase 1 — INGEST DONOR

阶段1 — 导入DESIGN源

The donor's design system is captured separately from the content site, into

stardust/canon-source/

. Full recipes per donor type in

reference/donor-sources.md

; summary:

Live URL (

--donor <url>

): invoke

stardust:extract <content-url> --design-source <donor-url>

— the existing skill, unchanged. It lands in

stardust/canon-source/

: the donor's

pages/

assets/

(screenshots included),

_brand-extraction.json

_crawl-log.json

, and a descriptive

DESIGN.md

DESIGN.json

, and stamps

state.json.designSource = { url, capturedAt, path }

— see

../extract/SKILL.md

§ Cross-site brand sources.

Local prototype dir (
```
--donor-dir <path>
```
): serve the directory on localhost (
```
python3 -m http.server <port> --directory <path>
```
) and run the same
```
--design-source
```
capture path against the localhost origin. Record the real provenance (localhost serve of
```
<path>
```
) in
```
canon-source/_crawl-log.json
```
. Recipe details — page listing, index-less directories, port hygiene — in
```
reference/donor-sources.md
```
§ Local prototypes.
Figma (
```
--donor-figma
```
): FUTURE. Surface the exact message from § Inputs and stop.

Then author two reskin-owned donor artifacts (contracts in

reference/donor-sources.md

```
stardust/reskin/donor-tokens.json
```
— the curated, probe-able token sheet: palette roles, type ramp, layout metrics, button specs, radii, shadows, motifs — every value a computed-style string the Phase 5 probe can assert verbatim. Curated from
```
canon-source/DESIGN.json
```
+
```
_brand-extraction.json
```
+ the raw computed styles; cites the donor page each value came from. On a bounded donor capture (a single donor page, no full
```
--design-source
```
run) there is no
```
DESIGN.json
```
,
```
_brand-extraction.json
```
, or
```
designSource
```
stamp to curate from — the token sheet is authored entirely from raw computed-style sampling of the donor page, a first-class parallel path (
```
reference/donor-sources.md
```
§ Two first-class token-sourcing paths).
```
stardust/reskin/donor-modules.md
```
— the enumerated module vocabulary (M1..Mn): one row per donor module with where-seen screenshot evidence and an anatomy description. This is the closed set the Phase 3 mapping brief maps onto.

The pin-one-reference-page rule (hard). Real donors run multiple design systems concurrently — the experiment's donor served radius-4px / 1266px on its homepage and pill-radius / 1080px on older product pages. Consolidating across them produces a chimera no live page ever shipped, and the token probe then asserts against nothing. When donor pages disagree on a token, pin ONE donor reference page per module family, record it in

donor-tokens.json

(

curatedFrom

+ a note naming the reference page), and demote the other pages to corroboration.

Donor的设计系统会独立于内容源网站被捕获到

stardust/canon-source/

目录中。针对不同类型Donor的完整流程见

reference/donor-sources.md

；摘要如下：

已上线URL (

--donor <url>

)：调用

stardust:extract <content-url> --design-source <donor-url>

——现有技能，无需修改。捕获结果会保存到

stardust/canon-source/

：包含donor的

pages/

、

assets/

（含截图）、

_brand-extraction.json

、

_crawl-log.json

，以及描述性文件

DESIGN.md

DESIGN.json

，并在

state.json.designSource = { url, capturedAt, path }

中标记——详见

../extract/SKILL.md

§ Cross-site brand sources。

本地原型目录 (
```
--donor-dir <path>
```
)：在本地主机上部署该目录（
```
python3 -m http.server <port> --directory <path>
```
），然后针对本地主机源执行相同的
```
--design-source
```
捕获流程。在
```
canon-source/_crawl-log.json
```
中记录真实来源（本地主机部署的
```
<path>
```
）。具体流程细节——页面列表、无索引目录、端口规范——见
```
reference/donor-sources.md
```
§ Local prototypes。
Figma (
```
--donor-figma
```
)：未来规划。展示输入参数部分的确切提示信息并停止操作。

随后创建两个Reskin专属的donor artifacts（规则见

reference/donor-sources.md

）：

```
stardust/reskin/donor-tokens.json
```
— 可探测的精选令牌表：调色板角色、字体层级、布局度量、按钮规格、圆角、阴影、主题元素——每个值都是第5阶段探测工具可直接断言的计算样式字符串。从
```
canon-source/DESIGN.json
```
+
```
_brand-extraction.json
```
+ 原始计算样式中精选而来；并标注每个值对应的donor页面来源。若为有限donor捕获（仅单个donor页面，未执行完整
```
--design-source
```
流程），则无
```
DESIGN.json
```
、
```
_brand-extraction.json
```
或
```
designSource
```
标记可供精选——令牌表需完全从donor页面的原始计算样式采样中创建，这是一条平行的一等公民流程（
```
reference/donor-sources.md
```
§ Two first-class token-sourcing paths）。
```
stardust/reskin/donor-modules.md
```
— 枚举的模块体系（M1..Mn）：每个donor模块对应一行，包含截图证据和结构描述。这是第3阶段映射文档所依赖的闭合集合。

固定单一参考页面规则（强制）。实际donor可能同时运行多个设计系统——实验中的donor在首页使用4px圆角/1266px宽度，在旧产品页面使用胶囊形圆角/1080px宽度。跨页面合并会产生从未上线过的混合设计，导致令牌探测无实际参照。当donor页面在令牌上存在分歧时，为每个模块类型固定一个donor参考页面，并在

donor-tokens.json

中记录（

curatedFrom

+ 标注参考页面的备注），将其他页面降级为佐证。

Phase 2 — CONTENT-MODEL CAPTURE

阶段2 — 内容模型捕获

The new capability: a byte-oriented capture of each content page — distinct from extract's design-oriented capture. Run the ported capture script per page:

bash

node stardust/scripts/reskin/capture-content.mjs \
  --url <page-url> \
  --scope '<sel1,sel2!,...>' \
  --normalize stardust/reskin/normalize/<slug>.mjs \
  --out stardust/reskin/content-model/<slug>/

It writes

stardust/reskin/content-model/<slug>/content-model.json

(full contract in

reference/content-model.md

): per section-slot — headings with levels, eyebrows and other leftovers, body paragraphs, list items, CTAs with absolute hrefs, ordered visible images (

currentSrc

+ alt), plus the ordered stream (

ordered

) — the same content as kind-tagged nodes in document order with nesting and separator flags, the render surface Phase 4 consumes; page-level — full SEO metadata (title, description, canonical, OG, Twitter, JSON-LD, lang, favicon), the whitespace-normalized visible text of the scope (the content-gate reference string), and a full-page screenshot.

Two declarations are mandatory per page, because they are the experiment's top two failure modes:

CONTENT-ROOT SCOPE declaration. Naive scoping silently dropped 30% of the experiment page's content — the hero and a banner carousel lived inside
```
<header>
```
, outside the obvious
```
#content
```
root, and byte equality would have "passed" against the incomplete reference. Never trust
```
main
```
or
```
#content
```
blind. Run the scope-discovery procedure (
```
reference/content-model.md
```
§ Scope discovery): compare the captured scope text against the whole-body text and the page screenshot, verify the h1 is inside the scope, widen with comma-separated multi-scope selectors until everything visible in the screenshot that isn't declared chrome is in the model. Chrome exclusions (nav, footer) are declared deltas (
```
D1
```
-style), not silent omissions. The capture script prints a coverage line (
```
bodyTextLen / scopeTextLen / h1InScope
```
) to make the check mechanical.
EXECUTABLE NORMALIZATION LEDGER. Cookie-consent chrome removal, carousel de-duplication (hidden slides are absent from
```
innerText
```
; clone slides duplicate it — rotating carousels break byte determinism), and any page-specific cleanup live in a per-page ledger module
```
stardust/reskin/normalize/<slug>.mjs
```
that extends the shared default (
```
scripts/source-normalize.mjs
```
). The same ledger file is passed verbatim to the capture and to every gate (
```
--normalize
```
), so the gate measures exactly the normalization the capture declared. The ledger is code, not prose. Format in
```
reference/content-model.md
```
§ Normalization ledger.

新增能力：面向字节的每个内容页面捕获——与extract的面向设计捕获不同。针对每个页面运行移植后的捕获脚本：

bash

node stardust/scripts/reskin/capture-content.mjs \\
  --url <page-url> \\
  --scope '<sel1,sel2!,...>' \\
  --normalize stardust/reskin/normalize/<slug>.mjs \\
  --out stardust/reskin/content-model/<slug>/

脚本会生成

stardust/reskin/content-model/<slug>/content-model.json

（完整规则见

reference/content-model.md

）：包含每个区域插槽——带层级的标题、眉栏及其他剩余内容、正文段落、列表项、带绝对href的CTA、有序可见图片（

currentSrc

+ alt），以及有序流（

ordered

）——按文档顺序排列的带类型标记节点，保留嵌套结构和分隔符标志，是第4阶段渲染所使用的表面数据；页面层面——完整SEO元数据（标题、描述、规范URL、OG、Twitter、JSON-LD、语言、图标）、经过空白字符归一化的范围可见文本（内容校验的参考字符串），以及全页面截图。

每个页面必须完成两项声明，这是实验中排名前两位的失败原因：

内容根范围声明。 naive范围选择会静默丢失实验页面30%的内容——Hero区域和横幅轮播位于
```
<header>
```
内，在明显的
```
#content
```
根之外，而字节一致性校验会针对不完整的参考“通过”。切勿盲目信任
```
main
```
或
```
#content
```
。执行范围发现流程（
```
reference/content-model.md
```
§ Scope discovery）：将捕获的范围文本与整个页面文本及页面截图进行对比，验证h1是否在范围内，使用逗号分隔的多范围选择器扩大范围，直到截图中所有可见的非声明chrome内容都被包含在模型中。Chrome排除项（导航栏、页脚）需声明为差异（
```
D1
```
格式），而非静默忽略。捕获脚本会输出覆盖率行（
```
bodyTextLen / scopeTextLen / h1InScope
```
），使校验过程机械化。
可执行归一化规则集。Cookie同意栏移除、轮播去重（隐藏幻灯片不在
```
innerText
```
中；克隆幻灯片会重复文本——旋转轮播会破坏字节确定性），以及任何页面特定清理操作都需放在每页的规则集模块
```
stardust/reskin/normalize/<slug>.mjs
```
中，该模块继承自共享默认规则（
```
scripts/source-normalize.mjs
```
）。同一个规则集文件会被完整传递给捕获流程和所有校验流程（
```
--normalize
```
参数），因此校验会完全按照捕获流程声明的归一化规则执行。规则集是代码，而非 prose。格式见
```
reference/content-model.md
```
§ Normalization ledger。

Phase 3 — MAPPING BRIEF

阶段3 — 映射文档

Author

stardust/reskin/mapping.md

— the cross-origin mapping brief. Full contract and entry schema in

reference/mapping-brief.md

. Per every content slot in the content model:

assigned donor module id (from
```
donor-modules.md
```
's closed vocabulary) + a one-line rationale grounded in slot anatomy vs module anatomy;
status ∈
```
{mapped, new-module, chrome, carried-invisible}
```
— the last for sr-only/visually-hidden content inside the byte scope (carried verbatim into an equivalent hidden element, no donor module;
```
reference/mapping-brief.md
```
§ Status semantics).

Gates before any rendering:

≥ 80% of content slots
mapped
onto named donor modules. Below that, the donor vocabulary doesn't cover this content — stop and surface (see § Stop conditions).
Every
new-module
entry is explicitly composed from donor tokens (name the tokens it borrows: input spec + primary button spec, etc.) and listed in the brief's stats block. New modules are never silently improvised mid-render.
Chrome swaps documented — nav/footer replaced by donor chrome carrying the source's links is a declared delta, excluded from the content-gate scope.
Casing / text-transform policy declared. The donor may render eyebrows uppercase (or the source may — Chrome's
```
innerText
```
reflects
```
text-transform
```
, so captured text is rendered-case). The underlying text stays byte-faithful; casing is applied via CSS
```
text-transform
```
only, never by editing the string. Policy details in
```
reference/mapping-brief.md
```
§ Casing policy.

Composite source sections (one wrapper div holding two logical regions) are split into atomic slots in the brief — section ≠ slot.

创建

stardust/reskin/mapping.md

——跨源映射文档。完整规则和条目 schema见

reference/mapping-brief.md

。针对内容模型中的每个内容插槽：

分配donor模块ID（来自
```
donor-modules.md
```
的闭合体系） + 基于插槽结构与模块结构对比的一行理由；
状态 ∈
```
{mapped, new-module, chrome, carried-invisible}
```
— 最后一种状态用于字节范围内的屏幕阅读器专用/视觉隐藏内容（原样带入等效隐藏元素，不使用donor模块；详见
```
reference/mapping-brief.md
```
§ Status semantics）。

渲染前的校验：

≥80%的内容插槽被
mapped
到指定donor模块。若低于该比例，说明donor体系无法覆盖当前内容——停止操作并告知用户（详见§ Stop conditions）。
每个
new-module
条目都明确由donor令牌组合而成（注明所借用的令牌：输入规范 + 主按钮规范等），并在文档的统计块中列出。绝不能在渲染过程中静默创建新模块。
Chrome替换已记录——导航栏/页脚被替换为带有源链接的donor chrome需声明为差异，排除在内容校验范围之外。
大小写/文本转换策略已声明。donor可能将眉栏文本渲染为大写（或源网站可能如此——Chrome的
```
innerText
```
会反映
```
text-transform
```
，因此捕获的文本是渲染后的大小写）。底层文本需保持字节级保真；大小写仅通过CSS
```
text-transform
```
应用，绝不编辑字符串。策略细节见
```
reference/mapping-brief.md
```
§ Casing policy。

复合源区域（一个包裹div包含两个逻辑区域）需在文档中拆分为原子插槽——区域≠插槽。

Phase 4 — PROGRAMMATIC RENDER

阶段4 — 程序化渲染

The decisive validated rule: the page is GENERATED from
content-model.json
— never retyped by hand. Write a renderer script per archetype (

stardust/reskin/renderers/<archetype>.mjs

, modeled on the experiment's

render-reskin.mjs

) that:

reads the page's
```
content-model.json
```
and interpolates every visible string, href, and image URL from the model (HTML-escaped) — if a string appears in the output HTML but not in the model, the renderer is wrong;
takes each slot's structure from the ordered stream (
```
sections[].ordered
```
,
```
reference/content-model.md
```
§ The ordered stream): kind-tagged nodes in document order, nesting preserved (a CTA wrapping its heading and vice versa),
```
sep
```
flags marking zero-separator inline joins. The stream is innerText-consistent by construction (its text nodes are sliced from the parent's rendered
```
innerText
```
— the byte-gate basis), so emitting it verbatim is safe. Emit nodes in stream order; emit
```
sep: ""
```
neighbours with no whitespace between them (inline); never reorder, and never reconstruct order or separators from
```
visibleText
```
— the first field run did exactly that (per-type arrays matched greedily against
```
visibleText
```
as an oracle) and burned three debug rounds on duplicate identical strings, both directions of CTA/container nesting, and zero-separator inline
```
li
```
runs, all of which the stream now captures structurally;
renders
```
formControl
```
nodes as equivalent controls, not text: a
```
<select>
```
carrying the captured option texts verbatim, in order; inputs/textareas carrying value/placeholder — restyled with donor tokens (the new-module composition rules apply), never flattened to prose and never dropped. A select's option text is part of the source's
```
innerText
```
, so dropping the control fails the byte gate with nothing structured to render from (
```
reference/content-model.md
```
§ Slot taxonomy, formControls);
carries the metadata block verbatim into
```
<head>
```
(title, description, canonical, OG, Twitter, JSON-LD — including source garbage like broken JSON-LD URLs: fidelity over repair; flag such items for the human in the run report, never silently fix or silently keep);
takes its surface exclusively from
```
donor-tokens.json
```
(emitted as CSS custom properties) + the donor module patterns assigned in
```
mapping.md
```
. Use the rendered-page conventions the Phase 5 probe asserts against: content in
```
<main>
```
,
```
.container
```
for the measure,
```
.btn
```
for the donor primary button (
```
reference/gates.md
```
§ Rendered-page conventions);
writes
```
stardust/reskin/pages/<slug>.html
```
, self-contained.

Renderers may parse a single node's text apart (split a list-item row into kicker/date/title) but must fail loudly (throw) when a parse doesn't reproduce the node's text — a silent partial parse is a silent content drop. A slot whose

orderedVerified

false

is inspected before rendering, never trusted blind; when inspection shows stream text genuinely absent from the slot's

visibleText

, the sanctioned fallback is to drop that text before rendering and record the drop in the model's provenance — filtering ghosts against

visibleText

is the documented resolution, distinct from the forbidden order-reconstruction move (

reference/content-model.md

§ When

orderedVerified

is false).

经验证的核心规则：页面是从
content-model.json
生成的——绝不手动重新输入。为每个原型页面编写渲染器脚本（

stardust/reskin/renderers/<archetype>.mjs

，以实验中的

render-reskin.mjs

为模板），需满足：

读取页面的
```
content-model.json
```
，并从模型中插值所有可见字符串、href和图片URL（HTML转义）——若输出HTML中出现模型中没有的字符串，则渲染器存在错误；
从有序流（
```
sections[].ordered
```
，详见
```
reference/content-model.md
```
§ The ordered stream）获取每个插槽的结构：按文档顺序排列的带类型标记节点，保留嵌套结构（CTA包裹标题或反之），
```
sep
```
标志标记零分隔符的内联连接。有序流天生与innerText一致（其文本节点从父元素的渲染后
```
innerText
```
中截取——这是字节校验的基础），因此原样输出是安全的。按流顺序输出节点；
```
sep: ""
```
的相邻节点之间无空白符（内联）；绝不重新排序，绝不从
```
visibleText
```
重构顺序或分隔符——第一次现场测试正是这样做的（按类型数组贪婪匹配
```
visibleText
```
作为参考），并在重复相同字符串、CTA/容器嵌套方向、零分隔符内联
```
li
```
序列等问题上花费了三轮调试，而这些问题现在都被有序流结构化捕获；
将
```
formControl
```
节点渲染为等效控件，而非文本：
```
<select>
```
需原样保留捕获的选项文本及顺序；输入框/文本域保留值/占位符——使用donor令牌重新样式化（应用新模块组合规则），绝不扁平化为 prose 或丢弃。select的选项文本是源网站
```
innerText
```
的一部分，因此丢弃控件会导致字节校验失败，且无结构化内容可渲染（详见
```
reference/content-model.md
```
§ Slot taxonomy, formControls）；
将元数据块原样带入
```
<head>
```
（标题、描述、规范URL、OG、Twitter、JSON-LD——包括源网站的无效内容如损坏的JSON-LD URL：保真优先于修复；需在运行报告中标记此类内容，绝不静默修复或保留）；
外观完全取自
```
donor-tokens.json
```
（作为CSS自定义属性输出） +
```
mapping.md
```
中分配的donor模块模式。遵循第5阶段探测工具所断言的渲染页面约定：内容放在
```
<main>
```
中，
```
.container
```
用于宽度限制，
```
.btn
```
用于donor主按钮（详见
```
reference/gates.md
```
§ Rendered-page conventions）；
生成
```
stardust/reskin/pages/<slug>.html
```
，独立可运行。

渲染器可拆分单个节点的文本（将列表项行拆分为标题/日期/正文），但当解析无法重现节点文本时必须抛出错误——静默部分解析等同于静默丢失内容。

orderedVerified

为

false

的插槽需在渲染前检查，绝不盲目信任；当检查发现流文本确实不在插槽的

visibleText

中时，认可的回退方案是在渲染前丢弃该文本，并在模型的来源记录中记录丢弃操作——根据

visibleText

过滤无效内容是文档化的解决方案，与禁止的顺序重构操作不同（详见

reference/content-model.md

§ When

orderedVerified

is false）。

Phase 5 — GATES

阶段5 — 校验

Three gate families per page; commands, pass bars, tolerances, and failure modes in

reference/gates.md

. Serve or

file://

-address the rendered page and run:

(a) CONTENT GATE — all three must pass:

bash

node stardust/scripts/reskin/dom-equality.mjs \
  --source <page-url> --source-scope '<declared scope>' \
  --normalize stardust/reskin/normalize/<slug>.mjs \
  --rendered stardust/reskin/pages/<slug>.html --rendered-scope main \
  --report stardust/reskin/reports/<slug>-content-gate.md
node stardust/scripts/reskin/slot-coverage.mjs \
  --model stardust/reskin/content-model/<slug>/content-model.json \
  --rendered stardust/reskin/pages/<slug>.html \
  --report stardust/reskin/reports/<slug>-slot-coverage.md

dom-equality.mjs

(vendored + adapted from github.com/aemcoder/skills, Apache-2.0) gates on whitespace-normalized visible-text byte equality and the ordered, URL-normalized visible-image set; element count and tag sequence are reported but informational.

slot-coverage.mjs

additionally proves every model slot present (slot text substring, every CTA as a (text, absolute-href) pair, every image) and asserts metadata carry-over field by field.

(b) DESIGN-ADOPTION GATE:

bash

node stardust/scripts/reskin/donor-probe.mjs \
  --tokens stardust/reskin/donor-tokens.json \
  --rendered stardust/reskin/pages/<slug>.html \
  --report stardust/reskin/reports/<slug>-donor-probe.md

Computed-style assertions of donor token values on the rendered page — bg/fg, font-family token string, display weight, button spec, container width, band palette, section rhythm. Tolerances (exact for colors/radius/family; ±2px button padding; ±20px container; ±16px section rhythm) documented in

reference/gates.md

§ Tolerances. Then the side-by-side judgment: open the rendered page next to the donor reference-page screenshots (

canon-source/assets/screenshots/

) and judge adoption with your eyes — the probe proves tokens, the eyeball proves the page reads as the donor. Record the verdict.

(c) Sanity — no horizontal overflow at 1440 and 360 (donor-probe runs this automatically;

--widths

to override).

One fix iteration per gate family — one for the content gate, one for design-adoption/sanity. On a failure in a family, fix once, re-run all gates (a fix for one gate can break another). Residual failures after a family's iteration is spent are logged in

stardust/reskin/ledger.json

under the page's

residuals[]

— never silently absorbed, never looped on indefinitely. (Both field runs support the budget: the validation experiment spent one iteration on 360px chrome; the smoke run spent exactly one per family — a content-side separator emission fix and a sanity-side 360px chrome fix. A single shared iteration would have forced a false residual; per-family keeps the loop bounded without absorbing real failures.)

每个页面包含三类校验；命令、通过标准、容差、失败模式见

reference/gates.md

。部署渲染后的页面或使用

file://

地址访问，然后运行：

(a) 内容校验 — 以下三项必须全部通过：

bash

node stardust/scripts/reskin/dom-equality.mjs \\
  --source <page-url> --source-scope '<declared scope>' \\
  --normalize stardust/reskin/normalize/<slug>.mjs \\
  --rendered stardust/reskin/pages/<slug>.html --rendered-scope main \\
  --report stardust/reskin/reports/<slug>-content-gate.md
node stardust/scripts/reskin/slot-coverage.mjs \\
  --model stardust/reskin/content-model/<slug>/content-model.json \\
  --rendered stardust/reskin/pages/<slug>.html \\
  --report stardust/reskin/reports/<slug>-slot-coverage.md

dom-equality.mjs

（源自github.com/aemcoder/skills，Apache-2.0许可，已适配）校验经过空白字符归一化的可见文本字节级一致性，以及有序、URL归一化的可见图片集；元素数量和标签序列会被报告，但仅作为参考信息。

slot-coverage.mjs

额外验证模型中的每个插槽都已存在（插槽文本子串、每个CTA作为(text, absolute-href)对、每个图片），并逐字段断言元数据迁移情况。

(b) 设计适配校验：

bash

node stardust/scripts/reskin/donor-probe.mjs \\
  --tokens stardust/reskin/donor-tokens.json \\
  --rendered stardust/reskin/pages/<slug>.html \\
  --report stardust/reskin/reports/<slug>-donor-probe.md

对渲染页面上的donor令牌值进行计算样式断言——背景色/前景色、字体族令牌字符串、字体权重、按钮规格、容器宽度、横幅调色板、区域间距。容差（颜色/圆角/字体族精确匹配；按钮内边距±2px；容器宽度±20px；区域间距±16px）见

reference/gates.md

§ Tolerances。然后进行并排判断：将渲染页面与donor参考页面截图（

canon-source/assets/screenshots/

）并排打开，用肉眼判断适配情况——探测工具验证令牌，肉眼验证页面看起来像donor。记录判断结果。

(c) 合理性校验 — 在1440px和360px宽度下无水平溢出（donor-probe会自动运行此校验；可使用

--widths

参数覆盖）。

每类校验允许一次修复迭代——内容校验一次，设计适配/合理性校验一次。若某类校验失败，修复一次后重新运行所有校验（针对一个校验的修复可能破坏另一个校验）。某类校验迭代后仍存在的残留失败需记录在

stardust/reskin/ledger.json

中对应页面的

residuals[]

下——绝不静默忽略，绝不无限循环。（两次现场测试都支持此预算：验证实验在360px chrome上花费了一次迭代；冒烟测试每类校验各花费一次——内容端修复分隔符输出，合理性端修复360px chrome。若共享一次迭代则会产生虚假残留；按类分配迭代可在不忽略真实失败的情况下限制循环次数。）

Phase 6 — HANDOFF

阶段6 — 交付

Reskin owns the archetype pages; scale and shipping are the existing pipeline, unchanged:

Scale via
stardust:migrate
(
```
../migrate/SKILL.md
```
) with the donor-pinned target (the
```
state.json.designSource
```
stamp Phase 1 wrote is exactly what
```
direct
```
/
```
migrate
```
read for donor pinning; a bounded donor capture wrote no stamp — record the donor origin in the handoff instead,
```
reference/donor-sources.md
```
§ Two first-class token-sourcing paths). Same-type sibling pages render at the sibling tier against the gated archetype. Content rules are the ones reskin already enforces —
```
../migrate/reference/content-preservation.md
```
is inherited wholesale.
Ship via
stardust:deploy
/
stardust:rollout
, unchanged.

Reskin writes its own state under

stardust/reskin/

—

ledger.json

holds per-page status (

captured → mapped → rendered → gated

), gate results, and residuals. It makes no changes to the core state machine (

../stardust/reference/state-machine.md

); the only

state.json

touch is the

designSource

stamp that extract itself writes in Phase 1.

Reskin负责原型页面；扩展和上线使用现有流程，无需修改：

通过
stardust:migrate
扩展（
```
../migrate/SKILL.md
```
），使用固定donor的目标（第1阶段写入的
```
state.json.designSource
```
标记正是
```
direct
```
/
```
migrate
```
读取的donor固定信息；有限donor捕获未写入标记——需在交付时记录donor源，详见
```
reference/donor-sources.md
```
§ Two first-class token-sourcing paths）。同类型兄弟页面会针对已校验的原型页面在兄弟层级渲染。内容规则遵循Reskin已执行的规则——完整继承
```
../migrate/reference/content-preservation.md
```
。
通过
stardust:deploy
/
stardust:rollout
上线，无需修改。

Reskin将自身状态写入

stardust/reskin/

目录下——

ledger.json

保存每页状态（

captured → mapped → rendered → gated

）、校验结果和残留问题。它不会修改核心状态机（

../stardust/reference/state-machine.md

）；唯一对

state.json

的修改是第1阶段extract自身写入的

designSource

标记。

What reskin never does

Reskin绝不会执行的操作

No content rewriting or summarizing. Not headlines, not body, not CTA labels, not casing-by-editing. Faithful ≠ clean: source garbage is carried verbatim and flagged, not fixed.
No invented sections. Every rendered slot traces to a content-model slot; every module traces to
```
donor-modules.md
```
or an explicit new-module entry in
```
mapping.md
```
.
No donor-token drift. No colors, fonts, radii, or spacing outside
```
donor-tokens.json
```
. Licensed donor fonts are adopted as the family token string with local fallback, never rebundled.
No silent slot drops. Anything excluded from the gate scope is a declared chrome delta or a ledger normalization — declared in
```
mapping.md
```
, executable in the normalize module.

不会重写或总结内容。无论是标题、正文、CTA标签，还是通过编辑修改大小写。保真≠清理：源网站的无效内容会原样保留并标记，而非修复。
不会创建新区域。每个渲染的插槽都可追溯到内容模型中的插槽；每个模块都可追溯到
```
donor-modules.md
```
或
```
mapping.md
```
中明确的new-module条目。
不会偏离donor令牌。所有颜色、字体、圆角、间距都严格遵循
```
donor-tokens.json
```
。授权的donor字体会作为字体族令牌字符串使用，并带有本地回退，绝不会重新打包。
不会静默丢弃插槽。任何被排除在校验范围之外的内容都需声明为chrome差异或规则集归一化操作——在
```
mapping.md
```
中声明，在归一化模块中可执行。

Stop conditions

停止条件

Donor capture fails (bot-block past the headed fallback, prototypes dir unservable) — surface extract's error verbatim.
Mapping ratio < 80% — the donor vocabulary can't carry this content. Ask: widen the donor capture (more donor pages → more modules) or accept a larger explicit new-module list.
Scope undecidable — the content page's visible content cannot be covered by any selector set (heavy shadow-DOM, iframe-embedded content). Surface with the screenshot evidence.
Figma donor requested — future scope; exact message in § Inputs.

Donor捕获失败（带界面回退后仍被机器人拦截、原型目录无法部署）——原样展示extract的错误信息。
映射比例<80%——donor体系无法承载当前内容。询问用户：扩大donor捕获范围（更多donor页面→更多模块）或接受更大的明确new-module列表。
范围无法确定——内容页面的可见内容无法被任何选择器集覆盖（大量Shadow DOM、iframe嵌入内容）。附带截图证据告知用户。
请求Figma donor——未来规划；展示输入参数部分的确切提示信息。

Outputs

输出结果

Path	Purpose
`stardust/canon-source/`	Donor capture + descriptive DESIGN.md/json (extract `--design-source` , unchanged)
`stardust/reskin/donor-tokens.json`	Curated probe-able token sheet, pinned to one reference page
`stardust/reskin/donor-modules.md`	Enumerated donor module vocabulary (M1..Mn) with screenshot evidence
`stardust/reskin/content-model/<slug>/content-model.json`	Byte-oriented per-page content model (+ source screenshot)
`stardust/reskin/normalize/<slug>.mjs`	Per-page executable normalization ledger (shared capture ↔ gates)
`stardust/reskin/mapping.md`	The mapping brief: every slot → donor module, status, rationale
`stardust/reskin/renderers/<archetype>.mjs`	Programmatic renderers (model in, HTML out)
`stardust/reskin/pages/<slug>.html`	Rendered reskin pages
`stardust/reskin/reports/`	Per-page gate reports + screenshots
`stardust/reskin/ledger.json`	Per-page status, gate results, residuals
`stardust/scripts/reskin/`	Project-local copies of the five skill scripts

路径	用途
`stardust/canon-source/`	Donor捕获结果 + 描述性DESIGN.md/json（extract的 `--design-source` 流程，无需修改）
`stardust/reskin/donor-tokens.json`	可探测的精选令牌表，固定到单个参考页面
`stardust/reskin/donor-modules.md`	枚举的donor模块体系（M1..Mn），带截图证据
`stardust/reskin/content-model/<slug>/content-model.json`	面向字节的每页内容模型（+源页面截图）
`stardust/reskin/normalize/<slug>.mjs`	每页可执行归一化规则集（捕获与校验共享）
`stardust/reskin/mapping.md`	映射文档：每个插槽→donor模块、状态、理由
`stardust/reskin/renderers/<archetype>.mjs`	程序化渲染器（输入模型，输出HTML）
`stardust/reskin/pages/<slug>.html`	渲染后的Reskin页面
`stardust/reskin/reports/`	每页校验报告 + 截图
`stardust/reskin/ledger.json`	每页状态、校验结果、残留问题
`stardust/scripts/reskin/`	项目本地的5个技能脚本副本

References

参考文档

```
reference/donor-sources.md
```
— the three donor types and their capture recipes; pin-one-reference-page;
```
donor-tokens.json
```
and
```
donor-modules.md
```
contracts; the Figma future contract.
```
reference/content-model.md
```
— the capture contract: slot taxonomy, the ordered stream (the render surface), scope-discovery procedure, normalization ledger format, provenance.
```
reference/mapping-brief.md
```
— entry schema, the ≥80% gate, new-module composition rules, casing policy.
```
reference/gates.md
```
— both gates' commands, pass bars, tolerances, failure modes, residual logging.
```
../extract/SKILL.md
```
§ Cross-site brand sources — the
```
--design-source
```
donor-capture path Phase 1 delegates to.
```
../migrate/reference/content-preservation.md
```
— the content rules reskin inherits (and tightens to byte level).
```
../diff/SKILL.md
```
— the pixel + structural probes; reuse them as a supplementary build-side check after Phase 6 deploy,
```
--profile eds
```
.

```
reference/donor-sources.md
```
— 三类donor类型及其捕获流程；固定单一参考页面规则；
```
donor-tokens.json
```
和
```
donor-modules.md
```
规则；Figma未来规则。
```
reference/content-model.md
```
— 捕获规则：插槽分类、有序流（渲染表面）、范围发现流程、归一化规则集格式、来源记录。
```
reference/mapping-brief.md
```
— 条目schema、≥80%校验规则、新模块组合规则、大小写策略。
```
reference/gates.md
```
— 两类校验的命令、通过标准、容差、失败模式、残留问题记录。
```
../extract/SKILL.md
```
§ Cross-site brand sources — 第1阶段委托的
```
--design-source
```
donor捕获流程。
```
../migrate/reference/content-preservation.md
```
— Reskin继承的内容规则（并收紧至字节级）。
```
../diff/SKILL.md
```
— 像素+结构探测工具；第6阶段部署后可作为补充构建侧检查，使用
```
--profile eds
```
参数。",