website-rebuild

完整网站重建 Agent

输入现有网站的 URL，从头开始将其重建为出色、可用于生产环境的网站。最终效果应媲美价值 20,000 美元以上的代理机构作品——视觉效果惊艳、针对转化进行了优化、完全无障碍，并全面满足 SEO 要求。

此技能的工作方式

此技能严格按顺序运行 14 个阶段。每个阶段都会生成文档，然后才进入下一阶段。请勿跳过或调整阶段顺序。用户提供一个 URL，之后的工作由你完成。

输入： 网站 URL（要重建的网站） 输出： 已部署到 Vercel 的线上网站 + GitHub 仓库 + 11 个文档文件

技术栈 — 必须严格遵守，不得偏离。

框架： Astro 5.x — 静态网站生成器，默认不包含 JavaScript，非常适合 SEO。 样式： Tailwind CSS v4（通过 Vite 插件） 图像： 来自 astro:assets 的 Astro <Image> 组件（内置优化，支持 WebP/AVIF） SEO： @astrojs/sitemap 集成 + 手动编写 JSON-LD 视图过渡： Astro View Transitions（内置页面过渡，无需 JavaScript） 博客/内容： 使用 MDX 的 Astro Content Collections。Frontmatter：title、date、description、author、tags、featuredImage。 部署： 通过 GitHub 部署到 Vercel（推送到 main 即自动部署） 包管理器： npm（不用 pnpm，也不用 yarn——只能使用 npm） 代码检查： 从一开始就使用 ESLint + Prettier

初始化 — 请运行以下确切命令

npm create astro@latest <project-name> -- --template minimal --no-install
cd <project-name>
npm install
npx astro add tailwind --yes
npx astro add sitemap --yes
npx astro add mdx --yes
npm install -D prettier

就这些。项目已准备就绪。

如果构建期间出现问题

修复代码。请勿：

• 切换 Node 版本
• 更换包管理器
• 重新安装框架
• 除非交互式工具（第 11b 阶段）确有需要，否则不要添加 React 或任何其他 UI 框架
• 更改项目结构

Astro 文件结构

src/
  layouts/
    BaseLayout.astro       ← shared HTML shell, <head>, nav, footer
    BlogPostLayout.astro   ← blog post template
  pages/
    index.astro            ← homepage
    about.astro            ← about page
    services.astro         ← services page
    contact.astro          ← contact page
    blog/
      index.astro          ← blog listing
      [...slug].astro      ← dynamic blog post pages
    tools/                 ← interactive tools (Phase 11b)
    404.astro              ← custom 404
  components/
    Header.astro           ← navigation
    Footer.astro           ← footer
    Hero.astro             ← hero section
    ...                    ← section components as needed
  content/
    config.ts              ← content collection schema
    blog/
      *.mdx                ← blog posts
  styles/
    global.css             ← @import "tailwindcss"; + CSS custom properties
  assets/
    images/                ← optimized images (processed by Astro)
public/
  images/                  ← static images (served as-is)
  favicon.svg
  robots.txt

本次构建所需的 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。
• 对于交互式工具（第 11b 阶段），请使用 Astro Islands：为需要 JavaScript 的组件添加 client:load。
• 图像：从 src/assets/images/ 导入以进行优化，或者引用 public/images/ 中的静态文件。
• CSS 自定义属性放在 src/styles/global.css 中，可在任何地方使用。
• 视图过渡：在 BaseLayout 的 <head> 中添加 <ViewTransitions />，实现流畅的页面过渡——无需 JavaScript。

Google Fonts

通过 @fontsource 包加载（自托管，不发起外部请求）：

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

然后在布局的 frontmatter 中导入：

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

设计 — 交由专用技能处理

所有视觉设计决策均由专门的设计技能处理。请勿依据静态规则自行做设计选择——请调用相应技能。

必需的设计技能（在第 5 阶段和第 6 阶段调用）：

1. frontend-design-anthropic — 使用此技能处理所有视觉设计决策：调色板、字体排版、布局构成、动态效果和组件样式。在编写任何 CSS 或选择任何视觉方向之前，先加载此技能。它负责审美方向、字体选择、色彩系统、间距和动画理念。

2. web-design-guidelines — 使用此技能，根据专业网页设计标准验证设计选择。每完成一个主要页面后运行此技能，检查合规问题、无障碍问题和设计反模式。

如何在构建流程中使用它们：

• 阶段 5（重建计划）： 在确定设计方向之前，调用 frontend-design-anthropic，以确立美学风格、配色方案、字体搭配和组件模式。将这些选择记录在 REBUILD_PLAN.md 中。
• 阶段 6（构建）： 将 frontend-design-anthropic 的设计系统应用于每个组件和页面。所有视觉决策都要以它为依据——不要退回到通用的 Tailwind 默认样式。
• 阶段 8-10（QA）： 对每个页面运行 web-design-guidelines，以验证设计质量。继续之前，先修复标记出的所有问题。

此技能仍负责的内容（非设计）：

• 技术栈决策（Astro + Tailwind）
• 使用 @fontsource 自托管字体（设计技能决定使用哪些字体）
• CSS 自定义属性架构
• 性能目标（Lighthouse 95+）
• 使用 Astro <Image> 组件优化图像

无障碍与对比度（重要）

阅读 accessibility-spec.md 查看完整规范。

最低对比度要求（WCAG AA）

文本类型	最低值	目标值
正文文本（< 18px）	4.5:1	7:1
大号文本（>= 18px 或 >= 14px 粗体）	3:1	4.5:1
UI 组件、边框、图标	3:1	4.5:1
输入框中的占位文本	4.5:1	7:1
焦点指示器	3:1	4.5:1

验证

• QA 期间，使用 preview_eval 通过 CDN 在每个页面上运行 axe-core 检查
• 继续之前，修复所有 CRITICAL 和 SERIOUS 违规项
• 验证每种颜色组合的对比度，并将结果作为注释记录在 global.css 中
• 绝不要只依赖视觉检查

应避免的常见问题

• 白色背景上的浅灰色文本（在 #FFF 上，任何比 #595959 更浅的灰色都会不达标）
• 浅色品牌色按钮上的白色文本
• 深色主视觉背景上的深色文本
• 会降低对比度的悬停/焦点状态
• 图片上不透明度不足的叠加文本
• 最浅处对比度不达标的渐变文本

14 个阶段

严格按以下顺序执行。不要跳过或调整顺序。每个阶段的详细说明见 phase-details.md。

阶段 1：视觉检查与品牌提取

在 Chrome 浏览器中打开 URL。访问每个页面。Logo 是设计的锚点——提取品牌颜色（十六进制值）、字体风格和视觉基调。下载 Logo 文件。 输出： BRAND_BRIEF.md

阶段 2：数据抓取与内容分类

编写并运行抓取脚本。提取所有文本、图像、链接、导航结构、联系信息、表单、媒体、meta 标签、客户评价和结构化数据。将内容分类为必须复用或可以修改/替换。 输出： CONTENT_INVENTORY.md

阶段 3：全面 SEO 审核

技术 SEO（速度、移动端、URL、站点地图、robots.txt、HTTPS、规范链接、404、重定向）。页面 SEO（标题、描述、标题层级、替代文本、内部链接、关键词）。内容策略（博客内容缺口、本地 SEO、schema 标记）。 输出： SEO_AUDIT.md

阶段 4：设计与 UX/UI 审核

视觉设计（美学风格、颜色、字体、间距、层级）。UX（导航、CTA、移动端、流程、信任信号）。转化优化（CTA 位置、价值主张、社会认同）。 输出： DESIGN_AUDIT.md

阶段 5：重建计划

综合阶段 1-4 的内容。制定网站架构、设计方向（调用 frontend-design-anthropic 技能确定字体、配色方案和布局方向）、图像策略（保留/增强/替换/创建）、文案策略、SEO 实施计划、工具调研占位项、技术计划和无障碍目标。所有配色方案都必须通过 WCAG AA 对比度验证。 输出： REBUILD_PLAN.md

阶段 5b：生成 DESIGN.md

完成重建计划后，使用 design-system-generator 技能在项目根目录生成 DESIGN.md 文件。这是阶段 6 将使用的机器可读设计系统。

1. 阅读 00-design-references/design-md-format.md，了解要求的 9 个章节结构。
2. 浏览 00-design-references/design-md-index.md，选择 1-2 个与所选美学方向相符的参考 DESIGN.md 文件，并阅读以获取结构灵感。
3. 根据阶段 5 中确定的设计决策以及 frontend-design-anthropic 技能调用的结果，生成项目的 DESIGN.md，并填充全部 9 个章节。
4. 每种颜色都必须包含十六进制值、语义角色，以及相对于预期背景的 WCAG 对比度。
5. 字体排版必须包含完整的层级表（角色、字体系列、字号、字重、行高、字间距）。
6. 组件样式必须定义按钮状态、卡片模式和输入框样式，并提供精确的 CSS 值。
7. REBUILD_PLAN.md 中的“Design Direction”章节应引用 DESIGN.md 文件：“完整设计系统请参见 DESIGN.md”，并附上 3 行摘要。

**输出：**项目根目录中的 DESIGN.md

阶段 6：构建网站

编写任何视觉代码前，请先阅读项目的 DESIGN.md。 使用第 2 节（颜色调色板）作为 global.css 中 CSS 自定义属性的依据。使用第 3 节（字体排版）设置字体导入和字体比例。使用第 4 节（组件样式）实现按钮、卡片、输入框和导航组件。使用第 6 节（深度与层级）设置阴影令牌。DESIGN.md 是唯一事实来源——当 DESIGN.md 指定了某个值时，不要退回使用通用 Tailwind 默认值。

编写任何视觉代码前，请调用 frontend-design-anthropic 技能。构建顺序：

1. 初始化 Astro 项目，使用上方 Tech Stack 章节中的精确命令。
2. **先构建设计系统：**在 global.css 中设置 CSS 自定义属性、基础组件和布局模式。在每组颜色搭配旁以注释形式记录 WCAG 对比度。
3. **按网站架构构建所有页面。**包含精致的 404 页面。让每个页面都实现显著提升。
4. **处理图片：**KEEP→使用 Astro <Image> 优化，ENHANCE→使用 Nano Banana，REPLACE→使用 Unsplash（下载到本地）。所有图片都必须是本地文件，绝不能使用外部 URL。
5. **全面优化 SEO：**元标签、JSON-LD 架构、站点地图（通过 @astrojs/sitemap）、robots.txt、规范链接、语义化 HTML。
6. 生成网站图标——根据 Logo 生成完整图标集。
7. **无障碍：**通过 WCAG AA 验证。支持键盘导航、焦点指示器、ARIA 和跳转至主要内容。
8. **性能：**Astro 会处理大部分优化（零 JS、静态 HTML）。使用 @fontsource 自托管字体。目标 Lighthouse 95+。

**视觉质量标准：**惊艳。不是不错，而是惊艳。想想 Apple、Stripe、Linear。

阶段 7：文案审核与优化

确保价值主张在 5 秒内清晰传达。每个页面都应有一个无需滚动即可看到、以利益为导向的 CTA。突出利益、回应疑虑、使用具体数字，并将阅读难度控制在八年级水平。采用吸引注意 → 提出问题 → 给出解决方案 → 提供证明 → 促成行动的流程。 输出：COPY_CHANGES.md

阶段 8：QA 第 1 轮——功能与内容

在本地运行，用 Chrome 打开并访问每个页面。在手机、平板和桌面设备上检查链接、图片、表单和交互元素。验证对比度，修复所有严重或高危的无障碍问题。 输出：QA_ROUND_1.md + 更新 ACCESSIBILITY_AUDIT.md

阶段 9：QA 第 2 轮——文案与信息传达

以首次访问的客户视角通读整个网站。我能在 5 秒内了解这项业务吗？我信任他们吗？我知道下一步该做什么吗？进行最终的文案调整。 输出：QA_ROUND_2.md

Phase 10: QA Round 3 — 最终视觉检查与润色

检查所有页面在各种视口尺寸下的表现。对每个页面运行 web-design-guidelines skill。动画是否流畅？排版是否有特色？留白是否均衡？颜色是否协调？最后进行一次无障碍检查。与行业最佳水平对比——效果必须更好。 输出： QA_ROUND_3.md

Phase 11a: 竞品工具研究冲刺

这一阶段至关重要——未经研究，不构建任何工具。预算假设：无限。

1. 通过网络搜索找出 10–15 个主要竞品和同类最佳网站。
2. 使用 Chrome 访问每个网站。记录所有交互式工具、计算器、测验、配置器和估算器。
3. 扩大网络搜索范围：搜索“[行业] calculator/estimator/tool”，以及 Product Hunt、G2 和行业目录。
4. 综合整理：竞品清单、同类最佳案例、差距分析、按价值 × 转化率 × 独特性 × 可行性排序的候选清单，以及最终选出的 2–5 个工具。 输出： TOOLS_RESEARCH.md

Phase 11b: 面向客户的工具——构建

仅构建 TOOLS_RESEARCH.md 中批准的工具。创建 /tools 或 /resources 区块。

对于需要客户端 JavaScript 的交互式工具，请使用 Astro Islands：

• 使用你首选的 UI 框架（React、Preact、Svelte 或原生 JS）创建组件。
• 在 .astro 页面中使用该组件时，添加 client:load 或 client:visible 指令。
• 如果工具使用 React：npx astro add react --yes（只有进入此阶段后才添加 React，不要提前添加）
• 每个工具都应有自己的页面，包含标题、描述、交互式工具和 CTA。
• 适配移动端，与设计系统保持一致，并确保无障碍。

Phase 12: QA Round 4 — 工具 QA

在 Chrome 中测试每个工具，使用有效输入、边界情况（零、极大数值、空值）和移动端视口。验证计算、输入校验、错误、外观和 CTA。检查每个工具页面的无障碍情况。 输出： QA_ROUND_4.md

Phase 13: 部署前检查清单

核对清单中的每一项。完整清单请参阅 phase-details.md，涵盖：SEO、性能、无障碍、对比度、功能、内容、视觉、设计系统、网站图标和文档。

Phase 14: 部署

初始化 git，创建 .gitignore 和 README.md（项目概述、技术栈、运行方法、添加博客文章的方法、项目结构）。提交并推送到新的 GitHub 仓库。连接到 Vercel，配置构建设置（Vercel 会自动检测 Astro）。在 Chrome 中打开线上 URL，抽查所有内容。最后对线上 URL 进行一次无障碍扫描。

Nano Banana 图像增强

增强团队成员或人物照片时，请使用 OpenRouter API。脚本模板请参阅 nano-banana.md。运行前，请在 docs.openrouter.ai 中确认当前的模型字符串和端点。

博客基础设施

使用 Astro Content Collections 和 MDX 搭建。添加新文章时，在 src/content/blog/ 中创建 .mdx 文件并填写 frontmatter（title、date、description、author、tags、featuredImage），然后推送到 main。博客列表会自动获取新文章并按日期排序。每篇文章都应包含：精美的长文排版、长文目录、社交分享按钮，以及底部 CTA。

最终交付成果

#	交付成果
1	Vercel 上线网站——视觉出众、带有动画、响应式、SEO 优化、符合 WCAG AA，并包含经过研究验证的工具
2	GitHub 仓库——代码整洁，README 中包含博客说明，推送后自动部署
3	BRAND_BRIEF.md
4	CONTENT_INVENTORY.md
5	SEO_AUDIT.md
6	DESIGN_AUDIT.md
7	REBUILD_PLAN.md
8	TOOLS_RESEARCH.md
9	ACCESSIBILITY_AUDIT.md
10	COPY_CHANGES.md
11	QA_ROUND_1.md 至 QA_ROUND_4.md
12	DESIGN.md——结构化设计系统规范，包含所有令牌、排版、组件和阴影

指导原则

• 质量优先于速度。 每个阶段都很重要。解决问题后再继续。
• 视觉惊艳不是可选项。 精美的视觉效果、细腻的动画、优美的字体排版、经过精心设计的留白。打造鲜活灵动、高端精致的数字体验。
• 卓越设计不容妥协。 达到价值 150,000 美元以上的设计机构水准。每项视觉决策都要使用 frontend-design-anthropic 技能。使用 web-design-guidelines 进行验证。
• 从第 5 阶段开始就融入无障碍设计。 在最终确定颜色前计算对比度。每个 QA 阶段都要验证。WCAG AA 是最低标准。
• 从一开始就融入 SEO，而非事后补上。 URL 结构、标题、替代文本、内容策略——从一开始就以 SEO 为指导。
• 文案必须能促进销售。 这是销售工具。每个页面都要引导用户采取行动。
• 以怀疑者的态度进行测试。 在 QA 期间主动尝试找出问题。
• 站在客户的角度思考。 他们需要什么？什么能让他们信任并采取行动？
• 先研究，再构建。 尤其是工具。绝不要凭猜测构建。
• 运用你的判断力。 这里为你提供路线图和标准。执行方面，你才是专家。