local-business-rebuild

本地企业网站重建

使用本地企业潜在客户的抓取内容和品牌形象，为其打造世界一流的网站。这是核心价值交付——重建后的网站必须比他们当前的网站好得多，让企业主一眼就能看到价值。

此技能的工作方式

这是完整 /website-rebuild 技能的改编版本，针对本地企业推介方案进行了精简：

• 移除： 阶段 11a/11b（竞品工具调研与构建）、阶段 12（工具 QA）
• 合并： 3 轮 QA → 1 轮综合 QA
• 保留完整深度： 重建计划、文案优化、所有设计规则、无障碍访问
• 输出位置： ~/prospect-pipeline/sites/<slug>/（单体仓库结构）

输入

从 ~/prospect-pipeline/prospects/<slug>/ 读取：

• info.json — 企业详情、类别、联系信息
• audit-report.md — 当前网站的问题
• original-site/content-inventory.json — 所有抓取的内容
• original-site/assets/ — 徽标、图片等

技术栈 — 必须严格遵守，不得变更

框架： Astro 5.x — 静态网站生成器，默认不包含 JavaScript，非常适合 SEO。 样式： Tailwind CSS v4（通过 Vite 插件） 图片： Astro <Image> 组件，来自 astro:assets（内置优化，支持 WebP/AVIF） SEO： @astrojs/sitemap 集成 + 手动编写 JSON-LD 视图过渡： Astro View Transitions（内置，无 JavaScript 的页面过渡） 包管理器： npm（不是 pnpm，也不是 yarn——只能使用 npm）

初始化 — 执行以下命令，不得更改

cd ~/prospect-pipeline/sites/
npm create astro@latest <slug> -- --template minimal --no-install
cd <slug>
npm install
npx astro add tailwind --yes
npx astro add sitemap --yes
npm install -D prettier

就这样。项目已准备就绪。不要添加 React，也不要添加任何其他集成，除非构建明确需要交互功能（本地企业网站很少需要）。

如果构建过程中出现故障

修复代码。不要：

• 切换 Node 版本
• 切换包管理器
• 重新安装框架
• 添加 React 或任何其他 UI 框架
• 更改项目结构

如果 npm create astro 失败，请检查 Node.js 是否可用，然后重试。如果失败两次，请报告错误——不要尝试使用其他框架。

Astro 文件结构

src/
  layouts/
    BaseLayout.astro     ← shared HTML shell, <head>, nav, footer
  pages/
    index.astro          ← homepage
    about.astro          ← about page
    services.astro       ← services page
    contact.astro        ← contact page
    404.astro            ← custom 404
  components/
    Header.astro         ← navigation
    Footer.astro         ← footer
    Hero.astro           ← hero section (reusable)
    ...                  ← section components as needed
  styles/
    global.css           ← @import "tailwindcss"; + CSS custom properties
public/
  images/                ← all downloaded images go here
  favicon.svg            ← favicon

本次构建中的 Astro 基础知识

.astro 文件顶部有 frontmatter 脚本分隔区（---），下方是类似 HTML 的模板：

---
import { Image } from 'astro:assets';
import BaseLayout from '../layouts/BaseLayout.astro';
import heroImage from '../assets/images/hero.jpg';
---

<BaseLayout title="Home" description="Meta description here">
  <section class="relative h-[80vh]">
    <Image src={heroImage} alt="Descriptive alt text" class="object-cover w-full h-full" />
  </section>
</BaseLayout>

与 React/Next.js 的主要区别：

• 没有 JSX——使用 HTML。用 class= 而不是 className=。用 for= 而不是 htmlFor=。
• 没有 useState，没有 useEffect，也没有客户端状态。页面是静态 HTML。
• 图片：从 src/assets/images/ 导入以进行优化，或引用 public/images/ 中未经优化的静态文件。
• CSS 自定义属性放在 src/styles/global.css 中，可在任何位置使用。
• 视图过渡：在 BaseLayout 的 <head> 中添加 <ViewTransitions />，即可实现流畅的页面过渡——无需 JavaScript。

Google Fonts

通过 BaseLayout <head> 中的 <link> 标签加载，或使用 @fontsource 软件包：

npm install @fontsource-variable/playfair-display @fontsource/dm-sans

然后在布局的 frontmatter 中导入：

---
import '@fontsource-variable/playfair-display';
import '@fontsource/dm-sans';
---

设计理念 — 打造令人难忘的网站

AI 滥作测试： 发布前，问问自己：“如果有人看到这个网站，并被告知‘这是 AI 做的’，他们会立刻相信吗？”如果会，你就失败了。重新设计，直到答案是否定的。

阅读 design-rules.md 了解完整规范。以下是不可妥协的规则及具体替代方案。

编写代码前的设计承诺（阶段 4.5 — 必须执行）

在编写任何代码之前，必须用通俗的英语说明：

1. 美学方向 — 选择一个：暗调／氛围感编辑风、温暖／有机手作风、简洁／奢华极简风、大胆／工业风、复古现代风，或符合该业务特色的独特风格。明确选定。
2. 主页的每个版块 — 描述：布局结构（不要写“3 列网格”）、列宽比例、视觉手法（是否重叠？倾斜？纹理？通栏？），以及它与上方版块的区别。
3. “惊艳”时刻 — 每个出色的网站都有一个让人停下滚动的亮点。这个网站的亮点是什么？（视差 Hero？动态计数器？重叠的推荐卡片？斜向版块分隔？）

在修改任何 .astro 文件之前，将这些内容写入 REBUILD_PLAN.md。

排版

• 使用来自 Google Fonts 或 @fontsource 的精美独特字体
• 禁止使用： Inter、Roboto、Arial、Helvetica、系统字体、Space Grotesk、Lato、Open Sans、Source Sans Pro
• 改用： 独特的展示字体 + 精致的正文字体。Fraunces、Playfair Display、Clash Display、Cabinet Grotesk、General Sans、Satoshi、Plus Jakarta Sans。
• 充分发挥排版的表现力：Hero 标题应为 56-80px 或更大（使用 clamp 实现流式缩放），字重对比要鲜明（300 对 800，而不是 400 对 600）
• 正文最小字号为 16px，行高为 1.5-1.65
• 标题使用 text-wrap: balance，数字使用 font-variant-numeric: tabular-nums

颜色

• 在 global.css 中为每个颜色值定义 CSS 自定义属性
• 以品牌标识为基础，使用 1-2 种主色 + 1 种醒目的强调色
• 禁止使用： 白底紫色渐变、常见的企业蓝、没有层次感的彩虹色、纯黑（#000）、作为主背景的纯白（#fff）、深色背景搭配青色的“开发者风格”、渐变文字
• 改用： 让中性色带有品牌色调。使用 oklch() 或暖灰色。采用米白色背景（如 #faf9f6）和近黑色文字（如 #1a1a2e）。使用醒目的高饱和度强调色。
• 所有颜色搭配都必须符合 WCAG AA 对比度标准（正文为 4.5:1，大号文字为 3:1）

动效与动画

• 仅使用 CSS 动画和过渡效果，不使用 JavaScript 动画库
• 禁止使用： 弹跳／弹性缓动、transition: all、对宽度／高度／边距做动画（会导致布局抖动）、每个版块都使用相同的 fadeInUp
• 改用： 指数缓动（缓出指数曲线使用 cubic-bezier(0.16, 1, 0.3, 1)）。使用 animation-delay 实现错落显现。编排一次页面加载动画序列。仅使用 transform 和 opacity（60fps）。
• 每个网站至少使用 3 种不同类型的动画，不要到处都用 fadeInUp。示例：从左侧滑入、缩放显现、clip-path 擦除、计数器递增、文字拆分显现、轻微视差
• 至少在 2 个版块中实现滚动触发显现（在 Astro 中使用带有少量代码的 <script> 标签实现 Intersection Observer）
• 使用 @media 查询遵循 prefers-reduced-motion 设置
• 使用 Astro View Transitions 实现页面间动画

布局 — 打破网格

• 禁止： 每个区块都使用 max-w-7xl mx-auto 居中。完全相同的三列卡片网格。每个区块标题都使用 text-center max-w-2xl mx-auto mb-14。每个区块的内边距都统一。所有内容都包裹在带圆角和投影的卡片中。

• 改为： 使用以下特定布局模式（首页至少选择 4 种不同模式）：

  模式 A — 非对称分栏： 使用 grid-cols-[2fr_1fr] 或 grid-cols-[1fr_2fr]，而非等宽分栏。一侧放置大图，另一侧放置紧凑的文字。不要采用 50/50 的布局。

  模式 B — 全幅延伸： 至少有一个区块必须突破容器限制——使用全宽图片、从一侧延伸至另一侧的彩色横幅，或通过 CSS clip-path 制作对角区块分隔线。

  模式 C — 元素重叠： 使用负边距（-mt-16、-ml-8）或 translate，让图片与相邻区块重叠。打破盒模型。

  模式 D — Bento／瀑布流网格： 不要使用大小相同的卡片，而是调整卡片尺寸——以一张大型精选卡片为主，周围搭配较小卡片。在精选项上使用 grid-row: span 2。

  模式 E — 错落／偏移： 在区块间交替使用“图片在左、文字在右”和“文字在左、图片在右”的布局。通过垂直偏移避免元素排列成平齐网格。

  模式 F — 引言／提示框： 让客户评价或统计数据跳出文本流——采用超大文字、不同背景、轻微旋转，或与相邻内容重叠。

• 规则： 不得让两个连续区块采用相同的分栏结构或视觉模式。

视觉层次与氛围

• 禁止： 毫无其他装饰的纯色区块背景。纯白区块。只有文字悬浮在空间中的区块。
• 改为： 每个网站至少使用以下 2 种方式增加视觉层次：
  • 微妙的噪点／颗粒纹理叠加（CSS background-image: url("data:image/svg+xml,...") 或小型 PNG）
  • 用于区块背景的渐变网格或径向渐变
  • 用作区块分隔线或背景元素的装饰性 SVG 图形（团块、波浪、对角线）
  • 带有颜色色调的 box-shadow（不只是灰色）
  • 微妙的背景图案（户外企业可使用圆点、线条、地形图）
  • 元素有意重叠、通过 z-index 分层的组合

组件架构

• 强制要求： 每个视觉上独立的首页区块都必须是 src/components/ 中单独的 .astro 组件。这样可以促使你独立设计每个区块，而不是复制粘贴布局模式。
• 首页组件至少包括：Hero.astro、About.astro、Services.astro、Testimonials.astro、CTA.astro，以及全局 Header/Footer。
• 这不是可选项。将所有内容塞进 250 行的单体 index.astro 是设计失败。

10 个阶段

严格按顺序执行。每个阶段都很重要。

阶段 1：品牌提取

使用抓取的内容和素材：

• 分析徽标（已下载到 original-site/assets/）
• 提取品牌颜色、字体风格和视觉调性
• 判断其与浅色／深色背景的适配性 输出： 内部笔记（不单独创建文件——将内容纳入 REBUILD_PLAN.md）

阶段 2：SEO 审核

使用抓取的元数据和审核报告：

• 记录发现的所有 SEO 问题
• 确定该企业及所在地区的目标关键词（例如“Coeur d'Alene 水管工”）
• 规划本地 SEO 策略（Google Business 架构、NAP 一致性、本地关键词）
• 规划内容策略（各页面需要哪些关键词） 输出： REBUILD_PLAN.md 中的 SEO 部分

阶段 3：设计与 UX 审核

使用 /prospect-audit 已生成的审核报告：

• 总结其当前设计存在的问题
• 明确我们将进行的具体改进
• 确定美学方向（什么风格适合这家企业？） 输出： REBUILD_PLAN.md 中的设计部分

阶段 4：制定重建计划

将所有内容综合为一份具体计划：

1. 网站架构 — 页面列表、导航结构、URL 结构

2. 设计方向 — 配色方案（已预先验证 WCAG 对比度）、字体选择、组件样式、整体个性

3. 图片策略 — 为每张图片标注保留 / 优化 / 替换

4. 文案策略 — 哪些内容需要改写、哪些保留、语气风格、关键信息

5. SEO 计划 — 每个页面的目标关键词、Schema 类型、元数据策略

6. 技术计划 — 所需的特殊集成、表单、地图

7. 无障碍目标 — 严重和重大违规项均为零

8. 图片下载 — 按照下方的图片选择流程操作，然后先下载所有图片，再编写任何组件代码。

   mkdir -p ~/prospect-pipeline/sites/<slug>/public/images
   # Download each planned image:
   curl -sL -o ~/prospect-pipeline/sites/<slug>/public/images/hero.jpg "https://images.unsplash.com/photo-XXXXX?auto=format&fit=crop&w=2400&q=85"
   

   继续之前，请确认图片文件存在：

   ls -la ~/prospect-pipeline/sites/<slug>/public/images/
   

   目录中至少必须包含：主视觉图片、关于版块图片、至少一张服务图片。如果不满足，请立即下载这些图片。

生成 DESIGN.md： 定义完上述设计方向后，使用 design-system-generator 技能将其整理为结构化的 DESIGN.md 文件。

1. 阅读 00-design-references/design-md-format.md，了解 9 个章节的格式。
2. 从 00-design-references/references/by-aesthetic/ 中选择 1–2 个与审美方向相符的参考 DESIGN.md 文件。
3. 生成包含全部 9 个章节的 DESIGN.md。纯英文设计承诺应作为第 1 节（视觉主题）和第 7 节（应做与不应做）。
4. REBUILD_PLAN.md 的设计方向部分应写明“完整设计系统请参阅 DESIGN.md。”

输出： 项目根目录下的 DESIGN.md（与 REBUILD_PLAN.md 放在一起）

输出： ~/prospect-pipeline/prospects/<slug>/REBUILD_PLAN.md

阶段 5：构建网站

编写任何代码之前，先阅读项目的 DESIGN.md。 将第 2 节转换为 CSS 自定义属性，将第 3 节转换为字体导入和排版比例，将第 4 节转换为组件实现，并将第 6 节转换为阴影 token。所有视觉实现均以 DESIGN.md 为准。

编写代码之前，请确认图片已下载：ls ~/prospect-pipeline/sites/<slug>/public/images/。如果目录为空，请返回阶段 4 的第 8 步。

在 ~/prospect-pipeline/sites/<slug>/ 中构建：

1. 初始化 Astro 项目，使用上文技术栈部分中的确切命令。

2. 设置设计系统：

   • 创建 src/styles/global.css，其中包含所有品牌颜色、排版和间距的 CSS 自定义属性
   • 在每组颜色搭配旁添加 WCAG 对比度作为注释
   • 通过 @fontsource 包或 <link> 标签导入字体

3. 构建 BaseLayout（src/layouts/BaseLayout.astro）：

   • 添加 <html>、包含元标签、OG 标签、字体和全局 CSS 的 <head>
   • 添加 <ViewTransitions />，实现流畅的页面过渡
   • 添加共享的 Header/Nav 和 Footer 组件
   • 将“跳转至内容”链接设为第一个可聚焦元素
   • 添加 JSON-LD 结构化数据插槽

4. 按照 REBUILD_PLAN.md 中的架构构建每个页面：

   • 每个页面都是 src/pages/ 中的一个 .astro 文件
   • 包含精心设计的 404.astro
   • 让每个页面都远胜于该企业当前的网站
   • 每个主视觉版块都必须使用真实照片，而不是 CSS 渐变
   • 尽可能使用 Astro <Image> 组件优化图片 关键 — 图片上的文字对比度（此项经常无法通过 QA）： 在主视觉图片或任何照片上放置文字时：
   • 务必在浅色文字后添加深色遮罩：bg-black/50 或 bg-gradient-to-t from-black/70 to-black/30
   • 务必在深色文字后添加浅色遮罩：bg-white/60 或类似样式
   • 绝不能将白色文字直接放在浅色／明亮的照片上
   • 绝不能将深色文字直接放在暗色照片上
   • 在脑海中测试：如果图片主要是天空／云朵（明亮），就需要深色遮罩。如果图片主要是阴影／暗部，白色文字就更需要遮罩。
   • 遮罩必须覆盖整个文字区域，而不只是窄窄的一条
   • 在主视觉标题上添加 text-shadow: 0 2px 4px rgba(0,0,0,0.5) 作为额外保障
   • 示例模式：

     <section class="relative h-[80vh]">
       <img src="/images/hero.jpg" class="absolute inset-0 w-full h-full object-cover" />
       <div class="absolute inset-0 bg-black/50"></div> 
       <div class="relative z-10 flex items-center h-full">
         <h1 class="text-white text-5xl font-bold" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5)">
           此处为标题文字
         </h1>
       </div>
     </section>
     

   这适用于所有文字叠加在照片上的版块，包括主视觉、关于我们、客户评价、CTA 横幅和页面标题。没有例外。

5. 图片 — 每个网站至少必须包含：

   • 一张主视觉图片（全宽、营造氛围、奠定基调）
   • 一张关于／故事版块图片（业务、工作空间或团队）
   • 团队照片（使用其网站上的真实照片）
   • 每个主要内容版块至少一张图片
   • 使用路径引用：/images/filename.jpg 对应 public/ 文件，或从 src/assets/ 导入以优化图片
   • 不含图片或仅使用 CSS 渐变的网站不可接受，无法通过 QA。

6. 全面的 SEO：

   • 每个页面都有唯一的 <title> 和 <meta name="description">
   • Open Graph 和 Twitter Card 元标签
   • 包含 NAP 数据的 JSON-LD 架构（LocalBusiness 类型）
   • 使用 @astrojs/sitemap 生成站点地图（已安装）
   • public/robots.txt
   • 规范 URL
   • 全程使用语义化 HTML（正确的标题层级、地标等）

7. 生成 favicon — 根据徽标生成完整套件（至少包含 public/ 中的 favicon.svg）

8. 无障碍访问：

   • 所有文字／背景组合均达到 WCAG AA 对比度标准
   • 尤其要检查图片上文字的对比度 — 所有带背景照片的主视觉、横幅和 CTA 版块都必须有遮罩（浅色文字配深色遮罩，深色文字配浅色遮罩）。这是构建中最常见的无障碍问题。
   • 支持完整的键盘导航，并显示焦点指示器
   • 仅在原生 HTML 语义不足时使用 ARIA 标签
   • 使用 prefers-reduced-motion 媒体查询包裹所有动画
   • 提供跳转到主要内容的链接

9. 性能 — Astro 会自动处理其中大部分内容：

   • 静态 HTML 输出（默认不包含 JS）
   • 使用 <Image> 组件优化图片
   • 使用 @fontsource 优化字体（自托管，不发起外部请求）
   • 目标：Lighthouse 95+（Astro 网站轻松可达此目标）

图片选择规范

**为何重要：**随手拿一张符合关键词的图库照片，会带来尴尬的结果。某家沙龙网站展示了一位男士修剪胡须的照片，但这家店只服务女性。某个关于我们页面使用了明亮洁白的室内照片，但品牌的风格却是深色工业风。每张图片都要仔细斟酌。

本规范适用于所有类型的企业，不局限于任何行业。

步骤 1：选图前，深入了解企业

阅读抓取到的内容、服务项目、团队信息、Google 评价和审核结果，建立整体印象：

• 这家企业日常实际做什么？
• 客户是谁？（房主、其他企业、家庭、专业人士等）
• 风格是什么？（高端／奢华、蓝领／勤恳、适合家庭、临床／专业、创意／艺术）
• 他们的实体场所是什么样的？
• 企业主会为在网站上展示什么而感到自豪？

水管工的网站需要展示整洁专业的工作、干净利落的制服，以及在门口面带笑容的技术人员。不要用白色背景上的扳手。 会计师的网站需要体现信任和专业能力。不要用「天际线前握手」的图库照片。 建筑公司的页面需要展示真实工地、完工项目和工作中的施工团队。不要用安全帽剪贴画。

步骤 2：先读文案，再选图片

每个图片位置都要先阅读周围的文案。图片必须强化文字所传达的信息。

• 「家族经营 20 年」→ 温暖、亲切、能体现特色的团队或工作空间
• 「精准并注重细节」→ 展示工艺的工作特写
• 客户服务版块 → 人与人互动的场景，而不只是设备
• 客户评价 → 营造评价中描述的感受

不要只是在 Unsplash 上搜索企业类别，然后拿第一张结果。

步骤 3：优先使用企业自己的照片，图库照片仅作最后选择

优先顺序：

1. 企业自己的团队照片（来自 original-site/assets/team/）。团队／关于我们版块必须使用。不要用图库中的人物替代有名有姓的真实人物。
2. 企业自己的工作／项目照片（从抓取内容中获取）。使用办公室、店铺和完工项目的照片。
3. 企业的 Google 地图／商家照片（可通过 Apify 下载）。使用室内、室外照片。
4. 精心挑选的图库照片，仅用于辅助／装饰性位置。

步骤 4：逐张核实图库照片的视觉效果

使用图库照片前，核实以下几点：

• 色温是否符合设计系统？
• 是否符合相同的地理／文化背景？（爱达荷州乡村水管工背后出现曼哈顿天际线，会显得荒谬。）
• 企业主会不会说「对，这看起来就是我们」？
• 人物特征是否符合实际客户群体？
• 图片是否与版块文案相符，而不只是和「行业」略有关联？

如果不能对所有问题都回答「是」，就换一张图片。与其使用不合适的具体照片，不如选用合适的抽象图像／纹理。

步骤 5：开始制作前，先制定图片计划

IMAGE PLAN for [Business Name]:
- Hero: [description, source, why it fits]
- About section: [description, source, why it fits]
- Team - [Name]: [their actual photo from assets/team/]
- Services section: [description, source, why it fits]
- Contact section: [description, source, why it fits]

步骤 6：在 QA 期间进行交叉检查

QA 期间，使用 preview_screenshot 目视检查每个页面：

• 团队照片展示的是真实团队成员吗？
• 图片是否符合品牌的配色和风格？
• 企业主会觉得这些图片体现了自己的企业吗？
• 有没有图片显得「不搭」或过于普通？替换它。
• 运行损坏图片检查（参见 QA 版块）。

**视觉质量标准：**成品必须达到价值 20,000 美元以上的代理机构作品水准。惊艳。不只是好看，而是惊艳。

阶段 6：文案审核与优化

逐字检查重建网站上的所有内容：

• 用户进入页面后 5 秒内能否看懂价值主张？
• 每个页面是否都有无需滚动即可看到、以利益为导向的 CTA？
• 优先突出利益，回应异议，使用具体数字
• 达到八年级阅读水平，使用短句增强效果
• 在 CTA 和决策节点附近放置客户评价
• 遵循吸引注意 → 提出问题 → 给出解决方案 → 提供证明 → 促成行动的流程

精修每一段文案。这是一个销售工具。

输出：~/prospect-pipeline/prospects/<slug>/COPY_CHANGES.md

阶段 7：综合 QA

一次全面检查，涵盖功能、文案和视觉效果：

1. 使用 preview_start 在本地运行网站
2. 打开每个页面，并使用 preview_screenshot 截图
3. 图片检查（先执行此项）：
   • 统计首页图片数量：document.querySelectorAll('img').length
   • 如果少于 3 张图片，请返回阶段 5 添加图片，然后再继续。
   • 验证：主视觉区域有真实照片，关于我们版块有真实照片，服务版块有图片。
   • 如果有任何图片缺失，请下载合适的图片并添加。
4. **功能：**在移动端和桌面端检查每个链接、图片、表单和交互元素
5. **文案：**以首次访问的客户视角阅读。5 秒内能看懂吗？能建立信任吗？知道该做什么吗？
6. **视觉：**动画流畅吗？排版美观吗？留白均衡吗？配色协调吗？照片美观且相关吗？
7. **无障碍：**验证所有颜色组合的对比度。键盘导航可用。焦点指示器清晰可见。
8. **设计系统一致性：**验证 global.css 中的每个 CSS 自定义属性都对应 DESIGN.md 中定义的令牌。不得有孤立令牌或缺失令牌。
9. 与行业最佳实践比较——效果必须更好。

损坏图片检查

部署前，验证所有图片均已加载：

1. 使用 preview_start 启动开发服务器
2. 访问每个页面（/, /about, /services, /contact）
3. 在每个页面上，通过 preview_eval 运行：

   Array.from(document.querySelectorAll('img')).filter(img => !img.complete || img.naturalWidth === 0).map(img => img.src)
   

4. 如果有任何图片损坏：
   • 外部 URL → 下载到本地 public/images/ 并更新 src
   • 路径错误 → 修正路径
   • 文件损坏 → 重新下载
5. **绝不要热链 prospect 原始网站中的图片。**始终使用本地文件。
6. **绝不要在生产环境中保留外部 Unsplash URL。**将所有图库图片下载到本地。
7. 修复后重新运行检查。所有图片加载成功后才能部署。

输出： ~/prospect-pipeline/prospects/<slug>/QA_REPORT.md

阶段 8：部署前检查清单

验证每一项：

• SEO：唯一的元标签、OG 标签、结构化数据、标题层级、alt 文本、站点地图、robots.txt
• 性能：图片已优化，字体由本地托管，所有页面均为静态页面。Lighthouse 95+。
• 无障碍：所有颜色均符合 WCAG AA。键盘导航可用。焦点指示器清晰可见。
• 功能：每个链接、表单、元素均可正常工作。移动端导航可用。404 页面可用。
• 内容：无占位内容、无错别字，所有商家信息准确无误。
• 视觉：所有视口下的设计都保持一致且精致。不得使用禁用字体。

阶段 9：准备部署

网站构建于 ~/prospect-pipeline/sites/<slug>/。请做好以下准备：

• 验证 .gitignore 是否合适（Astro 初始化时会生成该文件）
• 创建 README.md，介绍项目并说明如何在本地运行
• 在 info.json 中将 prospect 的 status 标记为 "built"
• 在 info.json 中添加 built_date
• 更新 pipeline.json：将 total_built 加 1

注意：实际部署到 GitHub/Vercel 由 /prospect-deploy 技能处理。

阶段 10：总结

输出已构建的内容：

LOCAL BUSINESS REBUILD COMPLETE
================================
Business:      Bob's Plumbing
Location:      Coeur d'Alene, Idaho
Category:      Plumber
Site Path:     ~/prospect-pipeline/sites/bobs-plumbing/
Framework:     Astro 5.x + Tailwind CSS v4
Pages Built:   7 (Home, About, Services, Gallery, Contact, FAQ, 404)
Design:        [brief description of aesthetic]
Key Features:  [list notable features]
SEO:           LocalBusiness schema, 8 target keywords, sitemap
Accessibility: WCAG AA, all contrast verified
Performance:   Static HTML, zero JS, Lighthouse 95+
Ready for:     /prospect-deploy

参考文件

此技能沿用主网站重建技能的设计理念：

• design-rules.md — 不可妥协的设计规则
• accessibility-spec.md — WCAG AA 规范

与完整网站重建的主要区别

方面	完整重建	本地商家重建
阶段	14	10
工具调研	深入的竞品调研	无
工具构建	2-5 个交互工具	无
QA 轮次	分为 3 轮	综合为 1 轮
文案审查	完整	完整（按用户要求保留）
重建计划	完整文档	完整（按用户要求保留）
部署	独立的 GitHub 仓库 + Vercel	仅限 Monorepo 路径（部署由单独的技能处理）
输入	用户提供的 URL	从 prospect-scrape 获取的抓取内容
输出	已上线的网站	Monorepo 中已构建、可供部署的网站