# 提示词库 复制，粘贴，审核。 > 可直接复制的 AI 提示词，用于在 Claude Code、Codex、Cursor 或 Copilot 中用 vagejs 搭建网站：添加页面、修复错误、翻译和安全发布。 这些是可以直接复制的提示词，用来配合 AI 编程助手搭建和维护 vagejs 网站，从写第一个页面，到翻译页面或安全发布。 更新于 2026年10月28日 要新建网站？[提示词生成器](https://vagejs.com/prompts/builder/)会根据你的几个回答，替你写出第一条提示词。这些提示词适用于任何能读取你项目的编程助手，无论是 Claude Code、Codex、Cursor、Copilot 还是 Gemini CLI。每条提示词都会让助手去看 `AGENTS.md`，把事实掌握在你手里，并以一次检查收尾，所以你得到的是一个能正常运行的网站，而不是一个自信满满的猜测。把【】里的部分换成你自己的内容。 ## 新建网站 ``` 阅读 AGENTS.md。这个网站是为【我的业务】做的，它为【什么人】提供【什么服务】。写一个首页，包含一句清晰的标题、三个简短的版块和一个联系链接。凡是你原本需要编造的内容，都先问我。然后运行 npm run check，直到它报告 0 个错误。 ``` ``` 把这个 Figma 设计做成这个 vagejs 网站的一个页面：【Figma 链接】。先阅读 AGENTS.md。使用 Figma 的 MCP 工具，要求输出普通的 HTML 和 CSS，不要 React 或 Tailwind。把页面外观放进 src/layouts/ 里的布局和 public/styles.css，把所有文字原样放进 Markdown 页面。把图片保存到 public/images/ 并写好替代文本。不要使用浏览器端 JavaScript。运行 npx vage check 和 npx vage audit，修复它们报告的问题，并列出你没能还原的部分。 ``` 设置步骤和后续提示词见[把 Figma 设计变成网站](https://vagejs.com/guides/figma-to-website/)（英文）。 ``` 根据下面的笔记，建议这个网站需要哪些页面。每个页面给我一个标题、一段少于 160 个字符的描述和网址。在我批准这份清单之前，不要创建任何东西。 【笔记】 ``` ## 添加和编辑内容 ``` 用下面的文字在 /【页面路径】/ 添加一个页面。保留我的措辞，只改正错别字，并写一段少于 160 个字符的描述。运行 npm run check。 【文字】 ``` ``` 根据这些笔记写一篇题为“【标题】”的博客文章。使用 type: article，author 和 datePublished 只能用我在这里提供的信息：【作者】、【日期】。写完后运行 npm run check。 ``` ``` 把 /【旧路径】/ 重命名为 /【新路径】/。移动文件，在 vage.config.ts 里添加重定向，并更新所有指向旧地址的链接。用 npm run check 确认。 ``` ## 语言和组件 ``` 把 /【页面路径】/ 翻译成【语言】。如果网站还没有 i18n 设置，先在 vage.config.ts 里添加 i18n: { locales: ["【语言代码】"] }。把译文保存到 src/pages/【语言代码】/ 下，文件名保持不变，标题和描述也要翻译，不要添加原文里没有的任何事实。运行 npm run check，并列出还需要翻译的页面。 ``` ``` 让 /【页面路径】/ 上的【组件名】组件变成可交互的，让它能够【描述它应该做什么】。把它放在 src/components/ 里，只传给它简单数据（文本、数字、列表），除非它在页面顶部，否则使用 client:visible。如果这个页面是 .md 文件，先把它改成 .mdx。然后运行 npm run audit，告诉我这个页面现在加载了多少 JavaScript，并说明纯 HTML 能否完成同样的事。 ``` ## 修复问题 ``` 运行 npx vage check --json。逐个文件修复每个错误。然后列出你没能修复的警告，并解释原因。 ``` ``` 运行 npm run audit，用通俗易懂的中文解释结果。在不改变页面外观的前提下修复你能修复的问题，并告诉我哪些需要我来决定。 ``` ``` /【页面路径】/ 这个页面看起来不对：【描述你看到的情况】。找出原因，修复它，然后运行 npm run check。 ``` ## 搜索和 AI 可见性 ``` 检查每个页面的标题和描述。标出超过 60 个字符的标题、超过 160 个字符的描述，以及任何两个针对同一主题的页面。提出修改建议，但暂时不要改动任何内容。 ``` ``` 我们的商家信息是：【名称】、【网站】、【Logo 路径】。只用这些信息，把它们作为 Organization 结构化数据添加到 vage.config.ts 里。运行 npm run check。 ``` ``` 我们想允许 AI 搜索爬虫，但不允许 AI 训练爬虫。更新 vage.config.ts 里的 robots 设置，然后给我看生成的 robots.txt。 ``` ## 统计分析 ``` 添加 Google Analytics 4，衡量 ID 为 G-XXXXXXX。从环境变量里读取它，不要写在代码里，并且一开始把同意状态设为 denied。运行 npm run check。 ``` ``` 把“预约通话”按钮的点击作为一个名为 book_call 的事件来跟踪。在 vage.config.ts 里声明这个事件，并在链接上使用 data-vage-event，不要写自定义 JavaScript。 ``` ## 安全发布 ``` 运行 npx vage deploy:github --dry-run，准确告诉我哪些文件会被提交。不要推送任何东西。 ``` ``` 让网站做好发布准备：运行 check、build 和 audit，总结我需要先修复的问题。在部署之前停下来。我会自己运行部署。 ``` ## 获得更好结果的小技巧 - **把事实告诉它。** 粘贴你的笔记、价格或营业时间。需要靠猜的助手，就真的会去猜。 - **先要一个计划**，用于较大的改动：“在你修改任何东西之前，先给我看计划。” - **一条提示词只做一件事。** 一小步一小步、每步都检查过的改动，比一次大改更容易审核。 - **始终以检查收尾。** `npm run check` 就是你确认网站仍然正常的方式。