comment-mode

评论模式

生成带高亮的 HTML，点击即可显示评论，便于针对文本提供细致反馈。无需改写——用户可以保留自己的表达方式，并逐条查看反馈。

约定

输入：

• 要添加评论的草稿文本（直接粘贴或提供文件路径）
• 可选视角：编辑反馈、模拟他人视角（例如“从 brian 的角度来看”）或特定关注点（例如“仅关注措辞”）

输出：

• 在 _private/views/{name}-comments-temp.html 生成一个 HTML 文件，其中包含高亮片段和点击后显示的评论浮层

创建/修改：

• 写入 _private/views/{name}-comments-temp.html

外部副作用：

• 运行 open _private/views/{name}-comments-temp.html，在默认浏览器中打开文件

需要确认：

• 无——该文件是 _private/ 中的临时视图产物，不会修改源文件

委托给：

• 无。

适用场景

• 用户说：“评论一下这个”“在上面留评论”“给点反馈”
• 用户粘贴文本并请求反馈或批评
• 用户想要有针对性的反馈，而不是完整改写

添加评论前先澄清

当请求含糊不清时，使用 AskUserQuestion 澄清范围。避免评论过多（让人应接不暇）或过少（未切中要点）。

需要澄清的情况：

• 未指定视角 → 询问想从哪个角度评论
• 文档较长 → 询问是要全面覆盖还是只看重点部分
• 受众不明确 → 询问接收者是谁（会影响视角评论）

无需澄清的情况：

• 明确指定了视角（“仅评论措辞”）
• 文档较短（<500 个词）
• 对话上下文已经明确

澄清示例：

User: "comment on this"
[long doc, no lens specified]

→ Use AskUserQuestion:
  "What should I focus on?"
  Options:
  - "Editor feedback (structure, clarity, word choice)"
  - "Recipient POV (how [person] would react)"
  - "Specific angle (tell me what)"

视角

视角	颜色	评论风格
编辑	黄色（#fff3cd）	观察、建议：“开头较弱”“这里需要补充证据”
POV（以某人视角）	蓝色（#e3f2fd）	从该人物的角度作出反应：“我已经知道这个了”“法务会对此大惊失色”
聚焦	黄色	仅关注特定角度：“措辞”“语气”“论据薄弱”

评论风格

• 始终使用小写
• 简短（5-15 个词）
• 根据评论类型灵活表达：指出问题时作观察，有替代方案时给建议，模拟 POV 时写反应
• 只在确实值得评论的地方添加评论——宁少勿全

输出规则

应当：

• 写入 _private/views/{name}-comments-temp.html
• 使用 open _private/views/{name}-comments-temp.html 打开
• 使用与视角匹配的高亮颜色
• 评论保持精简且切中要点

不得：

• 对所有内容都发表评论——只评论有明显修改空间或值得点明之处
• 在评论中解释过多——保持简洁有力
• 在同一份输出中混用多个视角——选定一个并贯彻到底

模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.7;
      color: #1a1a1a;
      background: #fafafa;
    }
    h1, h2, h3 { margin-top: 2em; font-weight: 600; }
    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; color: #333; }
    p { margin: 1em 0; }

    .highlight {
      background: {highlight-bg};  /* #fff3cd yellow for editor, #e3f2fd blue for POV */
      padding: 1px 4px;
      border-radius: 3px;
      cursor: pointer;
      border-bottom: 2px solid {highlight-border};  /* #ffc107 for editor, #2196f3 for POV */
      transition: background 0.15s;
    }
    .highlight:hover, .highlight.active {
      background: {highlight-hover};  /* #ffe69c for editor, #bbdefb for POV */
    }

    .comment {
      display: none;
      background: {comment-bg};  /* #1a1a1a for editor, #0052cc for POV */
      color: #fff;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.85em;
      margin: 8px 0;
      line-height: 1.5;
    }
    .comment.show { display: block; }

    .section-break {
      border: none;
      border-top: 1px solid #ddd;
      margin: 2em 0;
    }

    .legend {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #fff;
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      font-size: 0.8em;
      color: #666;
    }
  </style>
</head>
<body>

{content with <span class="highlight" data-comment="comment text">highlighted phrase</span>}

<div class="legend">{count} comments · click highlights to reveal</div>

<script>
document.querySelectorAll('.highlight').forEach(el => {
  const commentText = el.getAttribute('data-comment');
  const commentDiv = document.createElement('div');
  commentDiv.className = 'comment';
  commentDiv.textContent = commentText;
  el.insertAdjacentElement('afterend', commentDiv);

  el.addEventListener('click', () => {
    const wasActive = el.classList.contains('active');
    document.querySelectorAll('.highlight').forEach(h => h.classList.remove('active'));
    document.querySelectorAll('.comment').forEach(c => c.classList.remove('show'));
    if (!wasActive) {
      el.classList.add('active');
      commentDiv.classList.add('show');
    }
  });
});
</script>
</body>
</html>

颜色参考

编辑视角（黄色）：

.highlight { background: #fff3cd; border-bottom: 2px solid #ffc107; }
.highlight:hover, .highlight.active { background: #ffe69c; }
.comment { background: #1a1a1a; }

POV 视角（蓝色）：

.highlight { background: #e3f2fd; border-bottom: 2px solid #2196f3; }
.highlight:hover, .highlight.active { background: #bbdefb; }
.comment { background: #0052cc; }

工作流

1. 用户粘贴文本并请求添加评论
2. 如果请求含糊不清：使用 AskUserQuestion 澄清视角/范围
3. 阅读文本，找出值得评论的关键短语（精简、切中要点）
4. 生成带高亮和 data-comment 属性的 HTML
5. 写入 _private/views/{name}-comments-temp.html
6. 运行 open _private/views/{name}-comments-temp.html

示例

编辑视角：

User: "comment on this, focus on word choice"
→ Yellow highlights, suggestions like "vague, try 'specifically'" or "jargon, simplify"

POV 视角：

User: "comment on this as brian would react"
→ Blue highlights, reactions like "i already know this" or "legal would push back here"

聚焦视角：

User: "leave comments on this, only flag weak arguments"
→ Yellow highlights on weak claims, comments like "needs evidence" or "assumes too much"

精简/犀利视角：

User: "comment only where there's an obvious fix"
→ Minimal highlights, only typos, missing words, or clear improvements