网站升级 是做什么的？
一种将看起来拼凑而成的网站转变为所有者引以为豪的展示作品的方法。该方法源于真实成功升级的案例，并且得到了所有者及其团队的高度评价：一个移动应用的营销网站、一个B2B云公司网站（经过两次完整的改版方向迭代），以及一个从零构建的帮助中心。复用方法、配方和陷阱。永远不要复制外观：每个网站都从其自身的品牌、产品和受众中汲取方向。
“完成”的标准
升级完成当且仅当以下所有条件成立：
- 网站上的每个声明都可追溯到你可以指明的来源：产品代码、法律文本、计费系统，或者所有者的书面回答。
- 设计源自品牌自有材料，并且其创意未能通过竞争对手测试（direction.md）。
- 一到两个访客观看或操作的标志性时刻；其他所有内容都是克制的。
- 没有任何内容需要通过动效才能看到。当启用减少动效时，显示最终状态。
- 在真实浏览器中，已按 1440、1920×710、390 和 320 px 的宽度，在所有主题下，启用减少动效，并在生产构建上检查过。
- 你的书面批评评分达到 9/10 或更高，或者你的报告明确指出不足之处（critique.md）。
- 以团队可审查的 PR 形式交付，并附带可粘贴的简短更新。
基本规则
- 真相优先于设计。 每个功能、数字、价格、发布日期以及社交证明，都必须有可追溯的来源。产品自己的引导流程和付费墙文案经常会夸大承诺：在代码中检查它。“未知”是有效答案：将字段设为可选并询问，切勿填入看似合理的数字。删除虚假的证明。
- 品牌决定外观。 调色板、字体和标志性元素都必须源自品牌自有材料：标志、名称、产品 UI、视频、场所。只有当品牌材料或所有者将其放在那里，并且方向合同明确命名时，才允许使用看起来像是生成的内容的装置（tells.md）。
- 产品是主角。 真实的 UI 和真实的产品效果胜过图标、库存 3D 和抽象概念。演示应该看起来像真实的东西：真实的 A4 发票、真实的渲染模板、真实的目录。
- 一个网站，不是幻灯片。 避免使用一堆居中的标题加图片块，每个块都淡入。使用构图、固定滚动故事、分层深度、交互式演示和状态驱动的动效。
- 永远不要将内容隐藏在动效后面。 如果揭示动画从未触发，就会留下空白页面。通过显示最终状态来尊重
prefers-reduced-motion。 - 所有者参与其中，但不碍事。 在完整构建之前展示方向。先做首页，待其获批后再扩展到其他页面。每个悬而未决的问题只问一次，并附带选项，围绕它继续构建。
- 配置保存值。 环境变量携带 URL、ID 或令牌，而不是开/关开关或硬编码的常量。从它们推导出依赖值。只提交
.env.example。 - 遵循目标仓库。 阅读其 README、CONTRIBUTING、AGENTS.md 和 commitlint 配置。使用其包管理器。匹配其框架版本（Next 14 vs 16, Tailwind 3 vs 4, React 18 vs 19）。
- 保密和内部信息。 切勿打印、提交或回显所有者粘贴的令牌。公开的提交和 PR 不得包含客户名称、私密价格或未修复的安全漏洞。
- 评分低于 9/10 绝不宣布完成。 在报告之前，根据截图评分。在宣布“完成”后给出 6 或 7 的自我评分，是遗漏工作的迹象。
首先，选择模式
访客的目的决定了设计可以走多远。一个项目可以在不同模式下包含多个表面；为每个表面指定其模式。
| 模式 | 表面 | 访客 | 主导 | 阅读 |
|---|---|---|---|---|
| 劝说 | 产品、营销、公司、活动、定价 | 决定并行动 | 产品自我证明；第一个屏幕上的真实操作 | building-blocks.md |
| 阅读 | 帮助中心、文档、更新日志、博客 | 理解某些内容 | 读者的问题；品牌拥有框架，但从不拥有阅读列 | read-mode.md |
| 体验 | 作品集、展示、画廊 | 探索作品 | 作品本身，从第一个视口开始 | building-blocks.md § 体验 |
即使产品营销网站展示了应用，它也属于劝说模式。即使帮助中心非常美观，它也属于阅读模式。
工作流程
按顺序完成各个阶段。在进入某个阶段时阅读其参考资料，而不是之前。
| 阶段 | 操作 | 阅读 |
|---|---|---|
| 0. 启动 | 从默认分支创建分支，启动开发服务器（记下实际端口），为报告捕获“改造前”截图 | verification.md § 1 |
| 1. 发现 | 审计网站，查找真相来源，编写声明分类账和主题清单，收集品牌材料，报告发现 | discovery.md |
| 2. 方向 | 找到创意并通过竞争对手测试，设置调色板和字体，选择标志性时刻，编写方向合同，展示它 | direction.md, tells.md |
| 3. 静态构建 | 令牌、英雄区域、带有真实内容的每个幕、内部页面。在脑海中关闭动效 | building-blocks.md, media.md, read-mode.md |
| 4. 动效与标志性元素 | 一个编排好的出场、状态驱动的时刻、标志性元素。只有在其值得时才使用 3D | motion.md, three-d.md |
| 5. 联系与转化 | 共享验证、表单、边缘路由、设计好的通知邮件、预订或潜在客户预填充 | contact-email.md |
| 6. SEO 与标准 | 服务端渲染、元数据、社交卡片、结构化数据、爬虫文件、HTTP 头。作为独立的 PR 提交 | seo-standards.md |
| 7. 验证与批评 | 在每个宽度和主题下进行浏览器循环、脚本化检查、生产构建，然后进行评分批评，最多三轮 | verification.md, critique.md |
| 8. 交付 | 提交、PR、团队更新、改造前后报告、DESIGN.md、记忆笔记 | delivery.md |
每当出现异常行为时，请检查 gotchas.md。每当所有者反馈时，阅读 feedback.md：它将所有者说的话（“不够刺激”、“颜色失调”、“廉价复制品”）转化为需要改变的内容。
如果安装了设计方向技能（frontend-design、impeccable、taste-skill），在阶段 2 加载它以获得更多可能性。此技能在无此技能的情况下也能独立运行。
技术栈。 这些配方已在 Next.js、React、Tailwind 和 GSAP 上交付，托管于 Cloudflare Pages，并且代码片段显示了该技术栈。该方法、检查项和大多数脚本不依赖于该技术栈：在 Astro、SvelteKit、Nuxt 或纯 HTML 上，遵循规则并根据目标框架及其版本转换配方。
脚本
从目标仓库的根目录运行。<skill> 是此技能的文件夹。
node <skill>/scripts/slop-scan.mjs [dir] [--json] [--strict] [--allow <rules>] [--list-rules]：扫描源码以查找生成式网站的痕迹、虚假证明、通用文案、死链接、秘密和已知陷阱。出错时退出码为 1（或在--strict模式下出现警告时退出）。使用site-upgrade-allow: <rule> <reason>注释（覆盖它下方到下一个空行的行）或仓库根目录下的.site-upgrade-allow文件来命名一个特例。需要 Node 18+，无依赖。<skill>/scripts/ssr-audit.sh <base-url> [path]...：针对每个页面（未提供路径时为站点地图中的每个页面）：状态码、<h1>数量、JSON-LD 块、canonical 链接、社交图片、客户端渲染降级以及标题；然后是安全标头和爬虫文件。当页面失败时退出码为 1。针对生产服务器运行。<skill>/scripts/video-prep.sh <source> <out-dir> [name] [poster-second]：将场景切割打印为章节候选，并编写无声的 web 编码，在每个切割处带有关键帧、一张海报和一个方形预览片段。回退到imageio_ffmpeg二进制文件。<skill>/scripts/playwright/*.js：用于 Playwright MCP 的browser_run_code_unsafe工具。MCP 只能读取工作空间内的文件，因此请先复制它们（mkdir -p .playwright-mcp && cp <skill>/scripts/playwright/*.js .playwright-mcp/）并传递filename: ".playwright-mcp/<name>.js"。将.playwright-mcp/排除在 git 之外。reveal-scroll.js滚动页面，以便在截图前触发所有揭示动画，然后列出之后仍然隐藏的文本。page-audit.js测量框架：一个<h1>、超过两行的标题、小号文本、小的触摸目标、未命名的控件、没有alt的图片、未命名的部分以及无主题的浏览器表面。overflow.js查找导致从 320 到 1440 px 水平滚动的原因，并命名最外层的罪魁祸首。console-scan.js访问站点地图中的每个 URL，并报告控制台错误、页面错误、失败请求、4xx/5xx 和 CSP 违规。
资源和模板
复制到目标仓库或草稿板并进行修改：
assets/render-email.ts：在无需react-dom/server的情况下将 React Email 模板渲染为 HTML，适用于边缘路由。assets/JsonLd.tsx：一个可安全嵌入的 JSON-LD script 标签。assets/ScrollTriggerRefresh.tsx：在页面高度发生变化时重新测量 GSAP 滚动触发器。assets/templates/claims-ledger.md：已交付、未交付、未知和数字，每个都带有来源（阶段 1）。assets/templates/direction-contract.md：主题、创意、自有世界、第一个视口、标志性元素和品牌例外（阶段 2）。assets/templates/critique-round.md：评分的批评，每个轮次一个块（阶段 7）。assets/templates/DESIGN.md：构建的设计系统，在最后编写，以便后续的代理保持品牌一致性（阶段 8）。assets/templates/team-update.md：可复制粘贴到团队聊天的更新（阶段 8）。
所有者检查点
在发布任何依赖它们的代码之前，确认以下事项。只问一次并附带选项；不要耽误构建：
- 上线状态和商店可用性，从在线商店列表中获取，而非环境标志
- 价格和套餐，及其来源
- 任何人都还无法找到来源的数据（正常运行时间、数据中心、客户数量）：在有人签字确认之前，将其省略
- 联系收件箱，以及一个所有者可以查阅用于测试的收件箱
- 任何列表、目录或轮播中尚未发布的项目
- 法律实体名称、地址和电话，在其出现的所有地方必须一致
- 任何会接收访客数据的第三方（分析、嵌入、字体、邮件），以及其所需的隐私政策条款
- 任何吉祥物、3D 模型或视频的源文件，在重建之前获取
- 每个生产步骤：域名、DNS、部署设置、迁移。由所有者运行或批准