Demo Website

Demo Website 是做什么的？

一次运行即可将潜在客户从“是的，我想看看”转变为实时的重新设计，以及等待在 Drafts 中的回复。用户粘贴 URL 或名称；其余所有内容都会被自动找到，无需询问。在整个运行过程中，创意方向被授权委托：不要因等待访谈答案或审批而停止。

参考构建： 当你完成一个满意的演示后，将其保留为参考。阅读它的 BRIEF.md 并复制其结构（site.css、site.js、pages.css、home.css、home.js、lab/）作为起始骨架。切勿复制其设计：指纹门禁止这样做。

每个演示的固定规则

• 保留： Logo、每张照片、每个文案词、每个页面以及每个页面内的部分顺序。错别字保持不变。导航标签保持不变。CTA 标签保持不变。
• 更改： 所有视觉元素。布局、字体、颜色使用、动效、交互。
• 每个页面都要重新设计，而不仅仅是首页。每个原始页面一个 HTML 文件，使用相同的 Slug（cleanUrls 保持 /services 正常工作）。
• 允许的添加： 仅限最小的 UI 微文案（表单状态行、输入占位符、aria 标签）。不要添加新的营销文案，不要虚构数字。
• 内部规则优先于任何参考（根据自己的口味编辑此列表）：明亮调色板搭配客户自己的强调色，品牌 + 所有者照片 + 所有服务在首屏中可见，粘性头部始终可见，Logo 点击返回顶部（在首页上平滑滚动），无侧边栏，任何地方都不可见 em dash，仅使用客户自己的照片（除非用户要求，否则禁止生成）。
• 部署到 Vercel 生产环境，无需询问。电子邮件仅限草稿。

第 0 步 · 识别潜在客户

1. 如果用户提供了名称而非 URL，并且你维护了 CRM：在 CRM 中查找该潜在客户的网站、城市、语言、外发邮箱以及回复状态。如果潜在客户不在 CRM 中，则基于 URL 工作，不询问任何问题；草稿步骤将说明需要使用哪个邮箱。
2. Slug：域名主干，例如 acmecoaching。构建文件夹：demos/<slug>-scrollcraft/。Vercel 项目：<slug>-redesign。演示 URL：https://<slug>-redesign.vercel.app（使用连字符，永远不要用点：带点的子域名不存在，死链接是此流水线中最昂贵的错误）。
3. 电子邮件名字：来自潜在客户的电子邮件签名、网站关于/联系页面或域名（“janecoaching” → Jane）。如果确实未知，则省略（“Bonjour,” / “Hi,”）。

第 1 步 · 捕获整个现有网站

所有内容都放入 <build>/_src/（原始资源）和 <build>/lab/（笔记、截图）中。

1. 获取首页并读取导航链接和页脚链接以列出每个页面。获取每个页面。
2. 按顺序提取每个页面：章节、标题、段落（包含粗体/斜体范围）、列表、按钮及其目标、图像（全分辨率 URL；对于 Squarespace 附加 ?format=2500w，对于 Wix 去除 /v1/fill/... 变换）、表单（字段标签、必填标志、提交标签、成功消息）、嵌入式视频。Squarespace 将表单定义保存在 data-block-json / formFields 中。
3. 下载 Logo（所有变体：深色、浅色、favicon）、每张照片、每个纹理。使用 cv2.findContours + approxPolyDP 在 Logo 的 Alpha 通道上矢量化简单的几何 Logo 为 SVG；对于复杂标记保留 PNG。
4. 品牌 Tokens：来自网站 CSS 变量的强调色/墨水色/背景色、标题和正文字体。当字体是 Typekit 或自定义时，选择最接近的 Google 字体。
5. 每个在线页面的全页截图（scripts/full.mjs <live-url> 1440 900 lab/live <pages>）并读取它们：这就是你必须保留的结构。

第 2 步 · 使用 scroll-craft 设计

如果你有设计研究技能，请加载它，然后使用 scroll-craft（https://github.com/nateherkai/scroll-craft），并从头到尾遵循 scroll-craft，使用以下覆盖项：

• 简报是在明确的创意授权下自行撰写的（用户的常设指令就是此技能）。编写 BRIEF.md，包含：上述固定规则、第 1 步的证据、八个撰写的主题、具有真实约束的命名语法、感觉曲线、一个峰值、告知他人的句子、标志性动作、评分表以及每个内部页面的简短计划。
• 针对你的 scroll-craft 工作区 FINGERPRINTS.md 运行指纹门（每行 6 项中的 4 项）。阅读最近每行的“下一个构建必须避免的内容”行。标志性动作必须来自该品牌（其 Logo 几何、其标语、其自己的照片），而不是来自上一个构建。
• 结构由客户固定，因此语法和设备改变相同部分的行为方式，从不改变存在哪些部分。
• 原生引擎（scrollcraft.js/.css 保持原样复制），纯多页 HTML，页面本地 JavaScript 用于特定场景。

第 3 步 · 构建

• 共享：site.css（Tokens、头部、菜单、页脚、按钮、框架、入口）、site.js（挂载引擎、头部状态、菜单、Logo 返回顶部、入口、表单）、pages.css 用于内部页面、home.css/home.js 用于首页的特定场景。
• 使用一次性脚本搭建内部页面脚手架是可以的；之后 HTML 文件就是源文件。在 BRIEF.md 中说明这一点。
• 联系表单：mailto: 交给客户地址，使用 method="post"、验证和状态行，明确说明邮件应用会打开，并且在用户按下发送之前不会发送任何内容。永远不要假装成功。
• 商店和预订工具：链接到客户现有的产品/预订页面。

已经花费过一轮的陷阱

• 永远不要在 [data-sc-stage] 元素上设置 position。 引擎使其为 sticky；CSS 中的 position: relative 会无声地杀死所有 pin。
• 峰值必须保持页面上最大的 data-sc-span。如果首屏变大，则相应地增大峰值。
• 来自一张照片的分层首屏：使用 DP 边缘路径追踪每个轮廓（先粗略渐变，然后在精细渐变上细化），在下一个轮廓下重建每个板块（天空：拟合垂直渐变；远距离雾霾：每列扁平颜色；纹理斜坡：镜像平铺约 110px），清除追踪线上方的残留暗点，然后查看最终滚动位置：接缝只在行程结束时显示。
• 人物抠图：使用 rembg u2net_human_seg，将蒙版侵蚀约 2px 并去污染边缘颜色，否则原始墙壁会显示为光晕。在前景平面或基础带隐藏裁剪处进行裁剪。
• 任何带有 white-space: nowrap 的内容在网格内都会破坏手机布局；让按钮在 520px 以下换行，并使用 minmax(0, 1fr)。
• 倾斜的装饰块在手机上会溢出视口：在其部分上使用 overflow-x: clip。
• 替换的图像在手机上会将旧字节保留一周（/assets 缓存头）：新图片应获得新文件名（-v2）。
• .prose p { margin: 0 } 优于 .prose > * + *；将间距规则写为 .prose > * { margin: 0 } .prose > * + * { margin-top }。

第 4 步 · 验证

本地服务（node <scroll-craft>/scripts/serve.mjs --root . --port 4610）并使用此技能的 scripts/snap.mjs / scripts/full.mjs。两者都会从运行它们的文件夹或其任何父文件夹解析 playwright-core，因此在项目根目录执行一次 npm i playwright-core 可覆盖其下的所有构建。

• 桌面端 1440x900，在每个固定动作的几个位置，手机端 390x844 和 360x640，减少动效模式。读取每个工作表；修复并重新截图。
• 每个内部页面在 1440 和 390 下的全页截图：无溢出，无裁剪文本，无空网格单元格。
• scroll-craft 测试框架：无死滚动，无控制台错误，无失败请求。
• 在合成像素上测量文本在图像上的对比度（隐藏文本，读取其下方的像素）；正文字体 4.5:1，大字体 3:1。
• 功能：端到端标志性交互、表单验证消息、菜单打开/Escape/焦点、Logo 返回顶部、来自首屏服务的锚点。
• 在构建中搜索 em 和 en 破折号（U+2014, U+2013）：零可见。

第 5 步 · 发布

1. vercel.json：cleanUrls，buildCommand: null，outputDirectory: "."，/assets 的 7 天缓存。.vercelignore：lab/ _src/ node_modules/ BRIEF.md。
2. vercel link --yes --project <slug>-redesign 然后 vercel deploy --prod --yes。
3. 对你将发送的确切 URL 进行冒烟测试：每个页面 200，关键资源 200，lab/ 和 BRIEF.md 返回 404，一次现场浏览器加载无控制台错误。
4. 在构建中创建 Git 仓库（git init -b main），使用 -F <file> 提交（绝不能用 PowerShell here-string），gh repo create <github-user>/<slug>-redesign --private --source . --push，vercel git connect --yes。后续编辑：提交并推送到 main，将触发重新部署。保持演示仓库私有：它包含潜在客户的 Logo、照片和文案。
5. 将指纹行附加到你的工作区 FINGERPRINTS.md（所有六个维度：世界、端口、调色板、类型、共享内容、下一个构建必须避免的内容）。

第 6 步 · 草拟回复

python scripts/draft_demo_reply.py <prospect-email> --mailbox <alias> --url https://<slug>-redesign.vercel.app --first-name <FirstName>

它会检查 URL 是否正常响应，在发件邮箱中找到潜在客户的最新邮件，使用该联系人的语言（--lang fr|en）渲染“这是演示”模板，附加该邮箱的签名，将线程式草稿保存在该邮箱的 Drafts 文件夹中，并读取回来。它永远不会真正发送。如果关于线程的任何内容看起来不寻常，请先使用 --dry-run 运行。邮箱在 .env 中配置（参见 .env.example）。

当潜在客户从与你写信的地址不同的另一个地址回复时（例如从个人邮箱而非 info@），请使用 --to <their-address> 传递：回复将从该发件人查找，草稿也将发送到该地址。某些 IMAP 服务器仅在整个地址上匹配 FROM 搜索；域名片段将不返回任何结果。

当连接了 CRM 时（DEMO_CRM_DIR，参见 README），<prospect-email> 可以是 CRM 解析的任何内容，邮箱和语言来自联系人，脚本会记录潜在客户的回复和演示 URL。

在最终消息中显示草稿文本。告诉用户何时发送，以便将演示标记为已发送。

最终报告（简短）

Live URL（确切的那个）· 已重建的页面 · 两行的设计理念 · 一行的标志性动作 · 少量的微文案添加 · 验证了什么以及未验证什么（真实手机、Safari） · 草稿（邮箱、线程、全文） · 构建文件夹的本地路径。