用Astro+Tailwind CSS作为技术栈，Cursor或Claude Code作为AI编程工具。工作流：先建设计系统（色彩/字体/间距变量），再逐模块开发（Pillar页→SKU页→Application页→Blog页），AI负责实现，人负责审查架构和SEO规范。

用 AI 开发外贸展示站（Cursor / Claude）全流程

用 AI 编程建站的最大陷阱不是 AI 写错代码，而是没有结构地乱写——最终得到一堆可以运行但无法维护、也无法扩展的代码。

这篇的重点是工作流：怎么用 AI 有序地建站，让每一步的输出都是下一步的基础。

技术栈选型

本系列选型：Astro + Tailwind CSS v4 + Cloudflare Pages

AI 工具选择（二选一）：

• Cursor：IDE 级别的 AI 集成，适合有代码基础的用户
• Claude Code（终端）：适合命令行工作流，Context 理解更强

Step 1：项目初始化

# 创建 Astro 项目
npm create astro@latest waijian-site
# 选择：Empty / TypeScript / Yes to install deps

cd waijian-site

# 安装 Tailwind CSS
npx astro add tailwind

# 初始化 Git
git init
git add .
git commit -m "init: Astro + Tailwind"

目录结构规划（提前和 AI 对齐）

在开始让 AI 写代码之前，先建好目录结构，写在 STRUCTURE.md 里：

src/
├── layouts/
│   ├── BaseLayout.astro      # 全局布局（头尾导航）
│   └── PageLayout.astro      # 内容页布局
├── components/
│   ├── ui/                   # 基础 UI 组件（Button、Card 等）
│   ├── sections/             # 页面区段（Hero、ProductGrid 等）
│   └── seo/                  # SEO 相关（Meta、Schema）
├── pages/
│   ├── index.astro            # 首页
│   ├── products/
│   │   └── [category]/       # Pillar 页
│   │       └── [slug].astro  # SKU Cluster 页
│   ├── applications/
│   │   └── [slug].astro      # Application Cluster 页
│   └── blog/
│       └── [slug].astro      # Resource Cluster 页
├── content/
│   ├── products/             # 产品数据（YAML/JSON）
│   ├── applications/         # 场景数据
│   └── blog/                 # 博客 MDX
└── styles/
    └── global.css            # 品牌色/字体变量

把这个文件存入项目根目录，后续每次开启新的 AI 对话，都把 STRUCTURE.md 作为上下文传入。

Step 2：建立设计系统（第一个 AI 任务）

在写任何页面之前，先让 AI 建立设计系统。这样后续所有页面的视觉语言才会一致。

提示词：

我在用 Astro + Tailwind CSS v4 建一个 B2B 工业品外贸站。

请帮我在 src/styles/global.css 中定义以下设计 token：

品牌色：
- 主色：#1e3a5f（深海军蓝）
- 辅色：#64748b（钢铁灰）
- 强调色：#d97706（工业橙）
- 背景：#f8fafc

字体：
- 标题：Space Grotesk（从 Google Fonts 引入）
- 正文：Inter（从 Google Fonts 引入）

间距系统：使用 Tailwind 默认即可

请同时在 astro.config.mjs 中配置 Tailwind，
并在 BaseLayout.astro 中引入字体 CSS。

项目目录结构见 STRUCTURE.md（已附上）。

Step 3：逐模块开发（正确的 AI 编程顺序）

错误的方式：一次性让 AI “帮我建一个完整的外贸网站”

正确的方式：按模块逐个开发，每个模块完成后测试，再进入下一个

推荐顺序：

1. BaseLayout（全站头尾导航）
2. 首页（Hero + 品类入口）
3. Pillar 页模板（一个品类）
4. SKU Cluster 页模板（一个型号）
5. Application Cluster 页模板
6. Resource Cluster / Blog 页模板
7. 询盘表单组件
8. 页面 SEO 组件（Meta + Schema）

每个模块的提示词结构

任务：构建 [模块名]
文件位置：[精确路径]
依赖的已有组件：[列出可复用的组件]
设计要求：
- [具体视觉要求]
页面类型：[Pillar/SKU/Application/Resource]
注册表规格：[从注册表提取的 pkw/skw/nkw]

请严格遵守以下约束：
- 使用 Tailwind CSS 类，不写内联样式
- 语义化 HTML（正确使用 h1/h2/h3 层级）
- 图片使用 alt 属性，包含关键词
- 所有内链使用精准锚文本（见注册表规格）

Step 4：SEO 组件（关键，不要遗漏）

每个页面需要一个 SEO 组件，自动生成 <title>、<meta description>、Open Graph 等标签。

让 AI 生成 src/components/seo/SEOHead.astro：

请创建一个 Astro SEO 组件，接受以下 props：
- title: string（页面标题，max 60字符）
- description: string（meta description，max 160字符）
- canonicalUrl: string（规范链接）
- ogImage?: string（Open Graph 图片）
- schema?: object（JSON-LD 结构化数据，可选）

组件需要生成：
1. <title>
2. <meta name="description">
3. <link rel="canonical">
4. Open Graph 标签（og:title, og:description, og:image, og:type）
5. Twitter Card 标签
6. 如果传入 schema，注入 <script type="application/ld+json">

AI 编程的几个实用原则

原则一：每次只做一件事

不要问“帮我写整个产品页”。要问“帮我写产品页的 Hero 区，包含 H1、副标题、两个 CTA 按钮，用我定好的设计 token”。

原则二：让 AI 解释它做的每个决定

在提示词末尾加：“请简单说明你做的主要设计/技术决定，方便我审查”。这样你能快速发现偏差。

原则三：建立 CONTEXT.md 文件

在项目根目录放一个 CONTEXT.md，写明：

• 项目背景（B2B 工业品，什么产品）
• 注册表摘要（核心页面的 PKW/SKW/NKW）
• 设计原则（品牌色、字体、间距规范）
• 代码规范（组件命名规则、文件组织方式）

每次新开 AI 对话，把 CONTEXT.md 的内容作为上下文。Cursor 和 Claude Code 都支持直接读取项目文件，但明确传入更可靠。

原则四：立即测试，发现问题立刻修

AI 生成的代码不要堆积，写一个模块测试一个，发现问题当场修好再继续。堆积了5个模块后才发现设计 token 没正确引入，改起来会非常痛苦。

常见问题排查

问题：Tailwind 样式不生效 检查 astro.config.mjs 里是否正确导入了 Tailwind 插件，以及 global.css 是否在 BaseLayout 里引入。

问题：AI 生成的内联样式和 Tailwind 混用 在提示词里明确禁止：不要使用 style="" 内联样式，全部用 Tailwind class

问题：多个页面的 H1 都一样 这是 AI 自作主张复用了模板。在每个页面的提示词里明确传入注册表 PKW，要求 H1 使用 PKW。

→ Pillar 与产品页开发：基于注册表意图的页面结构实现