html-effectiveness-editor

09-editor — 自定义编辑界面

"Sometimes it's hard to describe what you want in a text box. Ask for a throwaway editor for the exact thing you're working on — and always end with an export button that turns whatever you did in the UI back into something you can paste into the agent or commit."

核心约束（不可妥协）

每个 09-editor 范式产出的页面必须有"复制结果"按钮。 让用户在 UI 里的所有操作能 → 一段可粘贴的文本 → 回到 agent。

没有 export 出口的"编辑器" = 玩具，不是工具。

---

何时用

用户说	用哪个范式	模板
"20 个 ticket 帮我排优先级 / triage"	拖拽分类板	自建
"切一组 feature flag / 配置一些参数"	配置编辑器	自建
"调一个 prompt，要看几个样例"	Prompt 调参器	../../templates/prompt.html
"我要在 UI 里改完然后 copy 回来"	任意	—

---

范式 9.1 · 拖拽分类板（triage board）

空间形状：N 列（典型 4 列：Now / Next / Later / Cut），每列一个 <ul>，卡片可在列间拖拽。顶部"Copy as markdown"导出。

HTML5 drag-and-drop 关键 JS：

let dragged = null;
document.querySelectorAll('.card').forEach(c => {
  c.draggable = true;
  c.addEventListener('dragstart', () => { dragged = c; c.classList.add('dragging'); });
  c.addEventListener('dragend',   () => c.classList.remove('dragging'));
});

document.querySelectorAll('.column ul').forEach(col => {
  col.addEventListener('dragover', e => {
    e.preventDefault();
    const after = [...col.querySelectorAll('.card:not(.dragging)')]
      .find(c => e.clientY < c.getBoundingClientRect().top + c.offsetHeight / 2);
    if (after) col.insertBefore(dragged, after);
    else col.appendChild(dragged);
  });
});

// 导出
document.querySelector('#copy-md').onclick = async () => {
  const md = [...document.querySelectorAll('.column')].map(col => {
    const title = col.querySelector('h2').textContent;
    const items = [...col.querySelectorAll('.card')]
      .map(c => `- ${c.querySelector('.card-title').textContent.trim()}`)
      .join('\n');
    return `## ${title}\n${items}`;
  }).join('\n\n');
  await navigator.clipboard.writeText(md);
  document.querySelector('#copy-md').textContent = 'Copied ✓';
};

关键 CSS（列与拖拽态）：