头脑风暴看板HTML生成器
触发词
头脑风暴、创意墙、便利贴、想法收集、脑暴
适用场景
- 团队创意发散
- 复盘找点子
- 活动策划脑暴
不适用场景（边界）
- 需要实时多人同屏
- 需要投票排序(用C4)
工作流（输入 → 产出）
- 确认墙面分区(可选)
- 生成自包含单文件 HTML 创意墙（加贴+配色+拖动+本地存）
- 自检零外链/移动端
- 交付
HTML 产出规范（强制）
- 自包含单文件：所有 CSS 写在
<style>、所有 JS 写在<script>，零外部 CDN / 零外链字体 / 零外链脚本，双击即开。 - 多端可开：Windows/Mac/iOS Safari/安卓 Chrome 直接打开；移动端响应式（
@media已内置）。 - 本地持久化：需保存的数据用
localStorage（键名带skill_z-brainstorm-board-html前缀），刷新不丢；不依赖任何后端。 - 可打印：含
@media print隐藏按钮、保留内容，便于导出 PDF / 纸质。 - 公网策略（A 分层）：默认只产出自包含单文件（已多端可用）；仅当用户明确说"要链接 / 发公网"时，才调用
本地HTML公网发布器(z-html-public-deploy)部署出 URL——不得擅自公开。
输出模板（直接生成的 HTML 骨架，按需填充）
<!doctype html><html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>创意墙</title><style>
:root{--p:#2563eb;--p2:#1e40af;--bg:#f7f8fa;--card:#fff;--t:#1f2937;--m:#6b7280;--ok:#16a34a;--w:#d97706;--b:#e5e7eb;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--t);line-height:1.6;padding:16px}
.wrap{max-width:880px;margin:0 auto;background:var(--card);border-radius:14px;padding:22px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
h1{font-size:22px;margin-bottom:6px}
h2{font-size:17px;margin:18px 0 8px;color:var(--p2)}
p.lead{color:var(--m);margin-bottom:14px}
label{display:block;font-size:14px;margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--b);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
textarea{min-height:80px;resize:vertical}
button{background:var(--p);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer;margin:8px 6px 0 0}
button.sec{background:#fff;color:var(--p);border:1px solid var(--p)}
button:hover{opacity:.92}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>div{flex:1;min-width:160px}
.card{border:1px solid var(--b);border-radius:10px;padding:12px;margin:8px 0;background:#fff}
.grid{display:grid;gap:8px}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
th,td{border:1px solid var(--b);padding:8px;text-align:left}
th{background:#eef2ff}
.tag{display:inline-block;background:#eef2ff;color:var(--p2);border-radius:6px;padding:2px 8px;font-size:12px;margin:2px}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px;border-radius:8px;font-size:13px;margin:10px 0}
ul{margin:6px 0 6px 18px}
@media(max-width:560px){.wrap{padding:14px}body{padding:8px}}
@media print{body{background:#fff}.wrap{box-shadow:none;max-width:100%}button{display:none}}
body{padding:8px}.wrap{box-shadow:none}#wall{position:relative;height:70vh;border:2px dashed var(--b);border-radius:12px;background:#fff;overflow:hidden}.note{position:absolute;width:130px;min-height:90px;background:#fef9c3;border-radius:8px;padding:8px;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:move}.note button{position:absolute;top:2px;right:4px;font-size:11px;padding:0 4px;margin:0}.palette{margin:8px 0}</style></head><body><div class="wrap"><h1>头脑风暴创意墙</h1><div class="palette"><input id="txt" placeholder="写个想法…"><button onclick="add()">贴一张</button></div><div id="wall"></div></div><script>var COL=['#fef9c3','#dcfce7','#fee2e2','#dbeafe'];var key='skill_z_brainstorm_board_html';var drag=null;function add(){var t=txt.value.trim();if(!t)return;var all=JSON.parse(localStorage.getItem(key)||'[]');all.push({t:t,c:COL.length%4,x:20+all.length*10%300,y:20+all.length*8%300});localStorage.setItem(key,JSON.stringify(all));txt.value='';render();}function render(){var all=JSON.parse(localStorage.getItem(key)||'[]');wall.innerHTML=all.map((n,i)=>'<div class=note style="left:'+n.x+'px;top:'+n.y+'px;background:'+COL[n.c%4]+'" onmousedown="start('+i+',event)">'+n.t+'<button onclick="del('+i+')">×</button></div>').join('');}function del(i){var all=JSON.parse(localStorage.getItem(key)||'[]');all.splice(i,1);localStorage.setItem(key,JSON.stringify(all));render();}function start(i,e){drag={i,y:e.clientY,x:e.clientX};document.onmousemove=mm;document.onmouseup=function(){document.onmousemove=null;}}function mm(e){if(!drag)return;var all=JSON.parse(localStorage.getItem(key)||'[]');all[drag.i].x+=e.clientX-drag.x;all[drag.i].y+=e.clientY-drag.y;drag.x=e.clientX;drag.y=e.clientY;localStorage.setItem(key,JSON.stringify(all));render();}render();</script></body></html>
使用示例
输入：搞个脑暴墙，大家贴想法便利贴能拖动
产出：生成 brainstorm.html，加贴+配色+拖动+本地保存
红线（不可违反）
- 禁止外部依赖
- 禁止编造想法内容
- 移动端拖动需提示
与其他技能区分
区别于「任务看板(D1)」(状态列)——本技能是“自由贴墙、无结构化列”，用于发散。
大白话介绍
脑暴别光动嘴，这网页贴便利贴、拖来拖去归类，想法全留墙上不丢。
