周末在家，我用Claude Code做了个‘广场舞队形生成器’网页——队长扫了3次码，说‘下月比赛就用这个排阵’

没有数据库，没有用户系统，不收集手机号。

就是一个单HTML文件，打开即用，关掉即忘。

但它解决了广场舞队长们最头疼的事：

我们用Claude Code + Canvas，在周六下午做出了这个工具。上线后，被朝阳区12支舞队队长扫码使用，3支主动拍视频发抖音：“教你怎么30秒排出‘蝴蝶展翅’阵”。

---

🎨 核心能力：用Canvas画“会呼吸”的队形

不是SVG，不是CSS Grid，而是原生Canvas——因为：

---

🛠️ Step-by-step：从Prompt到上线

1. Prompt定骨架（Cursor中输入）

生成一个单HTML文件，实现广场舞队形生成器：
- 页面顶部：标题「广场舞队形生成器」+ 下拉选择预设阵型（同心圆、方阵、S形、蝴蝶、五角星）
- 中间Canvas画布（600x600px），初始显示预设阵型的圆点（直径16px，红色#e74c3c）
- 点击画布任意位置：添加一个新圆点（队员）
- 长按圆点：拖拽移动
- 右上角按钮「导出PNG」：调用canvas.toDataURL('image/png')生成下载链接
- 底部显示当前队员数（例：共16人）
- 所有代码内联，不引用外部JS/CSS
- 适配手机横竖屏（Canvas自动缩放）

Claude Code输出后，保存为dance-pattern.html。

---

2. 手动增强：让大爷大妈真的能用

Claude Code生成的Canvas默认不支持触摸拖拽。加5行代码：

// 在<script>里追加
let isDragging = false;
let draggedDot = null;

canvas.addEventListener('touchstart', handleTouchStart, false);
canvas.addEventListener('touchmove', handleTouchMove, false);
canvas.addEventListener('touchend', handleTouchEnd, false);

再补上三个函数（完整代码见文末链接）。重点：

---

3. 预设阵型：用数学公式生成，不是手画

例如「同心圆」：

function drawConcentricCircles(ctx, centerX, centerY, numRings = 3) {
  for (let r = 1; r <= numRings; r++) {
    const radius = r * 40;
    const count = r * 8; // 每圈人数递增
    for (let i = 0; i < count; i++) {
      const angle = (i / count) * Math.PI * 2;
      const x = centerX + Math.cos(angle) * radius;
      const y = centerY + Math.sin(angle) * radius;
      drawDot(ctx, x, y);
    }
  }
}

Claude Code能写，但需在Prompt中明确：“用三角函数生成同心圆，每圈人数=圈数×8”。

---

4. 导出优化：PNG带水印+尺寸适配

原生toDataURL导出模糊。升级为：

const exportCanvas = document.createElement('canvas');
exportCanvas.width = 1200; // 2x清晰度
exportCanvas.height = 1200;
const exportCtx = exportCanvas.getContext('2d');
// 复制原Canvas内容
exportCtx.drawImage(canvas, 0, 0, 1200, 1200);
// 加水印
exportCtx.fillStyle = 'rgba(0,0,0,0.1)';
exportCtx.font = 'bold 48px sans-serif';
exportCtx.fillText('广场舞队形生成器', 200, 100);
// 触发下载
const link = document.createElement('a');
link.download = 'dance-pattern.png';
link.href = exportCanvas.toDataURL('image/png');
link.click();

---

🌟 传播密码：为什么队长主动转发？

---

🚀 接单延伸：3个轻量升级包

| 升级 | 描述 | 客户价值 |
|------|------|----------|
| 【音乐节拍线】 | 在Canvas上叠加半透明节拍线（随BPM闪烁） | 解决“踩不准点”痛点 |
| 【服装色块】 | 点击圆点，弹出颜色选择器（红/黄/蓝/绿），导出图带色块 | 满足比赛服装统一要求 |
| 【分组标注】 | 长按圆点→选“分组”→输入A/B/C组，导出图自动标字母 | 便于教练指挥 |

全部用Claude Code二次生成，平均交付时间：15分钟/个。

技术永远服务于人。当广场舞队长笑着举起手机扫二维码时，你写的不是代码，是她们的舞台。

（完整源码+预设阵型库：woshird.com/dance）