· 教程 · 6 分钟阅读
用 AI 编程助手和 Astro 做网站
AstroWind 自带 AGENTS.md 和 skills,用来把模板讲给任何 AI 编程助手。哪些需求好做,以及怎么让结果方便复查。
营销站上的大部分工作并不难,只是长:新开一页,看起来要和别的页一样;把某一段从这页挪到那页;写一篇 front matter 正确的博客;改一个谁都记不住的部署设置。AI 编程助手正好擅长这种活,前提是它知道这个项目的规矩。AstroWind 把这些规矩放在两个地方,这样同一个助手既可以创建项目,也可以改成你的品牌,或者讲清楚它是怎么工作的,而不用靠猜。
AstroWind 为 AI 编程助手准备了什么
根目录的 AGENTS.md 写了技术栈、目录怎么摆、要跑哪些命令,以及代码遵循的规则。多数编程助手会自己读到 AGENTS.md。具体看你所用工具的文档(这个仓库里的 CLAUDE.md 只是指向它)。
.agents/skills/ 里每个常见任务一份 Markdown,写成操作步骤:动哪些文件、按什么顺序、做完怎么核对。举几个例子:
| Skill | 它做什么 |
|---|---|
add-page.md | 用小组件拼出一个新页面,并写好元数据。 |
add-blog-post.md | 写一篇 front matter 和图片都对的文章。 |
styling.md | 颜色、字体和 Tailwind 的 token。 |
configure-contact-form.md | 把联系表单接到后端或表单服务。 |
deploy-cloudflare.md | 部署到 Cloudflare Pages。 |
后面还有十来份,从小组件目录、结构化数据,到带 base 路径的部署。AGENTS.md 会让助手在做任何跟项目有关的事之前,先找一份对得上的 skill,所以你不用特意提起它们。你自己也可以读:都很短,当手册用也够。
哪些说法对 AI 编程助手比较好用
下面这种交代,Claude Code、Cursor 或 GitHub Copilot 这类助手可以从头做到尾,再用 npm run check 和一次构建来确认:
- 「加一个
/careers页面:要有首屏、用功能卡片列出在招的职位,再加一个行动号召,页眉和站点其他页面一样。」 - 「把销售落地页的价格区改成一张三档方案的对比表。」
- 「根据这些笔记写一篇博客,封面图从
src/assets/images/里挑,分类用产品,标签用发布和更新日志。」 - 「把品牌色改成
#0f766e和#f59e0b,浅色和深色都要,并告诉我哪些页面的对比度可能有问题。」 - 「关掉博客,并从菜单和页脚里拿掉。」
- 「把这个站点部署到 GitHub Pages 的
/handbook下面。」 - 「给价格页加上 FAQ 结构化数据。」
- 「把首页的客户评价换成一条 logo 条和一句引言。」
每一条都对应一两份 skill,再加上小组件目录。所以结果往往会和站点其余部分长得像,而不是另起一种风格。
让 AI 写出的代码还看得下去的习惯
指给它一个现成的示例页。 「像产品落地页那样,但是做给一项服务的」会给助手一个具体结构去抄。模板本来就是打算这样用的。
让它跑检查。 npm run check 会跑 astro check、ESLint 和 Prettier;npm run build 能抓住坏掉的 import 和不合规格的 front matter。让助手在回复之前把两个都跑一遍,失败时把输出给你看。
看 diff,别只看摘要。 助手的总结往往写得很满。这些任务的 diff 通常不长,那才是该读的东西。留意写死的颜色(应该用 token)、指向 # 的链接,以及忘了换掉的示例文案。
内容上的决定留给自己。 助手擅长结构和机械的部分。标题、卖点和证据是你的事。真实的评价、真实的数字、真实的截图。
一次对话只做一件事。 先一页,再一篇文章,再一次部署。对话一长就容易漂,短的才能做完。
加上你自己的 AGENTS.md 规则
这些文件就是普通 Markdown,属于你的仓库,所以尽管改:
- 团队反复做的事,就加一份 skill:怎样加一篇案例、怎样发一条更新说明、怎样改价格表。照着现有文件的样子写:步骤、涉及的文件、做完怎么核对。
- 把你自己的规则写进
AGENTS.md:命名、语气、哪些页面不能动、分支和复查怎么走。 - 改了结构性的东西(新的内容集合、不同的部署目标)时,同一份 pull request 里把受影响的 skill 一起改掉。过时的步骤比没有更糟。
没有 AI 助手也可以做
这里没有任何一步是必须用助手的。这些 skill 也是模板最短的文档:小组件目录和落地页那份步骤,读十分钟就够,能盖住入门指南和定制指南里大部分展开来讲的内容。