用途
Setup Client Website 是面向新客户站或重建站点的一次性（one-time）上线搭建流程。它产出一个现代化、经过 SEO 优化的 Next.js 网站，包含真实内容、图片、视频嵌入、结构化数据，以及支撑程序化 SEO 指南页所需的基础设施。
范围边界：该技能只把代码仓库准备到能够生成 /t/<slug> 指南页的状态，它本身不撰写指南页。指南页内容生成由 gsc-seo-page 技能负责，该技能驱动 ~/social-autoposter/seo/generate_page.py。运行本技能后，需把站点注册到 ~/social-autoposter/config.json，并将每个页面的制作移交给 gsc-seo-page。
参数与前置条件
参数：提供客户名称、域名（如有）、既有站点 URL（如有）。示例：“Paperback Expert at paperbackexpert.com”。
前置条件包括：m13v.com 组织下的 Google Cloud 项目（或新建）、GitHub 组织或个人账号、PostHog 账号（用于分析）、Google Search Console 访问权限、用于视觉对比的隔离浏览器 MCP。
技术栈
Next.js 16（App Router）+ React 19 + TypeScript；Tailwind CSS 4（通过 @theme 内联主题）；next/image 做图片优化；Google Cloud Run 托管（含 HTTPS 负载均衡 + Certificate Manager）；PostHog 用于分析（CTA 点击、页面浏览）。
阶段一：审计与研究
如果存在既有站点，先做 SEO 基线审计：并行启动 5 个代理，分别覆盖 seo-technical（可爬取性、可索引性、Core Web Vitals、移动端）、seo-content（E-E-A-T 信号、可读性、内容深度）、seo-schema（现有结构化数据 JSON-LD、Microdata、RDFa）、seo-performance（Lighthouse 分数、LCP、CLS、TBT，桌面与移动端）、seo-geo（AI 爬虫可访问性、llms.txt、引用就绪度）。记录所有分数作为“改版前”基线与修复清单。
随后用带 WebFetch 的代理抓取站点所有页面：抓取首页并提取全部导航与页脚链接，尝试常见路径（/about、/services、/contact、/faq、/blog、/pricing、/testimonials、/privacy），对每个页面提取 URL 与标题、h1 到 h6 的标题层级、完整正文（引述、证言、数据、描述）、CTA 文案与链接目标、表单字段（如有）、导航链接（用于发现更多页面），输出按页面整理的内容清单。
接着提取视觉资产：在隔离浏览器中访问每个页面并运行脚本收集图片（过滤宽度大于 50px）与 iframe 的 src。需要识别并下载的关键资产包括 Logo（通常首图、页首、约 200px 宽）、Hero 图或背景照片、客户/团队头像（圆形，100–200px）、产品图（书封、截图等）、社会证明图（奖项、认证、合作方 Logo）、视频嵌入（Vimeo、YouTube URL）、预约组件（Calendly、Cal.com URL）、书封条/产品图库。所有识别出的图片下载到 public/images/，使用描述性文件名。同时截取原站每个关键页面的整页截图（original-{pagename}-full.png）作为视觉参照。
阶段二：脚手架搭建
创建 Next.js 应用：
cd ~ npx create-next-app@latest CLIENT-website --typescript --tailwind --eslint --app --src-dir --no-turbopack --import-alias "@/*" cd ~/CLIENT-website
安装 @seo/components：
npm install @m13v/seo-components@latest npm install @seo/components@npm:@m13v/seo-components@latest
package.json 中会同时出现两条记录："@m13v/seo-components": "^0.8.15" 与 "@seo/components": "npm:@m13v/seo-components@^0.8.15"。
配置主题（globals.css）：主题使用 :root 中的 CSS 自定义属性，并通过 @theme inline 映射进 Tailwind 4。需同时定义 CSS 变量与 Tailwind 映射。每个客户至少要有主色（primary）、深色变体（primary-dark）与强调色（accent）。示例变量包括 --background、--foreground、--primary、--primary-dark、--cta、--cta-dark、--accent、--accent-light，映射到 --color-* 与 --font-sans、--font-heading。body 使用 background/foreground，html 设 scroll-behavior: smooth。颜色命名建议使用语义名（primary、cta、accent），也可为具体客户添加客户专属名。
配置字体与 @seo/components（layout.tsx）：使用 next/font/google 的 CSS 变量模式，正文字体放在 --font-sans，标题字体放在 --font-heading，两个变量都应用到 <html> 标签。重要：采用路由组架构，根布局不要直接包含 Header/Footer；使用 (main) 路由组及其自身布局承载需要站点 Header/Footer 的页面，/t/ 下的 SEO 指南页也放在 (main) 内以共享同一 Header/Footer。根布局（src/app/layout.tsx）只含字体、metadata、Organization JSON-LD、@seo/components 样式与 {children}。其中 SeoComponentsStyles 注入该包为全部 @seo/components 预构建的 Tailwind CSS；HeadingAnchors 自动为 H2 注入 id 属性，用于侧边栏链接与锚点导航。主布局（src/app/(main)/layout.tsx）用 Header/Footer 包裹页面。所有页面路由（首页、about、wins、faq、precall 以及 /t/ 指南页）都放在 src/app/(main)/ 下；(main) 是 Next.js 路由组，不影响 URL。
字体搭配建议：专业服务 Inter + Oswald；创意/生活方式 Lato + Playfair Display；科技/SaaS DM Sans + Space Grotesk；法律/金融 Source Sans 3 + Merriweather。
阶段三：构建全部页面（设计系统与组件蓝图）
该阶段给出精确的设计模式、Tailwind 类组合与组件结构，用于产出精致、专业的网站，需对每个客户站点严格遵循这些蓝图。
Header 组件蓝图：粘性导航，含 Logo、下拉菜单、移动端汉堡按钮与 CTA 按钮。使用 "use client"，把简单链接（navLinks）与下拉组（dropdowns）分开。使用 sticky top-0 z-50、border-b、shadow-sm 等类；Logo 始终用 next/image 并加 priority；桌面导航用 hidden lg:flex；下拉采用 group + group-hover 的纯 CSS 实现，配合 invisible opacity-0 group-hover:visible group-hover:opacity-100；导航文字样式为 font-heading text-sm font-semibold uppercase tracking-wider；CTA 按钮使用 bg-cta 与 hover:bg-cta-dark；移动端提供汉堡按钮切换，移动导航为扁平列表加分组小标题。
Footer 组件蓝图：四列布局——品牌+简介、公司链接、资源链接、CTA+联系信息，底部一行社交图标。外层用 bg-primary-dark text-white，容器 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12，网格 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8。列标题用 font-heading text-sm font-semibold uppercase tracking-wider text-accent；链接为 text-gray-300 hover:text-white text-sm transition-colors；CTA 按钮用 bg-cta hover:bg-cta-dark。
限制与后续
该技能不生成任何指南页内容，也不负责内容撰写；其产出仅为可继续生成 /t/<slug> 指南页的站点基础。运行完成后需把站点登记到 ~/social-autoposter/config.json，并将每页制作交给 gsc-seo-page 技能。关于收费、价格等商业信息资料未提供。