template-distilllisted

Distill a style pack (visual contract + prototype-side golden page + parity checklist) from one of three sources — a running legacy Vue system, UI design deliverables (images/text/low-quality HTML), or high-quality static prototype pages. The style pack becomes the single source of truth for a new prototype/Vue skill family (prototype-site / prototype-vue3-framework / prototype-to-vue3 style-bound layers). Use when a new page style needs to be turned into templates, when extracting design tokens from an existing system, or when preparing input for template-calibrate.
xiaofengche123/prototype-validation-service · ★ 1 · Web & Frontend · score 69

Install: claude install-skill xiaofengche123/prototype-validation-service

# Template Distill (模板提炼) Extract a **style pack draft** from a style source. The pack's `contract.md` is the single source of truth every downstream style file is derived from. This skill produces the prototype-side projection and golden page; the Vue-side projection and family instantiation belong to `template-calibrate`. ## Resources - Copy `assets/contract-template.md` to start the visual contract.（三路径通用） - Copy `assets/parity-checklist-template.md` to generate the numeric parity checklist.（三路径通用） - Copy `assets/pack-changelog-template.md` as the pack `CHANGELOG.md`.（三路径通用） - Use `assets/measure-tokens.js` in the browser console to harvest computed styles.（**仅路径 A**，路径 B/C 可忽略） - Use `assets/golden-page-review-card.md` for the executor confirmation gate.（三路径通用） - Read `references/manual.md` for full walkthrough cases of all three paths. - The structural/IR/naming conventions of the target family are defined by the existing skills (`prototype-site` structure classes, `interaction-ir.md`, English page codes); this skill reuses them, never redefines them. - ⚠️ **使用前确保本 skill 已注册到 `.claude/skills/`**（Windows: `mklink /j` 目录联结，Mac/Linux: `ln -s` 软链接）。仅放在 `skills/` 目录不会被系统识别。 ## Output Layout (fixed) ```text kimi-skill-project/style-packs/<pack-id>/ contract.md # visual contract, single source of truth prototype/ app.css # prototype-side projection of the contract page-template.html # business page template (structure fr