如何使用Claude设计一套精简、可复用、分阶段的工作流，每个阶段只做一件事，输出格式对应用途。

让我重新梳理完整的 4 步体系：

STEP 0 · 大纲设计
    输入：页面定位 + 关键词清单 + 表格数据
    输出：Markdown 大纲（含章节架构 + 关键词分配 + 表格位置 + 写作规则）
    自检：关键词覆盖率 + 章节商业职责检查
         ↓
STEP 1 · 母版声明（存档，只用一次）
    已有 CSS + 组件规律声明
         ↓
STEP 2 · SVG 视觉图
    输入：STEP 0 大纲 + 母版声明
    输出：1920px 桌面端 SVG（单独输出，不进 Word）
         ↓
STEP 3 · 增量 CSS + 组件结构
    输入：STEP 0 大纲 + 母版声明 + SVG 确认
    输出：增量 CSS（txt）+ Gutenberg 组件结构（txt）

现在我写出完整的 4 步提示词。

STEP 0 · 大纲设计提示词

# SUGA 支柱页 · 大纲设计

## 任务说明
你是一个 B2B 制造业 SEO 内容策略师。
基于我提供的页面信息和关键词清单，输出这个支柱页的完整内容大纲。
不输出任何 SVG / CSS / 组件代码。只输出 Markdown 大纲。

---

## 页面基础信息

- 页面名称：【SMT PCB Assembly Services】
- URL：【/pcb-assembly-services/smt-pcb-assembly/】
- 页面类型：【L2 商业转化支柱页】
- 品牌定位：China-based 高端 PCBA 制造商，服务欧美 B2B 采购
- 父页面：【PCB Assembly Services】
- 兄弟页面：【Turnkey PCBA / Prototype PCB Assembly / Quick-Turn PCB Assembly】
- 主要目标读者：OEM 采购经理 / 供应链经理 / 硬件工程师

---

## 关键词清单（原始，含重复）

【粘贴原始关键词，每行一个】

---

## 我提供的表格数据

### 表格 A — 【表格名称】
【粘贴原始数据】

### 表格 B — 【表格名称】
【粘贴原始数据】

### 表格 C — 【表格名称】
【粘贴原始数据】

---

## 与已有支柱页的差异说明
（只写差异点，相同结构不写）

- 【例：核心差异化是工艺精度控制，不是 BOM 风险控制】
- 【例：Section 03 对比逻辑改为 SMT vs THT vs Mixed-Tech】
- 【例：Quality 章节增加 SPI / AOI / X-Ray 专属模块】

---

## 输出格式要求

严格按以下结构输出 Markdown，不输出解释性文字。

### 1. 页面战略定位

- 页面类型与 silo 位置
- Engine A（商业转化词）：列出核心词
- Engine B（决策支持词）：列出核心词
- 兄弟页边界：哪些词不在本页承载

### 2. 章节架构总览

| # | H2 标题 | 内容类型 | 商业职责 | 背景色 | 表格 |
|---|---|---|---|---|---|
| 01 | ... | ... | ... | 白底/蓝底/深色 | 无/表A |

### 3. 每个章节详细大纲

#### Section 01 · 【H2 标题】
**定位**：这个章节解决买家什么问题
**承载关键词**：列出 3-8 个（含高/低权重词，低流量词标注落点）
**H3 子结构**：
- H3: 【子标题】— 内容边界说明
**表格**：无 / 表A，插入位置说明
**Do**：写什么
**Do Not**：不写什么，兄弟页边界

（每个 section 重复）

### 4. FAQ 设计（8条）

- Q1 ·
- Q2 ·
- Q3 ·
- Q4 ·
- Q5 ·
- Q6 ·
- Q7 ·
- Q8 ·

### 5. Related Services 卡片

| 类型 | 页面名称 | 一句话描述 |
|---|---|---|
| sibling | ... | ... |
| parent | ... | ... |

### 6. 写作规则

- Rule A ·
- Rule B ·
- Rule C ·

---

## 自检清单（大纲输出完毕后立即执行，以表格形式附在大纲末尾）

### 自检 A · 关键词覆盖状态

| 状态 | 数量 | 说明 |
|---|---|---|
| 已用·核心 | ? | H1/Hero/核心章节承载 |
| 已用·支持 | ? | What Is / Comparison / Cost 等章节 |
| 已用·变体 | ? | 主词已覆盖的同义/词序变体 |
| 已用·低权重落点 | ? | 有流量但品牌权重低，布局在 FAQ/Cost/Related |
| 排除·地域冲突 | ? | US/UK/Australia 等与定位冲突 |
| 排除·兄弟页 | ? | 属于其他页面主题 |
| 排除·范围外 | ? | 非本服务语义 |

### 自检 B · 章节商业职责检查

| # | H2 | 有明确转化职责 | 兄弟页边界清晰 |
|---|---|---|---|
| 01 | ... | ✓/✗ | ✓/✗ |

### 自检 C · 硬规则核查

- [ ] 无未经核实的认证声明
- [ ] 无固定价格 / 交期承诺
- [ ] 无虚构案例（Scenario ≠ Case Study）
- [ ] 表格标准引用全部是 project-specified 语境
- [ ] FAQ 无定义重复，无泛工厂问题
- [ ] 低权重词已分配到低显眼位置，未出现在 H1/H2
- [ ] Phase 2 内容未出现在前台大纲
- [ ] Related Services 链接边界正确

### 自检 D · 跑偏检测

输出完毕后回答以下问题（Y/N + 一句话说明）：
- 本页重心是否始终保持商业转化？
- 是否有任何章节在讲兄弟页的核心内容？
- 是否有任何章节在做知识科普而非服务说明？

STEP 1 · 母版声明（存档版，只用一次）

# SUGA 支柱页系统 · 母版声明

## 技术栈
WordPress + Blocksy + Gutenberg + Stackable + Ninja Tables + Fluent Forms

## CSS 规则（必须遵守）
1. 所有样式写在 body[data-prefix="single_page"] 作用域内
2. 颜色只用 var(--suga-*) 变量，不硬编码 hex
3. 新 class 命名：suga-【页面前缀】-*
4. 已有 class 不重复定义，只做 modifier 叠加
5. Section 背景色只在 .suga-pillar-section--【modifier】 上定义
6. 能复用现有 class 的绝不新建

## 全局 CSS 变量（不得重复定义）

--suga-page-max-width: 1240px
--suga-page-side-padding: 60px
--suga-color-navy: #0b2745
--suga-color-hero-navy: #081a2e
--suga-color-title: #102a46
--suga-color-h2: #0b2038
--suga-color-text: #52677e
--suga-color-muted: #6a7f94
--suga-color-orange: #FD5320
--suga-color-section-blue: #eef4fa
--suga-color-border: #d7e1ea
--suga-color-border-strong: #d9e3ec

## 可复用 Class（直接用，不重新定义）

结构类
  .suga-pillar-section               全宽 section 外壳
  .suga-pillar-section__inner        1240px 居中容器

排版类
  .suga-pillar-kicker-line           橙色短线
  .suga-pillar-kicker                小标签
  .suga-pillar-h2                    section 主标题
  .suga-pillar-lead                  引导语
  .suga-pillar-h3                    子标题
  .suga-pillar-body                  正文

Hero 类（只换文案）
  .suga-pcba-hero / .suga-pcba-hero__inner
  .suga-pcba-hero-h1 / .suga-pcba-hero__h2 / .suga-pcba-hero-subtext
  .suga-pcba-hero-actions
  .suga-pcba-btn-primary / .suga-pcba-btn-secondary
  .suga-pcba-trust-grid / .suga-pcba-trust-item
  .suga-pcba-trust-icon / .suga-pcba-trust-title / .suga-pcba-trust-desc

卡片类
  .suga-info-card / .suga-info-card__title / .suga-info-card__body
  .suga-preview-card / .suga-preview-card__title / .suga-preview-card__text
  .suga-process-card
  .suga-related-card / .suga-related-card--sibling / .suga-related-card--parent
  .suga-related-card__title / .suga-related-card__text / .suga-related-card__link

网格类
  .suga-def-grid                     两列
  .suga-scope-preview-grid           3列
  .suga-process-card-grid            3列
  .suga-related-services-grid        4列

容器类
  .suga-table-wrap / .suga-table-intro
  .suga-form-wrap
  .suga-faq-wrap
  .suga-faq-cta / .suga-faq-cta__copy / .suga-faq-cta__actions
  .suga-faq-cta__button--outline / .suga-faq-cta__button--primary

Section Modifier（背景色）
  --definition / --scope             白底
  --comparison / --applications      蓝底 #eef4fa
  --sourcing / --quote               深色 navy
  --process / --quality / --cost
  --faq / --related                  白底

## 组件结构模板

Section 外壳（固定，每个 section 必须用）：
<!-- wp:group {"align":"full","className":"suga-pillar-section suga-pillar-section--【MODIFIER】","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull suga-pillar-section suga-pillar-section--【MODIFIER】">
<!-- wp:group {"className":"suga-pillar-section__inner","layout":{"type":"constrained"}} -->
<div class="wp-block-group suga-pillar-section__inner">

【内容区块】

</div><!-- /wp:group -->
</div><!-- /wp:group -->

Ninja Tables：
<!-- wp:group {"className":"suga-table-wrap"} -->
<div class="wp-block-group suga-table-wrap">
<!-- wp:paragraph {"className":"suga-table-intro"} -->
<p class="suga-table-intro">【引导语】</p>
<!-- /wp:paragraph -->
<!-- wp:shortcode -->[ninja_tables id="【TABLE_ID】"]<!-- /wp:shortcode -->
</div><!-- /wp:group -->

Fluent Forms：
<!-- wp:group {"className":"suga-form-wrap"} -->
<div class="wp-block-group suga-form-wrap">
<!-- wp:shortcode -->[fluentform id="【FORM_ID】"]<!-- /wp:shortcode -->
</div><!-- /wp:group -->

STEP 2 · SVG 视觉图提示词

# SUGA 支柱页 · SVG 视觉图

## 上下文
母版声明：[STEP 1 已知]
本页大纲：[粘贴 STEP 0 输出的 Markdown 大纲]

## 输出规格
- 格式：SVG 代码，直接输出，不要解释
- 宽度：1920px，高度自适应
- 只输出桌面端
- 配色：
    深色区背景  #0b2745
    橙色        #FD5320
    蓝底区      #eef4fa
    白底区      #ffffff
    标题色      #102a46
    正文色      #52677e

## 渲染规则
- 按大纲章节顺序完整渲染全页
- 每个 section 左上角标注 modifier class 名
- Ninja Tables 用深色占位块，标注「Ninja Table A / B / C」
- Fluent Forms 用占位块，标注「Fluent Form」
- FAQ 只渲染问题列表，不展开答案
- Related Services 渲染 4 列卡片结构

## 自检（SVG 输出完毕后立即执行）

- [ ] 章节数量与大纲一致
- [ ] 深色/蓝底/白底 section 分布与大纲一致
- [ ] 每个 section 都有 modifier class 标注
- [ ] 所有表格位置都有占位块
- [ ] 表单位置有占位块
- [ ] 没有渲染移动端布局
- [ ] 没有输出任何解释文字

STEP 3 · 增量 CSS + 组件结构提示词

# SUGA 支柱页 · CSS + 组件输出

## 上下文
母版声明：[STEP 1 已知]
本页大纲：[STEP 0 输出]
SVG 视觉图：[STEP 2 已确认]

## 输出 A · 增量 CSS

规则：
- 只输出新增样式
- 作用域：body[data-prefix="single_page"]
- 新 class 前缀：suga-【页面前缀】-*
- 每段附一行注释说明用途
- 输出为代码块

## 输出 B · 组件结构

规则：
- 完整输出全部 section 的 Gutenberg 区块 HTML
- uniqueId 用 【UID-XX】 占位
- Ninja Tables 用 [ninja_tables id="【TABLE_ID_X】"] 占位
- Fluent Forms 用 [fluentform id="【FORM_ID】"] 占位
- 代码简洁，不输出注释和解释
- 输出为代码块

## 自检（输出完毕后立即执行）

### CSS 自检
- [ ] 没有重复定义已有 class
- [ ] 没有硬编码颜色值
- [ ] 所有新 class 有 suga- 前缀
- [ ] 作用域全部在 body[data-prefix="single_page"] 内

### 组件自检
- [ ] 每个 section 都用了标准外壳结构
- [ ] uniqueId 全部用占位符
- [ ] Ninja Tables / Fluent Forms 全部用 shortcode 占位
- [ ] Hero 文案已替换（不是 Turnkey PCBA 的原文）
- [ ] Related Services 卡片类型正确（sibling / parent）
- [ ] 可以直接粘贴进 WordPress 编辑器

完整使用流程

第一次（新页面）
    填写 STEP 0 → 审核大纲 → 拍板定稿
         ↓
    STEP 1 已存档，无需重发
         ↓
    发 STEP 2（引用 STEP 0 大纲）→ 确认 SVG
         ↓
    发 STEP 3（引用 STEP 0 大纲 + SVG）→ 拿到 CSS + 组件

第二次起（新支柱页）
    只填 STEP 0（新页面信息）→ 审核大纲
         ↓
    STEP 2 + STEP 3 直接复用

每个提示词独立发，不要合并。合并会导致 AI 注意力分散，输出质量下降。