前端UI组件【免费下载链接】astrowind⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.项目地址https://gitcode.com/GitHub_Trending/as/astrowind点击查看免费下载AstroWind 是一套基于 Astro v7 与 Tailwind CSS v4 的开源静态网站模板它在仓库根部随附了AGENTS.md指令文件和.agents/skills/技能目录让 Claude Code、Cursor、GitHub Copilot 等任何 AI 编程助手都能读懂项目的约定技术栈、目录布局、命令规范、组件模式与验证流程。本文以该模板自带的指南文档为核心结合仓库中真实存在的指令文件与技能文件讲解如何用 AI 助手完成新增页面、新增博客、改品牌色、配置表单、部署上线等日常营销站点工作并给出让 AI 产出保持可审查性的实操习惯。AstroWind 为 AI 编程助手提供了什么营销站点的多数工作并不难只是冗长一个新页面要和已有页面风格一致、一个区块要从某页挪到另一页、一篇博客要带上正确的 front matter、一个部署参数没人记得住。AI 编程助手恰好擅长这类工作——前提是它了解项目的约定。AstroWind 把约定放在两个地方让同一个助手既能创建项目、也能改品牌、还能讲解模板原理而不用靠猜。AGENTS.md项目约定的总入口仓库根目录的 AGENTS.md 描述了技术栈、目录布局、常用命令、代码规则与验证清单。大多数编码 Agent 会自动拾取AGENTS.md可查阅所用工具的文档仓库中的 CLAUDE.md 则只有一句话——See AGENTS.md for all project documentation and AI agent instructions即单纯指向AGENTS.md避免维护两份重复内容。该文件实际包含以下关键信息值得逐项了解部分内容要点Project Overview基于Astro v7 Tailwind CSS v4 TypeScript 5.9 MDX Sharp的免费开源模板产出完全静态、面向性能/SEO/无障碍优化的站点Skills在执行项目专属任务禁用博客、Open Graph 图片、base path、CMS、部署、Header 定制等前先检查.agents/skills/中是否有现成技能并遵循它Quick Referencenpm run devlocalhost:4321、npm run build产物输出到./dist/、npm run preview、npm run checkastro check ESLint Prettier、npm run fixNode.js 要求 ≥ 22.22.3Architecture目录结构、~/路径别名、astrowind:config虚拟模块配置系统src/config.yaml导出SITE、I18N、METADATA、APP_BLOG、UI、ANALYTICSTailwind CSS v4CSS-first 配置src/assets/styles/tailwind.css、class 式暗色模式、twMerge类合并Content Collectionssrc/content.config.ts中基于 Content Layer API 的glob()加载器博客文件位于src/data/post/Verification Checklist改动后必须验证npm run build成功、npm run check通过、浏览器目检首页/博客/暗色模式/移动端菜单、结构化数据与实际站点一致值得注意的是AGENTS.md还记录了模板的两个设计决策astrojs/partytown是默认关闭的可选第三方脚本方案astro.config.ts中hasExternalScripts false保证基础模板不携带外部脚本Astro 原生 CSP 在本版本中有意未开启因为它与默认开启的ClientRouter /视图过渡不兼容。.agents/skills/把重复任务写成菜谱.agents/skills/目录下每个 Markdown 文件对应一类高频任务按配方形式编写改哪些文件、按什么顺序、要验证什么。AGENTS.md会指示助手在动手做任何项目专属改动之前先查找匹配的技能文件因此你甚至不需要在提示词里点名它们。你也可以直接阅读这些文件——它们很短本身就是一份不错的模板手册。仓库中实际存在 16 个技能文件.agents/skills/目录文档重点列出的几个如下技能文件用途add-page.md用 widget 组合新页面并带上元数据add-blog-post.md写一篇带正确 front matter 与图片处理的博客styling.md颜色、字体与 Tailwind tokenconfigure-contact-form.md把联系表单接到后端或表单服务deploy-cloudflare.md部署到 Cloudflare Pages此外还有add-component.md、add-structured-data.md、content-at-build-time.md、customize-header.md、deploy-with-base-path.md、disable-blog.md、set-open-graph-image.md、setup-decap-cms.md、use-shadcn-tokens.md、use-widgets.md、write-landing-page.md覆盖从 widget 目录到结构化数据、从 base path 部署到 shadcn token 的各类场景。与 AI 编程助手配合良好的提示词以下指令属于 Claude Code、Cursor 或 GitHub Copilot 这类助手能够端到端完成的任务类型完成后用npm run check和一次构建来确认即可Add a/careerspage with a hero, a list of open positions as feature cards and a call to action, using the same header as the rest of the site.Turn the pricing section of the sales landing page into a comparison table with three plans.Write a blog post from these notes, with a cover image fromsrc/assets/images/, the categoryProductand the tagsrelease,changelog.Change the brand colors to#0f766eand#f59e0b, in light and dark mode, and show me the pages where the contrast may be a problem.Disable the blog and remove it from the menus and the footer.Deploy this site under/handbookon GitHub Pages.Add FAQ structured data to the pricing page.Replace the testimonials on the home page with a logo strip and a single quote.这些请求之所以能稳定落地是因为每个请求都映射到一到两个技能文件加上 widget 目录而不是让助手自由发挥引入新风格。以其中三个为例说明底层机制加一个/careers页面—— add-page.md 给出标准模板在src/pages/新建.astro文件用PageLayout自带 Header Footer或裸Layout用src/components/widgets/下的Hero、Features等组件组合页面widget 统一接收id、title、subtitle、tagline等标准化 props图标使用tabler:icon-name格式来自iconify-json/tabler。页面按文件名自动路由。把价格区块改成三档对比表—— use-widgets.md 的目录中Comparisonwidget 专门做功能矩阵或我们 vs 他们表格核心 props 为columns[{ title, subtitle?, highlight?, callToAction? }]、rows[{ label, description?, values, group? }]mode支持features/versus而Pricingwidget 支持hasRibbon、highlight、billingLabels等订阅卡细节。把整个价格区块换成Comparison组件即可。改品牌色为#0f766e和#f59e0b—— styling.md 说明所有主题 token 定义在src/assets/styles/tailwind.css的theme块中并映射到src/components/CustomStyles.astro的 CSS 变量--aw-color-primary、--aw-color-secondary、--aw-color-accent、--aw-color-text-heading等需同时维护:root与.dark两套。该技能还专门提醒演示页把高亮词包在text-accent dark:text-white里是因为默认紫色 accent 在暗色背景上对比度不足改色时要留意这类对比度问题正好对应提示词中show me the pages where the contrast may be a problem的要求。让 AI 生成的代码保持可审查的习惯文档给出了五条实操习惯配合源码可以落到具体动作上指向一个演示页面。像产品落地页那样但是给服务的——给助手一个可复制的具体结构。这正是模板被设计出来的用法widget 组件use-widgets.md 中的目录与 demo 对照保证了新页面天然贴合站点既有风格。要求跑检查。npm run check依次执行astro check、ESLint 和 Prettiernpm run build能捕获坏掉的 import 和非法 front matter。让助手在汇报前把两个都跑一遍失败时展示输出给你看。这一要求有明确的命令依据AGENTS.md的 Quick Reference 表和 Verification Checklist 都列出了这些命令。审查 diff 而不是摘要。助手喜欢慷慨地写总结但多数任务的 diff 很短那才是该读的东西。审查时重点找硬编码颜色应该是 token即CustomStyles.astro中的--aw-color-*变量、指向#的链接、以及被留在页面里的演示内容。内容决策留给自己。助手擅长结构与机制标题、报价、证据是你的工作——真实的 testimonials、真实的数字、真实的截图。一个任务一个会话。先一个页面再一篇博客再一次部署。长会话会跑偏短会话能收尾。添加你自己的 AGENTS.md 规则这些文件就是普通 Markdown且属于你的仓库可以随意适配为团队反复做的事新增技能怎么加案例研究、怎么发 release note、怎么更新价格表。沿用现有文件的结构步骤steps、涉及文件files involved、验证verification。参考 add-blog-post.md 的写法步骤 → front matter 字段表 → URL 规则 → 自动获得的能力title/meta/Open Graph/JSON-LD/RSS→ 注意事项。往AGENTS.md加你自己的规则命名规范、语气语调、哪些页面禁止改动、分支与 review 流程。结构性变更要同步更新技能当你加了新的内容集合、换了部署目标要在同一个 pull request 里更新受影响的技能文件。一份过时的菜谱比没有更糟。这里有一条值得注意的更新原则由于CLAUDE.md只是指向AGENTS.md的指针见 CLAUDE.md你只需维护AGENTS.md一份真相源所有 Claude Code 用户会自动获得最新约定。不用 AI 助手也能用上这套体系本文一切内容都不是必需的。技能文件同时也是模板最短的文档读一遍 widget 目录和落地页配方use-widgets.md 与 write-landing-page.md大约花十分钟就覆盖了入门指南和品牌定制指南长篇讲解的大部分内容模板深度解析则适合想彻底弄清内部机制的人。这套人可读、Agent 可执行的双重设计是 AstroWind 让 AI 协作保持高质量的关键——约定的载体本身就是最好的文档。赞分享前端UI组件【免费下载链接】astrowind⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.项目地址https://gitcode.com/GitHub_Trending/as/astrowind点击查看免费下载相关推荐Biome AI 编码助手技能体系Skills完全指南.claude/skills 目录架构与实战用法Biome AI 编码助手技能体系Skills完全指南.claude/skills 目录架构与实战用法 本文基于 .claude/skills/READM开发工具Lint格式化静态分析代码质量前端Julia AGENTS.md 实战AI Agent 源码协作规范、构建测试流程与 Agent Skills 技能体系Julia AGENTS.md 实战AI Agent 源码协作规范、构建测试流程与 Agent Skills 技能体系 Julia 仓库根目录下的 AGENT编程语言编译器语言运行时标准库JIT编译Stenographer未来展望AI驱动的智能威胁检测系统 - 终极网络监控革命Stenographer未来展望AI驱动的智能威胁检测系统 终极网络监控革命 在当今网络安全威胁日益复杂的时代 Stenographer 作为一款高性能的全上一篇Windows 10/11 iPhone USB网络共享驱动一键安装3分钟解决苹果设备连接难题下一篇5个实战技巧高效实现Daz到Blender的3D角色迁移创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考