网站构建器 — 模板修改 + Netlify 部署
目标
根据用户对所需产品的简短描述，通过修改一个经过验证的现有模板（而非从头构建），生成一个惊艳且可直接投入生产的着陆页。然后将其部署到 Netlify 上并返回 URL。
输入
- 品牌名称：公司/项目名称
- 核心主张：关于产品的一句话描述（或一个可供参考的 URL）
- 视觉风格/美学：任何方向（例如 "黑暗科技感"、"临床奢华感"、"粗野主义"）
- 转化目标：CTA 按钮的目标（默认：预约通话）
模板位置
基础模板位于工作区根目录的 website-template/ 文件夹中。它是一个完整、可运行的 React + Vite + Tailwind v3 + GSAP 网站，包含：
目录结构
website-template/
├── src/
│ ├── App.jsx # 根布局（导入所有页面区块）
│ ├── index.css # Tailwind 导入、噪点叠加、滚动条样式
│ ├── main.jsx # 入口文件
│ └── components/
│ ├── Navbar.jsx # 浮动导航，响应滚动
│ ├── Hero.jsx # 全视口英雄区，背景图，GSAP 文字揭示
│ ├── Features.jsx # 浅色背景区块，包含 3 个交互式微 UI
│ ├── DiagnosticShuffler.jsx # 自动循环堆叠卡片组件
│ ├── TelemetryTypewriter.jsx # 终端风格打字机组件
│ ├── AdaptiveRegimen.jsx # 带动画光标的日期选择器
│ ├── Philosophy.jsx # 视差背景，单词拆分文字揭示
│ ├── Protocol.jsx # 堆叠滚动卡片（GSAP ScrollTrigger 固定）
│ ├── Membership.jsx # 3 层定价表，带悬停效果
│ └── Footer.jsx # 深色多列页脚
├── tailwind.config.js # 颜色令牌、字体、边框圆角
├── postcss.config.js # 标准 PostCSS + Autoprefixer
├── vite.config.js # Vite + React 插件
├── package.json # React 19, GSAP, Lucide, Tailwind v3
└── index.html
技术栈（请勿更改）
- React 19 + Vite 7
- Tailwind CSS v3（使用
tailwind.config.js+@tailwind指令——不是 v4） - GSAP 3 + ScrollTrigger
- Lucide React 图标
- PostCSS + Autoprefixer
设计系统（位于 tailwind.config.js 中）
colors:
moss: '#070707' — 深黑色强调
clay: '#0026FF' — 科技蓝主色
cream: '#EAEAEA' — 米白色文字
charcoal: '#070707' — 主深色背景
fonts:
sans: Plus Jakarta Sans, Outfit
serif: Cormorant Garamond
mono: system monospace
流程
第 1 步：复制模板
cp -R website-template/ site-name/
cd site-name
rm -rf node_modules
npm install
第 2 步：为品牌进行定制
修改以下文件——不要重构或从头重写：
-
tailwind.config.js— 更改颜色令牌（moss、clay、cream、charcoal）和字体以匹配品牌美学。类名保持不变，仅更改十六进制值。 -
index.css— 更新 Google Fonts 导入 URL 以匹配新的字体选择。 -
index.html— 更新<title>。 -
组件文案 — 在每个组件中查找并替换品牌特定的文本：
Navbar.jsx— 品牌名称、导航链接、CTA 按钮文本Hero.jsx— 主标题、副标题、标语、背景图片 URLFeatures.jsx— 区块标题、副标题DiagnosticShuffler.jsx— 卡片标题、数值、趋势（使其与品牌相关）TelemetryTypewriter.jsx— 打字信息数组、状态标签AdaptiveRegimen.jsx— 组件标签、按钮文本Philosophy.jsx— 两个对比性陈述、区块标签、背景图片Protocol.jsx— 步骤标题、描述、区块标题Membership.jsx— 层级名称、价格、功能、描述（如果不需要，可替换为 CTA 区块）Footer.jsx— 品牌名称、标语、链接列、版权信息
-
Unsplash 图片 — 替换 Hero.jsx 和 Philosophy.jsx 中的背景图片 URL，使用与品牌匹配的图片。使用
https://images.unsplash.com/photo-ID?w=2000&q=80格式。
第 3 步：构建与部署
npm run build
npx netlify-cli deploy --prod --dir=dist --create-site site-name
如果站点已链接到 Netlify：
npm run build
npx netlify-cli deploy --prod --dir=dist
注意：交互式的 sites:create 命令在非 TTY 环境下会挂起。请始终使用 --create-site 标志。
第 4 步：返回线上 URL
禁止事项
- 不要从头重写组件。 模板是可用的。仅修改文案、颜色和图片。
- 不要切换到 Tailwind v4。 该模板使用 v3 和
tailwind.config.js。请保持原样。 - 不要移除交互式微 UI（DiagnosticShuffler、TelemetryTypewriter、AdaptiveRegimen）。它们是视觉差异化的关键。根据品牌调整其内容。
- 不要更改结构布局（圆角区块过渡、堆叠滚动卡片、视差哲学区块）。这些是使其外观精美的关键。
- 不要添加新的 npm 依赖，除非绝对必要。
定制速查表
改变视觉风格
通过更改 tailwind.config.js 中的 4 个颜色令牌，即可改变整个美学风格：
| 风格 | charcoal (背景) | clay (强调) | cream (文字) | moss (深色强调) |
|---|---|---|---|---|
| 科技蓝 (默认) | #070707 | #0026FF | #EAEAEA | #070707 |
| 金色奢华 | #070707 | #C9A84C | #F5F0E8 | #0A0A0A |
| 霓虹赛博 | #0A0A0A | #00FFD1 | #E0E0E0 | #0A0A0A |
| 临床白色 | #FAFAFA | #2563EB | #1A1A1A | #F5F5F5 |
| 赤陶有机 | #1A1410 | #CC5833 | #F2F0E9 | #2E4036 |
| 翡翠内容 | #090909 | #10B981 | #F0F0F0 | #0A0A0A |
如果客户不需要定价表
将 Membership.jsx 的内容替换为一个全宽 CTA 区块（保留组件文件，仅更改其 JSX）。
示例：1SecondCopy（SEO 内容写作服务）
这是所需修改深度的黄金标准参考。每个组件的文本内容都会更改，但不进行任何结构/布局更改。
颜色 (tailwind.config.js)
moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'
逐个组件更改
| 组件 | 更改了什么 | 保持不变的部分 |
|---|---|---|
Navbar.jsx | 品牌 → "1SECONDCOPY_"，链接 → 流程/平台/定价，CTA → "Get Started" | 浮动导航、滚动模糊、移动端汉堡菜单 |
Hero.jsx | 主标题 → "Words that Rank."，标语 → "Content Writing, With a Twist"，副标题关于前 1% 的作家，Unsplash 背景 → 与写作相关 | GSAP 文字揭示、布局、渐变叠加 |
Features.jsx | 标题 → "Your Content Command Center"，副标题关于实时仪表板 | 3 列微 UI 网格、区块结构 |
DiagnosticShuffler.jsx | 卡片 → "Content Velocity: 48 articles"，"Avg. SERP Position: #4.2"，"Turnaround Time: 2.1 days"，标签 → "Content Analytics" | 自动循环动画、卡片结构 |
TelemetryTypewriter.jsx | 消息 → 内容流水线步骤（"Researching target keywords..."，"Matching writer to brief..."），标签 → "Live Queue"，统计数据 → "In Queue: 3 briefs" / "Avg. Delivery: 2.1 days" | 打字机效果、终端样式 |
AdaptiveRegimen.jsx | 标签 → "Content Scheduler"，标题 → "Select Publish Day"，按钮 → "Submit"，GSAP 颜色 → #10B981 | 日历网格、动画光标、日期标签 |
Philosophy.jsx | 旧方式 → "Hire freelancers. Manage revisions. Pray it ranks." vs 新方式 → "Submit a brief. Get SEO content that converts."，Unsplash 背景已替换 | 视差滚动、单词拆分揭示、布局 |
Protocol.jsx | 步骤 → "Brief & Research" / "Expert Writing" / "SEO & Delivery"，标题 → "The Process."，关于其工作流程的描述 | 堆叠滚动卡片、GSAP 固定、SVG 图形 |
Membership.jsx | 层级 → Starter $0.09/字，Bulk $0.08/字，Enterprise Custom，所有功能重写为内容服务 | 3 列网格、悬停效果、流行徽章 |
Footer.jsx | 品牌 → "1SECONDCOPY_"，标语 → "SEO content on-demand"，列 → Services/Company，状态 → "Writers Online" | 布局、ping 点动画、版权信息 |
要点
约 200 行文本更改，分布于 10 个文件中。零布局、动画或结构更改。由于颜色和文案完成了所有繁重工作，网站外观因此变得完全不同。
运行环境
需要：
- Node.js 18+
npx netlify-cli（自动安装）- 通过
netlify login认证的 Netlify 账户
首次运行设置
在执行操作之前，检查工作区是否包含 .gitignore 文件。如果不存在，则假设用户是此技能的新手。在这种情况下：
- 询问用户是否是首次运行此技能
- 如果是，向他们说明其工作原理以及需要配置/设置的内容（API 密钥、环境变量、依赖项等）
- 告诉他们 Nick 祝他们一切顺利！