comment-mode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Comment Mode

评论模式

Generate highlighted HTML with click-to-reveal comments for granular feedback on text. Alternative to rewrites—user keeps their voice, reviews feedback incrementally.

生成带有可点击显示评论的高亮HTML，为文本提供细粒度反馈。作为重写方案的替代选项，用户可保留自身表达风格，逐步查看反馈。

When to Use

适用场景

User says: "comment on this", "leave comments on", "give feedback on"
User pastes text and asks for feedback/critique
User wants targeted feedback without a full rewrite

用户说：“对此发表评论”“留下评论”“给出反馈”
用户粘贴文本并请求反馈/批评
用户想要针对性反馈，而非完整重写

Clarify Before Commenting

评论前需澄清

Use AskUserQuestion to clarify scope when the request is ambiguous. Avoid over-commenting (overwhelming) or under-commenting (missing the point).

Clarify when:

No lens specified → ask what angle they want
Long document → ask if they want full coverage or just key sections
Unclear audience → ask who the recipient is (affects POV comments)

Skip clarification when:

Lens is explicit ("comment on word choice only")
Document is short (<500 words)
Context is obvious from conversation

Example clarification:

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)"

当请求模糊时，使用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)"

Lenses

反馈视角

Lens	Color	Comment style
Editor	Yellow (#fff3cd)	observations, suggestions: "weak opener", "add proof here"
POV (as person)	Blue (#e3f2fd)	reactions from that person's perspective: "i know this already", "legal would freak out"
Focused	Yellow	specific angle only: "word choice", "tone", "weak arguments"

视角	颜色	评论风格
编辑视角	黄色 (#fff3cd)	观察与建议：“开头乏力”“此处需补充论据”
模拟他人视角	蓝色 (#e3f2fd)	从该人物视角出发的反应：“我已经知道这点了”“法务会强烈反对”
特定聚焦视角	黄色	仅针对特定角度：“措辞”“语气”“薄弱论点”

Comment Style

评论风格

Always lowercase
Short (5-15 words)
Smart about type: observations when noting, suggestions when alternatives help, reactions when simulating POV
Only comment where there's something worth saying—sparse beats exhaustive

全部使用小写
简短（5-15词）
区分类型：指出问题时用观察类表述，提供替代方案时用建议类，模拟视角时用反应类
仅对有价值的内容发表评论——少而精优于面面俱到

Output Rules

输出规则

DO:

Write to

_private/views/{name}-comments-temp.html

Open with

open _private/views/{name}-comments-temp.html

Use highlight colors matching the lens
Keep comments sparse and high-signal

DO NOT:

Comment on everything—only where there's an obvious edit or insight
Over-explain in comments—keep them punchy
Mix lenses in one output—pick one and stick to it

需执行：

写入至

_private/views/{name}-comments-temp.html

执行

open _private/views/{name}-comments-temp.html

打开文件

使用与视角匹配的高亮颜色
保持评论少而精、高价值

禁止：

对所有内容评论——仅针对有明显修改必要或有洞见的内容
评论过于冗长——保持简洁有力
在一次输出中混合多种视角——选择一种并坚持使用

Template

模板

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>

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>

Color Reference

颜色参考

Editor lens (yellow):

css

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

POV lens (blue):

css

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

编辑视角（黄色）：

css

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

模拟他人视角（蓝色）：

css

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

Workflow

工作流程

User pastes text + asks for comments
If ambiguous: Use AskUserQuestion to clarify lens/scope
Read text, identify key phrases worth commenting on (sparse, high-signal)
Generate HTML with highlights and
```
data-comment
```
attributes

Write to

_private/views/{name}-comments-temp.html

Run

open _private/views/{name}-comments-temp.html

用户粘贴文本并请求评论
若请求模糊：使用AskUserQuestion澄清视角/范围
阅读文本，识别值得评论的关键短语（少而精、高价值）
生成带有高亮和
```
data-comment
```
属性的HTML

写入至

_private/views/{name}-comments-temp.html

执行

open _private/views/{name}-comments-temp.html

Examples

示例

Editor lens:

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

POV lens:

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

Focused lens:

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

Sparse/sharp lens:

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

编辑视角：

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

模拟他人视角：

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