shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

cabinet-design

生成符合装修方案绘制规范的柜子业主尺寸确认图 HTML。布局由用户现说，Skill 只负责绘制样式。

person作者: UnspokenSheephubModelScope
download下载资源包

绘制柜子尺寸确认图

共创 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 小叶胡桃 | #5e3f31 | | 柜门 | #f7ece4 肤感兰亭灰 / 婷兰灰 | #c9b6a6 | | 墙面（开放区） | #fff 白色 | #d6cbb6 | | 强调色 | #dc2626 | （不可改） |

提示词模板：

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

  • 柜体颜色（默认 #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；CSS 规范见 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
  3. Front（正视图）：1:1 真实坐标（SVG 单位 = mm）
    • viewBox 用负坐标给标注留白
    • 标注每一部分的宽和高
    • 校验行：宽相加 = W ✓、高相加 = H ✓
  4. Cards（详细尺寸卡片）：3 列 grid，每张卡 宽 × 高 × 深 + 备注
  5. Footer：版本 / 设计师标注

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

询问用户"是否同步生成 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 一致