周末在家，我用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);
再补上三个函数（完整代码见文末链接）。重点：
handleTouchStart：遍历所有圆点，计算手指是否落在圆内（距离<20px）handleTouchMove：实时更新圆点坐标handleTouchEnd：清空状态---
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](https://woshird.com/dance)）