绘制柜子尺寸确认图

共创 Skill · 生成符合绘制规范的柜子尺寸确认图 HTML。
布局由用户现说，Skill 只负责绘制样式。

触发关键词

满足以下任一即触发：

• "画一个 XX 柜"、"绘制 XX 柜"、"生成 XX 尺寸图"、"XX 柜尺寸确认图"、"做一个 XX 柜的图纸"
• XX ∈ {衣柜、餐边柜、厨房油烟机柜、冰箱柜、燃气表柜、阳台柜、电视柜、双面柜}
• 通用："画个柜子"、"设计一个新柜子" → 先询问具体类型

工作流（8 阶段，必经阶段 4 确认）

[触发]
  → 1. 询问颜色（柜体 / 柜门 / 墙面）
  → 2. 询问柜型 + 总宽 W / 总高 H / 总深 D（必填数字）
  → 3. 用户描述布局（横竖分区 / 隔板 / 配件）—— Skill 不假设
  → 4. 输出结构化草稿请用户确认 ← 必经节点
  → 5. 生成 HTML（按 Header / Hero / Front / Cards / Footer 顺序）
  → 6. 询问是否同步生成 MD 草稿
  → 7. 实物参考图（仅当用户主动提时处理）
  → 8. 交付（提醒 Chrome / Edge 打开 → 打印 PDF）

阶段 1 · 询问颜色

默认颜色（与现有 8 份 HTML 一致）：

提示词模板：

请确认三个颜色（直接说"默认"即可）：

- 柜体颜色（默认 #8f6352 小叶胡桃）
- 柜门颜色（默认 #f7ece4 肤感兰亭灰）
- 墙面颜色（开放区，默认 #fff 白色）
- 强调红 #dc2626 固定不可改

也可一句话指定，如"全部小叶胡桃、墙面白色"。

确认后写入 :root CSS 变量。

阶段 2 · 询问柜型 + 总尺寸

提示词模板：

请提供：

- 柜型（衣柜 / 餐边柜 / 厨房油烟机柜 / 冰箱柜 / 燃气表柜 / 阳台柜 / 电视柜 / 双面柜 / 自定义）
- 总宽 W（必须填数字，mm）
- 总高 H（必须填数字，mm）
- 总深 D（必须填数字，mm）

W / H / D 缺一不可。如未填完，必须追问。

阶段 3 · 用户描述布局

Skill 不预设任何布局模板。引导用户描述：

• 横向分区（从左到右）：每段宽 + 用途 / 门类型
• 纵向分区（从下到上）：每段高 + 用途 / 门类型
• 隔板：固定板 / 活动板，各几块，位置
• 错落深度 / 特殊配件（如有则描述）

如果用户描述模糊，必须追问（如"左侧那段多宽？"）。

阶段 4 · 草稿确认（必经）

输出一份表格化草稿让用户核对：

## 绘制草稿确认

**柜名**：
**柜型**：
**总尺寸**：W × H × D = ? × ? × ? mm
**颜色**：柜体 #? / 柜门 #? / 墙面 #?

### 横向分区（左 → 右）
| # | 宽 mm | 高度 mm | 深度 mm | 类型 / 备注 |
|---|---:|---:|---:|---|
| 1 |   |   |   |   |
| 2 |   |   |   |   |

### 纵向分区（从下到上）
| # | 高 mm | 类型 |
|---|---:|---|
| 1 |   |   |

### 隔板表
- 固定板：位置 + 数量
- 活动板：位置 + 数量

### 高度校验
- 横向：? + ? + ... = W ✓ / ✗
- 纵向：? + ? + ... = H ✓ / ✗

用户回复"确认"后才进入阶段 5。

阶段 5 · 生成 HTML（5 段式）

完整骨架见 [references/html-skeleton.md](references/html-skeleton.md)；CSS 规范见 [references/design-system.md](references/design-system.md)。

写入路径：D:\web\装修方案\{柜子名称}.html

命名规则：遵守 {位置}{柜体}.html，严禁 final/v2/新版 后缀（CLAUDE.md 红线）。

5 段结构要点：

1. Header：柜名 + 3~5 条 ★ 重点 bullet
2. Hero（整体效果图 · 轴测图）：0.5~0.6× 缩放

- 只标注：总宽 / 总高 / 总深 / 隔板高度 - 不标注每一部分的宽高（这些在 Front） - 隔板：固定板 stroke="#8f6352" stroke-width="8" 实线；活动板 stroke="#5e3f31" stroke-width="4" stroke-dasharray="10,4" 虚线 - 隔板图例：右下 / 左下放固定板 / 活动板图例卡 - 总尺寸用红色 #dc2626 框 + 双箭头 marker

1. Front（正视图）：1:1 真实坐标（SVG 单位 = mm）

- viewBox 用负坐标给标注留白 - 标注每一部分的宽和高 - 校验行：宽相加 = W ✓、高相加 = H ✓

1. Cards（详细尺寸卡片）：3 列 grid，每张卡 宽 × 高 × 深 + 备注
2. Footer：版本 / 设计师标注

阶段 6 · MD 草稿同步（默认询问）

询问用户"是否同步生成 MD 草稿？"。如选是，按 [templates/starter.md](templates/starter.md) 骨架生成 D:\web\装修方案\{柜子名称}尺寸比例方案.md。

阶段 7 · 实物参考图（仅当用户主动提）

默认不询问。仅当用户主动提供 jpg 时，在 HTML 中添加第 4 段 shelf-section（参考 D:\web\装修方案\厨房油烟机柜.html:376-418），用相对路径 <img src="参考图.jpg"> 嵌入。

要求用户把 jpg 放到 D:\web\装修方案\ 目录下。

阶段 8 · 交付

• 打印方向：A4 portrait（默认）；横长柜可指定 landscape
• 提醒用户用 Chrome / Edge 打开 → 点"打印 / 保存 PDF"
• 写入路径：D:\web\装修方案\{柜子名称}.html

修改与迭代

用户提修改时，不重新生成整个文件，只针对性更新相关段落（HTML 段落定位明确）：

• "Hero 里的总高字号加大" → 修改 <svg class="hero"> 内对应 <text>
• "Front 第 2 段宽改成 380" → 修改 <svg class="front"> 内对应 <rect> 宽度 + 标注
• "加一张横板卡片" → 在 .cards 内追加 <article class="card">
• "加一种颜色" → 修改 :root CSS 变量

验证清单

生成的 HTML 应满足：

• Header 3~5 条 ★ 重点 bullet
• Hero 只标总尺寸 + 隔板高度，不标每部分宽高
• Front 标每部分宽高 + 校验行
• dim-cards 5~8 张
• 打印 A4 portrait（或 landscape 按柜子方向）
• 色板 / 字体 / 标注 / 隔板图例与现有 8 份 HTML 一致