站点锻造

Site Forge

<execution_context> 阶段 0 决定运行模式：

• auto (快速): 尽可能自行完成所有事情。在唯一的计划/审批关卡（阶段 3）之后，无需询问即可运行至完成。仅使用你可以免费自行制作的媒体（jina；如果存在的话，使用 MCP/Higgsfield）。如果某一步被阻塞、需要交互或失败——跳过它，继续前进，并在最后将其列在“已跳过/稍后升级”部分。倾向于发布。
• full (最佳质量): 交互式。在任何会显著改变结果的选择上询问用户，并使用最佳的免费媒体，即使这需要用户介入（使用 Google/Gemini 生成图像，使用 Veo 3.1 Fast in Flow 生成视频——将精确的提示交给用户，由他们生成并放置文件）。被阻塞的步骤 -> 请用户介入。

两种模式共有的行为：

• 🟢 自动模式：探索环境、设计、编写代码、提取帧、运行 ffmpeg、本地预览，并在获得批准后进行部署。
• 🟡 两种模式下都有两个强制性关卡：(1) 在构建前进行阶段 3 的计划与批准；(2) 部署本身——在每次部署前必须立即询问，无一例外。 对一次部署的批准绝不等于对下一次部署的批准。默认进行本地预览。
• 🔴 禁止：编造虚假的凭据/密钥；发布用户标记为未经验证的声明（除非加注免责声明）；将用户的秘密输入到表单中。 </execution_context>

0. 在开始其他所有工作之前，先选择 PROFILE。 阅读 references/design-profiles.md 并用一句话说明："Profile: creative-portfolio. Bending display-size ceiling, serif ban, scrim floor, conversion furniture. Craft floor unchanged." 默认是 local-service；creative-portfolio 适用于摄影师、设计师和艺术家；personal-agency 是 Adam 自己的配置。Profile 决定了哪些审美规则生效——craft floor 永不降低，因此 16px 正文、4.5:1 对比度、44px 触控目标、reduced-motion、结构化数据、十六个社交媒体标签和安全头部，无论简报或参考网站如何，都必须遵守。选错 Profile 会导致一个本该展示作品集的网站看起来像贸易公司的网站。

1. 首先阅读 references/page-composition.md（这是区分一个有设计感的页面和一个空洞页面的关键），然后在任何标记之前调用 frontend-design（如果已安装，则直接使用；否则阅读 references/frontend-design.md——该完整技能已逐字打包，因此即使离线也能获得其完整指导）。

2. 调用 design-taste-frontend。 陈述其一行设计说明（"Reading this as: <页面类型> for <目标受众>, with a <风格> language…"）并设置三个旋钮。使用 taste-skill 自身的默认值和预设。唯一的例外：其永久动态效果解锁（MOTION_INTENSITY > 5 时）保持关闭——禁止脉冲、闪烁、浮动、打字机或无限循环。在静态构建中跳过其 React/Tailwind 栈部分。

3. Impeccable 已在运行：其钩子会在每次写入时触发。它的命令是阶段 7 的关卡。

然后使用 references/aesthetics.md 作为主题/排版/布局推演辅助工具。这是反千篇一律的关卡，也是最大的质量杠杆。致力于一个大胆的、特定于简报的方向：

• 一个清晰的美学风格，精确执行；一个独特的有字体组合（避免使用 Inter/Roboto/Arial）；一套作为 CSS 变量使用的协调配色方案。
• 结构——哪些区块、什么层次结构、一个令人难忘的时刻——都从简报中推导而来。不要重复使用上一个网站的形态。
• 哪些能力适合使用，哪些应该放弃（参见参考映射表）。一个简单的简报可能不需要任何高级动效；一个旗舰级项目可能会用到多个。 编写 3-5 行的设计摘要，纳入计划。

Impeccable 的钩子在每次写入时触发。 在其发现出现时就解决它们，而不是堆到最后一次性处理——每个发现要么被修复，要么被明确归类为假阳性并说明理由。绝不要通过内联 suppress 来跳过修复；抑制需要 Adam 的确认。大约 6 次编辑后它会静默以减少噪音，这就是为什么阶段 7 的审计是一个独立的硬性关卡。

单页 vs 多页。 单页网站作为一个独立的 index.html 发布。一个具有不同受众或实质深度的简报（例如，一个包含患者/医生/定价/关于等区块的商业网站，或一个包含科学页面的营销网站）则值得构建一个多页网站——共享一个 Chrome 外壳的多个独立 *.html 页面。由于没有构建步骤，共享模块需要手动复制，因此内容漂移是一个真正的 Bug：确保 <head>（包括防 FOUC 主题代码片段）、导航、页脚和 <script> 标签在所有页面上保持字节级一致，并在部署前通过哈希验证。悄悄偏离规范的页面（不同的字体、丢失的切换开关、死链接）是典型的失败案例。为每个页面设置其自引用的 canonical/og:url + <title>/description，生成 sitemap.xml + robots.txt，并对任何私有/应用原型页面使用 noindex。如果页面数量或共享模块的大小使得手动复制变得脆弱，那么引入一个小的包含步骤（Node concat，或 Eleventy/Astro）是合理的——但仅当简报值得这样做时；默认情况下不使用构建步骤。

然后进行三个机械性关卡，这些关卡都曾捕获过真实的已发布缺陷：

python3 <skill>/scripts/audit-seo.py        # SEO，本地 SEO，安全性。在 HIGH 级别错误时退出代码 1
python3 <skill>/scripts/check-crops.py      # 检查 object-fit:cover 是否丢弃了主体
python3 <skill>/scripts/colour-system.py    # 确保每张照片在整个网站内使用统一的色相处理

并且在真正的浏览器中点击每个交互元素，断言存在状态变化。FAQ、筛选栏和地图面板都曾以完整的标记、完整的 CSS 和根本没有事件处理程序的状态发布过：从源代码看，一切似乎都正常。使用 document.elementFromPoint 在控件自身的中心位置进行点击，而不是使用 .click()，后者会跳过命中测试，即使控件完全被覆盖也会通过。

如果感觉有任何卡顿，请进行 TRACE（追踪），而不是进行采样。 使用 performance_start_trace 然后滚动，再使用 performance_analyze_insight("ForcedReflow") 来定位有问题的函数及其文件和行号。帧率采样有正负十点的方差，会引导你找错问题。参见 scroll-performance.md。

设计栈关卡——硬性要求，在部署之前执行，无一例外：

1. /impeccable critique（UX 审查），然后是 /impeccable audit（可访问性、性能、响应式）。
2. 每个发现都被修复，或者被明确归类为假阳性并说明理由。绝不要内联 suppress。抑制需要 Adam 的确认。
3. 运行 taste-skill 自身的前置检查清单（其第 14 节）。
4. 在 CSS 中搜索 infinite 动画和带色调的 box-shadow，并将两者无效化。这可以捕获我们故意覆盖的那个 taste-skill 设置。

默认是 LOCAL（本地预览）。 在构建目录中使用 python3 -m http.server 8080 进行预览，并在那里迭代。除非用户在此刻要求，否则不要部署——一个线上 URL 仅应在为付费客户或预定的演示时提供，并且每次部署都会消耗 Netlify 积分（对一个网站进行了 38 次部署就耗尽了月度配额并迫使用户付费升级）。将所有待处理的修复分批整合为每次审查轮次一次的部署。

移动端质量控制推迟到首次真实部署时进行——无法在本地完成，自动化浏览器也无法模拟真正的移动视口。计划在演示时进行专门的移动端检查，而不是假装之前已经验证过。

绝不要部署项目根目录。 netlify deploy --dir 不会遵守 .netlifyignore 文件，将根目录部署一次就曾导致整个站点网络公开了客户的家庭住址和一个跟踪器的密码。请每次都构建一个明确的发布目录并验证在线内容：

python3 scripts/make-dist.py .        # 仅发布 Web 文件，排除 .py/.md/package.json
netlify deploy --prod --dir dist
scripts/verify-published.sh <host> [owner-street-name]   # 必须输出 "clean"；非零退出码 = 信息泄露

当用户确实批准时，使用 scripts/deploy-netlify.sh 进行部署（references/deploy.md）——Netlify 是最后安装的唯一组件；如果网站包含表单，则启用 Forms（ignore_html_forms）+ 通知钩子。然后默认设置 Cloudflare Web Analytics（用户通常希望这样）：为已部署的主机名请求一个 Beacon Token，在 </body> 前注入代码片段，不要使用 SRI（Cloudflare 会轮换 token —— 这是有文档记录的例外情况），然后重新部署。在 auto 模式下，将其作为一个"需要用户参与"的项提出，并附带确切的主机名。详情见 references/deploy.md。 报告线上 URL、已使用的内容，以及（在 auto 模式下）"已跳过/稍后升级"列表。

参考映射表

…

[已截断以进行翻译]