网站改版时，Agent 别临场发挥

Alfred-Lau/skills（Site Skills）面向网站产品：从创意定稿到忠实还原、上线门禁与增长迭代。安装编排对齐 mattpocock/skills（小而可组合、一次 setup、/ask-site 路由）。通用工程（TDD / 架构）请另装 Matt 的 skills 组合使用。

你卡住时为什么需要它

模糊想法直接开写，做完才发现品牌/信息架构不对
还原阶段临场改设计，和设计稿越差越远
上线缺 a11y/perf/SEO/ship 门禁
上线后转化差，只会大爆炸式改版

这套 Skills 把上述链路收成可复用流程，与 mattpocock/skills 互补。

设计原则

Brand-first / hero budget / one composition：首屏是一幅品牌构图，不是仪表盘
Faithful restore：按 page-spec + tokens 还原，禁止发挥型美化
Conversion loop：增长以可验证假设为单位，不做大爆炸式改版
例外要留痕：硬规则没有静默破例；确需破例写进 DIRECTION.md 并说明何时退役

快速安装

skills.sh / 其他 Agent

在目标网站仓库根目录执行：

npx skills@latest add Alfred-Lau/skills

按提示勾选 skills 与目标 Agent。务必勾选 setup-site-skills 和 ask-site。

想本地改写 Skill 文件时也用同一条命令（会写入仓库）；之后可用：

npx skills update

按需拉取上游更新。

Claude Code Plugin（可选）

本仓库自带 .claude-plugin/marketplace.json，但尚未收录进 Claude 官方 marketplace，需先添加 marketplace：

claude plugin marketplace add Alfred-Lau/skills
claude plugin install alfred-site-skills@alfred-lau

或在会话内：

/plugin marketplace add Alfred-Lau/skills
/plugin install alfred-site-skills@alfred-lau
/reload-plugins

插件方式是只读订阅；想直接改 Skill 文件请用 npx skills add。不要两种都装，否则每个 Skill 会出现两份。

首次配置

安装后在 Agent 中执行一次：

/setup-site-skills

它会询问并写入：

站点文档根（默认 docs/site/）
设计源、技术栈、issue tracker
分析工具与视觉 QA 方式
前端构图硬规则（还原 / QA 对照）

完成后会有 docs/agents/*，以及 AGENTS.md 或 CLAUDE.md 里的 ## Agent skills 段。

主线流程

不确定用哪个时，先问路由器：

/ask-site

一次完整建站 / 大改版，建议顺序：

/brief-site          →  docs/site/BRIEF.md
/brand-voice         →  BRAND.md
/information-arch    →  IA.md
/visual-direction    →  DIRECTION.md
/design-system       →  TOKENS.md + 代码里的 CSS 变量
(/ui-prototype)      →  视觉问题说不清时再用
/page-spec           →  pages/<slug>.md
/implement-ui        →  按规格忠实还原
/visual-qa           →  对照规格打分
/ship-checklist      →  上线门禁（可叠 a11y/perf/seo）
/instrument          →  TRACKING.md + 埋点
/grow-loop           →  观察 → 假设 → 小改 → 验证

用法提示：

brief 到 page-spec 尽量留在同一会话，避免丢失对齐上下文
每个 /implement-ui 适合新开会话（或先 /site-handoff）
产出默认落在 docs/site/（setup 时可改）
还原以 page-spec + tokens 为准，不要临场改设计

技能速览

阶段	Skills	作用
Meta	`ask-site`, `setup-site-skills`, `site-grilling`, `site-handoff`, `site-wayfinder`	路由、配置、审讯、交接、迷雾规划
Design	`brief-site`, `grill-site`, `brand-voice`, `information-arch`, `visual-direction`, `design-system`, `ui-prototype`, `copy-pass`, `design-critique`	创意与设计定稿
Build	`page-spec`, `implement-ui`, `port-page`, `visual-qa`, `responsive-pass`, `a11y-pass`, `perf-pass`, `ship-checklist`	还原、跨项目移植与上线门禁
Grow	`instrument`, `grow-loop`, `seo-pass`, `conversion-audit`	埋点、增长、SEO、转化审计

常见开场

你的情况	在 Agent 里输入	接下来
新站点，从零开始	`/brief-site`	按主线往下走
只有模糊想法、还没仓库	`/grill-site`	有仓库后再 `/brief-site`
大改版 / 路径不清	`/site-wayfinder`	决策清晰后 → `/page-spec`
设计已定，只要还原	`/page-spec`	→ `/implement-ui` → `/visual-qa`
跨项目高精度移植页面	`/port-page`	探测 → 规划 → 转换 → parity
看起来差一点	`/visual-qa` 或 `/design-critique`	修完再 `/implement-ui`
准备上线	`/ship-checklist`	缺口 → 修复
上线后转化差	`/conversion-audit` → `/grow-loop`	最小改动
SEO 有问题	`/seo-pass`	修复或回头改 IA

Demo 与机械校验

仓库内 demo/ 已按主线跑通一个 tracer landing：

cd demo && pnpm install && pnpm dev

改完 Skill 或模板后可跑一致性检查：

pnpm check

覆盖 plugin 清单登记、模板相对链接、硬编码颜色、断点一致性等 prompt 层容易漏掉的问题。

在本站中的定位

与 mattpocock/skills 互补：Matt 管通用工程，本文管网站产品交付；可同仓安装、按场景路由。

你现在可以做的下一步

安装并执行 /setup-site-skills。
不确定入口时先 /ask-site；有站点目标则从 /brief-site 或 /page-spec 进。
成功判据：docs/site/ 下出现 BRIEF/DIRECTION 或 page-spec，且一次 /implement-ui 不以临场改设计收场。

参考链接

仓库：https://github.com/Alfred-Lau/skills
skills.sh：https://skills.sh/Alfred-Lau/skills
编排参考：mattpocock/skills