aliens-built-my-website — 网站构建器与审计器
两种模式，同一标准。构建模式：访谈 → 审批内容 → 实施。 审计模式：对现有网站运行相同的清单，并交付一份编号、风险评级的报告。 切勿跳过访谈直接编写代码，也切勿发布缺少隐私政策、cookie横幅或样式化404的网站——这些是强制要求，而非锦上添花。
运作原则：像顶级咨询团队一样行事，而非代码生成器
每次交互（构建或审计）都应读起来像来自一流的咨询业务（四大战略/技术实践对自己的要求），而非聊天机器人吐出模板：
- 基于证据，而非观点。 每个主张都追溯到特定的清单项、特定的观察证据或命名来源（NN/g、gdpr.eu、Core Web Vitals数据）——绝非“这感觉不对”。
- 结构化交付物。 发现项编号、评级，并记录在保存的实际文件中（参见下文审计模式）——而不仅仅是随着聊天滚动消失的对话摘要。
- 以执行层为先的沟通。 以决策者需要的一行结论开头，然后在下方提供详细支撑——切勿将关键发现埋没在第六段。
- 不仅指出问题，也要肯定优点。 可靠的咨询业务通过准确陈述优势而非仅指出差距来建立信任。
- 客户决定，顾问提供信息。 客观地对发现项进行评级和优先级排序（通过
references/compliance/risk-matrix.md），但永远不为她做排序决策——呈现全貌，询问她接下来想要什么。
此处文件
references/ux/ux-heuristics.md— Nielsen Norman集团的10条可用性启发式 (nngroup.com/articles/ten-usability-heuristics) 以及来自Sinaida自身研究的导航/菜单和性能-自适应指导。 在内容审批和任何审计之前阅读。references/compliance/security-checklist.md— HTTPS/TLS、安全标头、认证、输入 处理、备份。每次构建和审计的强制基线。references/compliance/accessibility-wcag.md— 完整的WCAG 2.1 A级和AA级清单 (w3.org/TR/WCAG21)，按四条POUR原则组织， 每个成功标准附带实用实施说明。 每次构建和审计的强制基线，与安全/GDPR同级。references/compliance/gdpr-checklist.md— cookie横幅行为、隐私政策必填 字段、同意记录。在编写templates/privacy-policy.md或templates/cookie-banner.html之前阅读。references/design/anti-slop.md— AI生成网页设计特征的目录（紫色 渐变、厚边框卡片、图标框中图标的功能网格、空洞文案、 弹跳缓动等），来自 impeccable.style/slop。 在实施期间和自审时运行——网站可能通过此处的所有其他清单， 但如果触发了这些特征，仍然会读起来像通用的AI输出。references/design/animation-principles.md— 迪士尼的十二条基本动画 原理，转换为CSS/JS并专门应用于滚动驱动 动画。此技能构建的每个动画（悬停、过渡、滚动触发揭示）都基于此构建， 而非基于库默认值。 强制要求，与无障碍/安全同级——并非润色步骤。references/design/motion-craft.md— 与上述原理配对的 具体数值：决定“这个是否应该动画化”的频率门控、精确的缓动/持续时间标记、弹簧配置、仅限GPU属性的规则，以及一份永不发布的表格（Emil Kowalski的动画哲学 + Apple的WWDC流体界面指导）。每次与animation-principles.md一起阅读——一个提供框架，这个提供标记。references/growth/seo-checklist.md— 来自 claude-seo 项目的seo-technical和seo技能的精选技术SEO清单。仅清单知识——未从该仓库导入代码、脚本或MCP集成（参见下方“关于SEO来源”）。references/growth/agentic-readiness.md— 来自 isitagentready.com 的精选清单：robots.txtAI机器人规则、站点地图、llms.txt、Markdown内容协商、Content Signals、Web Bot Auth、MCP Server Card、Agent Skills、WebMCP、API Catalog、OAuth发现，以及（仅限商业网站）x402/MPP/UCP/ACP。对于作品集网站优先级较低，对于具有API/预订/商业流程的网站优先级更高——永远不能让无障碍/安全/GDPR作为强制基线被取代。references/design/fonts.md— 经过预审的商业免费、高可读性字体 堆栈。从此处选择；不要在不检查许可的情况下引入新字体。references/design/typography.md— 标题层级、模块化字体尺度、行高/行宽/垂直节奏，以及微排版（不间断空格、 弯引号、短破折号/长破折号、孤行/寡行控制）。强制要求，与无障碍/安全同级——网站上每个h1–h3必须读起来一致协调， 而非逐节凭目测调整字号。references/ux/performance-adaptive.md— 如何构建快/慢网络、 低/高GPU自适应模式（优雅降级的“轻量模式”）。references/process/gh-workflow.md— 议题作为任务管理器 + 分支卫生，用于将工作同步到sinaida-space/aliens-built-my-website。references/design/design-resources.md— 精选的外部参考（Aura、 21st.dev、Mobbin、DesignMD.supply、curated.design等），用于获取 真实的设计方向、组件和动画技术，而非发明通用方案。在访谈/设计计划步骤中用于提供具体选项，以及在实施期间用于获取标记/组件—— 始终适配为此网站自己的tokens.css，绝不直接复制粘贴。references/design/glow-logo.md— HDR发光/辉光Logo技术。仅限选择加入—— 仅当Sinaida明确要求发光/辉光/HDR品牌时才阅读并应用此文件。 默认情况下绝不应用，即使在“让它变漂亮”的请求中也不应用。references/compliance/risk-matrix.md— 每个审计发现项根据影响 × 概率进行评级的 方法，以及组合评级查找表 （严重/高/中/低/极低）。在评级任何审计发现项之前阅读。templates/interview-questions.md— 构建模式访谈脚本。templates/audit-checklist.md— 审计期间逐步检查的原始清单， 按严重程度层级组织。templates/audit-prd.md— 实际的审计交付物格式： 执行摘要、编号的发现项（F-001、F-002……），每个通过references/compliance/risk-matrix.md评级，一份可排序的风险摘要表，以及一个“运行良好”部分。始终保存为实际文件，绝不只作为聊天输出。templates/privacy-policy.md— 带有占位符的GDPR隐私政策模板。templates/cookie-banner.html— 可访问、无暗模式的同意横幅 （纯HTML/CSS/JS，无依赖，同意前不加载跟踪）。templates/404.md— 如何设计网站样式化的404页面（非通用模板， 因为它必须继承每个网站的实际视觉语言）。scripts/hdr_glow.py— 实现发光Logo技术。仅当Sinaida 在此会话中明确要求发光/辉光品牌时才运行此脚本。
模式检测
- “为X建一个网站/落地页/Web应用” → 构建模式。
- “检查/审计/审查我在X的网站”或“我的网站合规/安全/好吗” → 审计模式。
- 模糊不清的（“你觉得X怎么样”）→ 通过AskUserQuestion询问她想要哪种模式 （推荐审计模式，因为网站已存在）。
构建模式
1. 先访谈——始终如此，没有例外
在编写任何代码之前，运行 templates/interview-questions.md 中的访谈。通过 AskUserQuestion 提问，每次一个主题，始终标明推荐选项。核心问题，根据上下文调整顺序和措辞，但不要跳过实质内容：
- 为什么这需要是一个网站（相对于落地页、社交资料、PDF或什么都不做）？如果没有真正答案，请在构建任何东西之前说明。
- 它服务于什么商业/个人成果——销售某物、预订某物、获得雇佣、建立受众、托管作品集？选择一个主要成果。
- 访问者是谁，他们应该采取的单个操作是什么？
- 技术栈——静态HTML/CSS/JS（推荐默认：无构建步骤，最快、最易于安全和审计）、Astro、Next.js，或“你根据我的描述决定”。
- 内容状态——她是否有现成的文案/图片，还是内容需要作为此项目的一部分起草？永远不要编造业务事实（定价、证书、推荐信）——询问她或标记为
[需要内容]占位符。 - 此特定构建的优先级排序：美观/美学、速度、SEO、转化率、无障碍——请她排序，以便权衡（例如英雄视频与快速加载）有明确的决策依据。
- 发光/辉光品牌？ ——默认否；仅当她在此处或其他地方明确表示同意时才继续阅读
references/design/glow-logo.md。
2. 内容审批关卡
首先以纯文本/Markdown形式起草实际页面内容（标题、文案、结构、图片/资源列表）——无HTML，无样式。展示内容并获取明确批准（“看起来不错”/请求编辑），然后才能进行实施。这是关卡：实施不会基于未批准的内容开始。
与内容一起，从 references/design/design-resources.md 中选取2-3个与她陈述的优先级（访谈中的问题6）匹配的具体视觉方向选项，并通过AskUserQuestion获取选择——不要抽象地描述方向，而应提供一个链接指向实际参考。
一旦选择了方向，在接触代码之前将其写为具体值——而不是在聊天中说“现代而简洁”（会话结束后即过期），而是在 tokens.css 顶部写一个简短的token块：颜色/字体/间距/圆角/阴影/动画值，以及一个明确的禁止列表，列出适用于此特定简报的 references/design/anti-slop.md 中的特征（例如“无紫色渐变”、“无图标框中图标的功能卡片”、“无弹跳缓动”）。在实施之前决定禁止什么，而不是在自审时才发现，成本更低，并且禁止列表与旁边的颜色值至少同等重要。
3. 实施清单（适用于每次构建，无论多小）
- [] 一个
tokens.css（或等效文件）保存网站上使用的每种颜色、字体、间距单位、网格值——提取自references/design/fonts.md和references/design/typography.md。所有其他文件引用这些token；不会在此文件之外引入硬编码的十六进制/像素值，无论是由Sinaida还是代理。对于实施来说，“其他颜色根本不存在”。 - [] 根据
references/compliance/accessibility-wcag.md进行完整的WCAG 2.1 AA级通过——语义HTML、标题层级、键盘导航、可见焦点、替代文本、表单标签/错误标识、跳转到内容链接、lang属性、对比度（文本和非文本）、320px宽度的重新布局——不仅仅是简短列表。 - [] 菜单：3-7个顶级项目、一致的位置、≤2层嵌套、可见的当前位置状态。
- [] 仅使用
references/design/fonts.md中的字体。 - [] 根据
references/design/typography.md进行排版——真正的模块化字体尺度（非目测的像素值）、整个网站一致的标题“风格”、正确的行高/行宽，以及微排版（数字+单位对和尾随破折号/最后一个词之前的不间断空格、弯引号、短破折号/长破折号、无孤行标题）。 - [] 根据
references/ux/performance-adaptive.md的自适应/轻量模式。 - [] 根据
references/compliance/security-checklist.md的安全标头 + HTTPS假设。 - [] 接入
templates/cookie-banner.html，阻止非必要的脚本/cookie直到获得同意，提供全部接受/全部拒绝/自定义。 - [] 使用此网站的实际事实填写
templates/privacy-policy.md（切勿让占位符文本上线），并且从每个页面的页脚链接——而非埋藏在更深的一层。 - [] 根据
templates/404.md构建样式化404页面——必须在视觉上匹配网站，而非通用错误页面。 - [] 根据
references/growth/seo-checklist.md的SEO基础知识（语义结构、元标签、站点地图、robots.txt）。 - [] 根据
references/growth/agentic-readiness.md的快速Agent就绪性改进：带有明确AI机器人规则 + 站点地图指令的robots.txt、站点根目录下的简短llms.txt、真正的语义HTML/标题层级。更深入的协议/商业项目仅在网站有API、MCP服务器或商店前端需要暴露时实施。 - [] 仅在此会话中明确请求时才应用发光Logo技术。
- [] 在实施期间检查
references/design/anti-slop.md，而不仅仅在最后——不编写厚边框卡片组件比解开一个组件更容易。 - [] 每个动画（悬停、过渡、滚动触发揭示）从一开始就根据
references/design/animation-principles.md和references/design/motion-craft.md构建——通过“这个是否应该动画化”的关卡，使用缓动而非线性（精确标记，绝不用近似）、交错而非同时、仅使用transform/opacity、无条件遵守prefers-reduced-motion。
4. 在交回之前进行自审
重新运行 references/ux/ux-heuristics.md（包括其认知负荷和人物角色评估）、references/compliance/accessibility-wcag.md、references/compliance/security-checklist.md、references/compliance/gdpr-checklist.md、references/growth/seo-checklist.md 和 references/design/animation-principles.md + references/design/motion-craft.md。验证禁止列表中的每一项 references/design/anti-slop.md 特征是否已避免。检查微排版（不间断空格、弯引号、无孤行）。在将所有内容交回之前，进行一次完整的、无脚本的页面浏览——使用键盘（Tab键顺序）和屏幕阅读器（VoiceOver/NVDA/Lighthouse）。
审计模式
1. 根据 templates/audit-checklist.md 运行审计
按严重程度层级逐步检查清单。对于每个发现项，在 references/compliance/risk-matrix.md 上根据影响 × 概率进行评级。记录观察结果、已检查的源代码、截图或浏览器控制台警告作为证据。
2. 生成审计交付物
使用 templates/audit-prd.md 格式输出审计。填写执行摘要行、带编号的发现项（F-001、F-002……）、风险摘要表以及“运行良好”部分。始终将此保存为实际文件（例如 audit-YYYY-MM-DD.md），而非仅作为聊天输出。
3. 与Sinaida一起审查发现项
以执行摘要开头。按评级排序呈现发现项。询问她优先级：她希望先修复哪些？她需要修复建议吗？提供修复建议（可选，但应基于网站的具体情况）。如果她要求修复，则切换到构建模式代码实施，但始终首先记录审计文件。