概述
它是什么、给谁、你需要什么
三个问题，先答完
正在比较产品的访客，想先看摘要再看细节。首屏之后的第一屏就回答：是什么、给谁、我需要准备什么。规格可以再往下。它是什么
一个免费、开源的网站模板，基于 Astro 和 Tailwind CSS：页面、组件、博客、SEO 和图片优化，可以直接改。
给谁
想要一个快、结构清楚的站点，又不想每个区块都从零设计的开发者和小团队：创业团队、SaaS、作品集、营销站、博客。
你需要什么
Node.js 22.22 或更新版本、一个代码编辑器，以及大约十分钟。不用账号，也不用许可证密钥。
主要功能
它能做什么，用买家的话说
点一个功能就能看到。每个标签写的是它带来的结果；完整清单在下面的规格里。
规格
你到底会拿到什么
规格是赢得信任的地方
读到这里的人正在做决定。把准确的版本、大小、要求和内容给他们，放进一份能扫、能对比的清单。框架
Astro 7.x，静态输出；需要按需页面时可以再加适配器。
样式
Tailwind CSS 4，配置写在 CSS 里，设计变量和 shadcn/ui 兼容。
语言和工具
配好了 TypeScript、ESLint 和 Prettier；npm run check 会把这三样都跑一遍。
内容
Markdown 和 MDX 博客文章，带类型的 schema；附带 6 篇示例文章。
页面
4 个首页示例、6 个落地页示例，以及关于、服务、价格、联系、404、条款和隐私页面。
环境要求
Node.js 22.22 或更新版本。可以部署到任何静态托管；附带使用 nginx 的 Dockerfile。
图集
从每个角度看它
买家会放大看。六到八张真实图片，每张配一句说明他们在看什么，比一段文字能回答更多问题。点任意一张就能打开。
规格，摊开来看 团队在用这个模板工作 日常的工作台 在规划一次发布 路线图讨论 设计进行中
上手
从下载到站点跑起来，三步
产品页该让人看见拿到手之后的头几分钟。买完之后的意外越少，退货就越少。
创建项目
运行 npm create astro@latest -- --template arthelokyo/astrowind，然后 npm install 和 npm run dev。
改成你的
在 src/config.yaml 里设置名称、网址和元数据；颜色和字体在 CustomStyles.astro；再换上标志。
构建并部署
npm run build 会生成静态的 dist/ 目录，可以放到 Vercel、Netlify、Cloudflare、GitHub Pages，或你自己的服务器。
经验
让产品页保持诚实的几条限度
这些是限度，不是业绩。产品本身的数字在上面的规格里。
一页只讲一个产品
一页卖两样东西，两样都卖不动。变体可以；替代品不行。
三层深浅
概述、功能、规格。每一层回答的，是更接近决定的买家会问的问题。
产品正在被使用
至少有一张真实的使用照片，而不只是渲染图。买家相信场景。
价格写在页面上
产品页不写价格，买家就会去别处找。直接写出来。
证明
用过的人怎么说，放在这里
下面是占位，故意这样写。在产品页上，评价该提到具体用法：做了什么、花了多久、什么让他们意外。
一句评价，写出客户用这个产品做了什么，以及花了多久。
客户姓名
职位，公司（示例评价）
一句关于某条规格的评价：某项要求达到了，某个限度并没有成为问题。
客户姓名
职位，公司（示例评价）
短短一句，把它和客户当时考虑过的另一个选择放在一起比。
客户姓名
职位，公司（示例评价）
常见问题
买家会问产品页的那些问题
在这里答完，就不用再写信来问。同样的回答也能在搜索里变成更丰富的常见问题结果。
什么是产品详情落地页？
专门介绍一个产品或一项服务的页面，分成几层：一句话摘要、主要好处、完整规格，以及买家做决定需要的一切（价格、是否能买到、证明、常见问题）。它取代销售对话里来回确认的那些话。
它和销售页、点击跳转页有什么不同？
销售页在说服；点击跳转页在搭桥；产品页在说明。来的人已经想要这类东西，正在比较。这里靠的是完整和清楚，不是劝说。
细节到什么程度算太多？
只要按深浅排好，就不算多。页面上方保持能扫读（概述和主要功能），细节放到更下面的规格里。没人会因为规格表长而离开；他们离开，是因为第一屏含糊。
价格和是否能买到放在哪里？
大家已经认识的产品，放得靠上；新东西，放在功能之后。无论哪种，都在页面上平白写出来。「联系我们询价」其实是伪装的表单，会让转化变少。
产品页需要什么样的图片？
至少有一张是产品正在被使用，而不只是白底产品图。软件用截图，实物用场景图；产品会动的话，再加一段短演示。
用 AstroWind 怎样改这一页？
每一块都是 src/components/widgets 里的组件（Hero、Content、Features、Steps2、Stats、Testimonials、FAQs、CallToAction）。换上文案和图片，保留这三层深浅，把按钮指向你的商店或结账。