本地门面展示站

Vitrine 行动手册

Vitrine（展示型网站）是面向本地企业的业务展示（宣传）网站：几个页面回答“您做什么、为谁做、多少钱、我能信任您吗、如何联系您”。用户从Google或推荐链接进入，在几秒钟内做出决定，如果必须费力寻找信息就会离开。本行动手册说明了要构建什么以及按什么顺序构建；领域技能包含了详细的规则。

方向门

在为新的页面、屏幕或重新设计编写任何代码之前执行此操作，即使请求只有一行。本技能的其他部分用于消除错误；它不提供屏幕特征。如果跳过，结果将是每个模型都会生成的中位数页面：细节准确，但无人拥有。

1. 五行。产品：做什么，为谁做。特征：两到三个具体的词（例如“平静、精确、略带温暖”），永远不要用“干净、现代、时尚、极简、高级”。世界：产品所属的地点或材料；它会影响中性色调并确定强调色。时刻：一到两个获得丰富色彩和细节的地方：对于本地企业，通常是工作的真实照片或人员，或像行业使用的印刷文档一样设置的价目表。签名：只有这个产品才有的一个小细节，并一致地使用。 一个时刻需要精心绘制，而不仅仅是清理：为了表达它必须说的内容而重新绘制的图表（平滑的线条、镜像比较、真实比例），或产品自身的物体，带有重量和光影呈现。
2. **清单，然后是想法。**列出8到12个竞争对手没有分享的内容（名称、街道、简报中的数字、材料、工具、仪式、行业打印的文档）。写下：“在此页面上，[一个项目] 成为 [那个装置]”。那个装置就是时刻。
3. 拒绝二阶默认值，除非品牌已经拥有它们。它们是在明显的提示被禁止后，模型会默认使用的内容：
   • 奶油色、石色或暖白色页面，搭配烧橙色、赤陶色、鼠尾草色或森林绿强调色，带或不带衬线标题（“纸墨”外观已成为新的默认值，而非方向）；
   • 默认使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作为标题字体；system-ui 作为唯一的字体；
   • 白色背景上的 Inter 或 Geist，搭配一种靛蓝或蓝色强调色；
   • 英雄区、服务、评价、服务区域、联系，按此顺序，没有任何理由；
   • 一个居中的眉题、标题和两个按钮作为整个首屏。
4. **互换测试。**用竞争对手的名称和行业替换本页面的。如果页面仍然适用，则更改主张、时刻和签名，然后再次测试。
5. **展示并等待。**展示五行和想法，然后等待所有者。如果您无法询问（用户说直接构建，或者您在没有人的情况下运行），请将它们作为注释写在主文件顶部，并完全按照注释构建。

深度：anti-slop 行动手册第2节（方向）和第12节（应用屏幕）；design-inspiration-index 技能用于真实参考。

Vitrine 需要什么

1. **每个页面一个清晰的报价。**首屏用简单的语言说明销售什么、向谁销售、在哪里销售，并提供一个主要操作。跳过其他所有内容的读者仍然能知道。为不同服务设置单独的页面，胜过将所有东西都放在一个页面上销售。
2. **价格或“起价”。**买家会进行比较。一个起始价格及其包含的内容可以过滤掉无效线索并建立信任；仅“联系我们获取报价”会让人们转向发布价格的竞争对手。说明哪些因素会影响价格。将金额保留在一个数据文件中，以便每个页面和结构化数据保持一致。
3. **一步完成预约或联系。**在每个页面上显示可见的电话链接和一个简短的表格或预约链接。只询问回复所需的信息（姓名、联系方式和需求）。告知他们何时会收到回复。发送后给出清晰确认。在移动端支持点击拨号。
4. **证明。**带有结果的实际项目、带有姓名和日期的真实评价（或链接到它们的链接）、仅在得到许可时使用标识。少量具体的证明胜过许多模糊的证明。不要使用库存照片团队或虚构的推荐。
5. 本地SEO基础。
   • 每个值得排名的服务区域一个页面，每个页面都有真正的本地内容（不仅仅是替换了城市名称的相同文本）。
   • 包含名称、地址或服务区域、电话、营业时间和与发布价格相匹配的价格范围的 LocalBusiness（或更具体的子类型）JSON-LD。仅在规范页面上添加 FAQPage。
   • 一个完整的 Google Business Profile：与网站相同的名称、地址和电话号码、类别、营业时间、照片、指向正确页面的链接，以及回复评价的习惯。
   • 每个页面一个 h1，描述性标题和元描述，两种语言的 hreflang，网站地图，可读的 URL。
6. **速度预算。**本地访客使用普通连接速度的手机访问。预加载 LCP 图像并正确调整其大小（使用现代格式、明确的宽度和高度）；字体自托管（一到两个字体家族，设置 font-display，子集化）；没有繁重的3D效果、视频背景或用于装饰的大型 JS 库；第三方脚本只有在其值得时才加载。内容在加载时即呈现。目标是在移动设备上 LCP 低于 2.5 秒，并使用真实的网络节流进行测试。
7. **当市场需要时，提供法语/英语双语。**每种语言一个消息源，具有相同的结构和内容对等性，一个可见的语言切换开关，保持当前页面，本地化 URL 和 hreflang。法语副本通常长约20%，因此布局必须能够适应。对每个法文字符串应用 french-typography 技能，并添加其 CI 防护。
8. **魁北克：25号法律。**在魁北克收集任何个人信息的网站（一个联系表单就足够了）需要运行 loi-25-website 技能：隐私政策、显示负责人、收集时的通知、默认关闭跟踪、审查魁北克以外的工具。将其视为构建的一部分，而非事后补救；在考虑此法律的前提下选择分析和表单工具。
9. **动效：最多一个标志性时刻。**一个令人难忘且有目的性的交互（例如，带交叉淡入淡出的项目切换器、前后对比）加上基本的按下和悬停反馈。没有滚动显示、平滑滚动库或循环装饰。使用 motion 技能；减少动效应显示最终状态。

建议页面

首页、服务（或每个服务一个页面）、带案例研究的项目、定价、联系。添加区域页面和少量指南，但前提是您将诚实地维护和更新它们。除非包含证明，否则跳过“关于”页面；将简短的个人介绍放入首页或联系页面。

工作顺序

1. **报价和证明。**在任何设计之前，编写一句话报价、价格线、三个证明和联系路径。使用 ux 技能编写清楚的文案。
2. **方向和令牌。**先运行上述方向门，然后使用 ui 技能（如果项目没有预设，则使用品味默认值）定义调色板、一到两种自托管字体、间距、圆角。
3. **线框图，桌面端和390像素。**先做首页，然后是一个内页。所有者评判；在构建之前进行迭代（ui 技能，线框图优先）。
4. **使用真实内容构建页面。**使用真实的照片和文本，而不是 lorem ipsum。检查长法文字符串。
5. **SEO 和结构数据。**标题、元数据、JSON-LD、网站地图、hreflang、区域页面、与网站对齐的 Google Business Profile。
6. **语言和法律。**对所有法语副本运行 french-typography，然后运行 loi-25-website 以获取审计报告。
7. **速度优化。**在节流的移动配置文件中测量 LCP、CLS 和总传输量，并首先修复最大的问题。
8. **动效，然后是反套话检查。**添加一个标志性动效，然后运行 anti-slop 及其检测器。

常见错误

• 英雄区显示“欢迎”或口号，而不是报价。
• 价格隐藏在表单后面，或者在更改后旧价格仍留在结构数据和城市页面中。
• 五种联系方式，但没有明显的主要联系方式。
• 城市页面只是替换了城镇名称的相同页面。
• 添加了用于装饰的 Cookie 横幅，而跟踪仍默认加载。
• 语言切换开关将访客送回首页。

完成检查清单

• 首屏说明报价、受众、地点和一个主要操作。
• 起始价格及其范围出现在定价页面上，并与 JSON-LD 匹配。
• 电话和联系表单在移动端一步到位；确认信息告知下一步操作。
• 至少三个真实、具体的证明。
• LocalBusiness JSON-LD 有效；Google Business Profile 匹配名称、地址、电话。
• 区域页面具有不同的本地内容；网站地图和 hreflang 正确。
• LCP 图像已预加载；字体自托管；在节流的移动设备上 LCP 低于 2.5 秒；没有繁重的 3D 效果。
• 法语和英语具有相同的内容；french-typography 检查通过。
• loi-25-website 报告没有未修复的项目（仅限魁北克网站）。
• 最多一个标志性动效；尊重减少动效设置。
• anti-slop 检测器干净；390 像素和桌面端已检查；tsc、lint 和测试通过。