SiteKit

如何使用生成的提示词

Last updated: April 10, 2026

概述

SiteKit 会为你生成两个配合 Claude Code 使用的提示词:

  • 第一阶段构建项目结构,使用占位符内容
  • 第二阶段应用你的品牌设计并撰写真实文案

按顺序逐个使用。以下是完整的工作流程。

第一阶段:项目搭建

1. 下载第一阶段提示词

在 SiteKit 中,进入你网站的 Prompts 标签页,点击 Download Stage 1 Prompt。将 .md 文件保存到方便查找的位置。

2. 打开你的项目

进入你克隆好的 GitHub 仓库(参阅如何设置 GitHub):

cd your-project-folder

3. 启动 Claude Code

claude

4. 将提示词交给 Claude

你可以将整个提示词粘贴到对话中,或者引用文件:

Read stage-1-scaffold-your-site.md and follow all the instructions in it to build this project.

5. 让 Claude 构建项目

Claude Code 会创建完整的 Jekyll 项目 — 配置文件、布局模板、包含文件、页面,以及你选择的所有功能(联系表单、博客)。整个过程大约需要 10-15 分钟。

提示:不要在 Claude 执行提示词的过程中打断它。让它完成整个构建,然后再提出修改要求。

6. 本地测试

Claude 完成后,安装依赖并启动开发服务器:

bundle install
bundle exec jekyll serve --livereload

在浏览器中打开 http://localhost:4000。你应该能看到:

  • 导航栏中列出了所有页面
  • 每个页面都有占位符内容
  • 移动端菜单可以正常使用
  • 默认颜色方案(真正的品牌颜色将在第二阶段应用)

7. 验证

在进入下一步之前,检查以下内容:

  • 所有页面都能正常加载,没有错误
  • 桌面端和移动端的导航链接都能正常工作
  • 联系表单已显示(如果你选择了该功能)— 在 localhost 上以开发模式运行
  • http://localhost:4000/robots.txt 显示的是你的真实域名,而不是 https://landingpage.managertools.xyz

8. 推送到 GitHub

git add .
git commit -m "Initial scaffold from SiteKit Stage 1"
git push origin main

9. 验证部署

进入你的 Cloudflare Pages 控制台。你应该能看到一个新的部署正在构建。完成后,访问你网站的 URL 确认它已上线。


第二阶段:设计与内容

1. 准备你的品牌素材

在运行第二阶段之前,将你的品牌素材放入项目中:

  • Logoassets/images/logo.png
  • 照片assets/images/,使用描述性的文件名
  • 网站图标assets/images/favicon-source.png(至少 512x512 像素)

还没有素材? 没关系 — 第二阶段仍然可以正常运行。它会在代码中添加注释,告诉你之后在哪里放置素材。

2. 下载第二阶段提示词

回到 SiteKit,从 Prompts 标签页下载第二阶段提示词。

3. 再次运行 Claude Code

在同一个项目目录中:

claude

以同样的方式将第二阶段提示词交给它:

Read stage-2-design-content-your-site.md and follow all the instructions.

4. 让 Claude 应用设计

Claude Code 会:

  • 根据你的设计偏好选择品牌颜色
  • 更新 Tailwind 配置
  • 为每个页面撰写真实文案
  • 创建服务描述
  • 编写 SEO 元描述
  • 使用你的真实企业信息设置结构化数据(JSON-LD)
  • 整合你的品牌素材(如果有的话)

这个过程同样需要大约 10-15 分钟。

5. 审查更改

再次启动开发服务器并进行审查:

bundle exec jekyll serve --livereload

需要检查的内容:

  • 颜色与你的品牌一致
  • 文案符合你的企业风格(而非通用内容)
  • 电话号码和邮箱正确
  • 营业时间正确
  • 所有页面都有独特的内容(没有残留的占位符文本)
  • 移动端布局美观

6. 进行调整

对某些内容不满意?告诉 Claude:

The hero headline doesn't feel right. Can you make it more about [specific outcome]
and less formal? Our brand voice is casual and approachable.
Change the primary color to #2563eb (a brighter blue).
The About page needs more emphasis on our 15 years of experience.

Claude 可以根据你的需要反复迭代。

7. 推送并部署

git add .
git commit -m "Apply brand design and content from SiteKit Stage 2"
git push origin main

Cloudflare Pages 会自动部署你更新后的网站。


实用技巧

你可以随时重新下载提示词。 如果你在 SiteKit 中更新了企业信息或品牌问答,下载新的提示词即可。新的提示词会包含你最新的数据。

第二阶段可以重复运行。 如果你想重新设计,可以在同一个脚手架上重新运行第二阶段。Claude 会用新的设计覆盖现有的设计。

保持 SiteKit 数据更新。 如果你的营业时间变了、新增了服务项目或更换了电话号码——在 SiteKit 中更新它们。下次下载提示词时,就会包含正确的信息。

所有内容都属于你。 生成的网站完全是你的 — 你的 GitHub 仓库、你的 Cloudflare 托管、你的代码。SiteKit 只是帮你快速起步。