从一个"关键词提取工具"案例，聊聊 AI 编程踩过的坑与好用的 Prompt

背景：让 AI 用一个单文件 HTML（内联 CSS/JS，零依赖）实现一个关键词提取小工具。需求看似简单，真正落地却踩了不少坑。把过程拆开讲，希望对你有参考价值。

一、需求长这样

把原始需求按四段式列出：

code
 
核心功能：文本输入 / 词频统计 / 关键词展示
交互细节：实时处理、空输入友好提示、一键复制+反馈
视觉风格：简洁现代、卡片式、圆角、柔和阴影、响应式
技术要求：纯 HTML+CSS+JS、零外部依赖、无后端

这种**「功能 / 交互 / 视觉 / 技术」四段式**结构，是后面一切顺利的前提。下文会展开为什么。

二、踩过的 8 个坑
坑 1：中文分词——没有 jieba 怎么办？

纯前端、零依赖，意味着不能用 jieba 这类分词库。第一反应是"按单字切"，结果"关键词"全是「的」「了」「我」——完全没法看。

解法：中文 2-gram（双字滑动窗口）

js
 
const zhRegex = /[\u4e00-\u9fa5]+/g;
while ((m = zhRegex.exec(text)) !== null) {
  const seg = m[0];
  for (let i = 0; i < seg.length - 1; i++) {
    tokens.push(seg.substr(i, 2));   // "关键词提取" → 关键、键词、词提、提取
  }
}

2-gram 不完美（会切出"键词"这种噪声），但在零依赖约束下是性价比最高的方案，比单字可控得多。如果要更准，可以加一步：对频率异常高的 2-gram 再做 3-gram 合并，但小工具没必要。

坑 2：停用词不过滤，结果全翻车

哪怕用了 2-gram，"的是""了和"这种还是会混进来。必须建停用词表。

坑点：停用词表要分中英文两套，而且英文匹配前要先 toLowerCase()，否则 The 会漏过。

js
 
function isStop(word) {
  if (word.length <= 1) return true;
  if (/^[a-z'-]+$/i.test(word)) return STOP_EN.has(word);  // 英文走英文表
  return STOP_ZH.has(word);                                 // 中文走中文表
}

停用词表不用追求完备，覆盖前 100 个高频虚词就够 80% 场景。我塞了约 150 个，包含"因为/所以/可以/应该"这类短句虚词。

坑 3：实时处理 = 卡顿重灾区

需求要"输入变化实时处理"。直接监听 input 事件，粘贴一篇万字长文，每敲一个字都重算一次，输入框卡成 PPT。

解法：防抖 120ms

js
 
let timer;
inputEl.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(process, 120);
});

120ms 是体感"即时"和性能的甜点。再快没必要，再慢会觉得迟钝。

坑 4：空输入不能报错

很多人会写 if (!text) throw ... 或直接让结果区空着。用户体验都很差。

正确姿势：空状态也是设计的一部分。给一个带图标的引导卡片：

code
 
[图标] 开始输入文本
       输入内容后将自动提取关键词并统计词频

还要区分两种"空"：

没输入 → 引导提示
输入了但全是停用词 → "未提取到关键词，当前文本可能仅包含停用词"

两种状态用不同文案，用户能立刻明白发生了什么。

坑 5：navigator.clipboard 不是万能的

复制功能第一反应写 navigator.clipboard.writeText()。然后发现：

file:// 协议下可能不可用
老浏览器不支持
非 HTTPS 环境会 reject

解法：try/catch 降级到 execCommand('copy')

js
 
try {
  await navigator.clipboard.writeText(text);
} catch (e) {
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed'; ta.style.opacity = '0';
  document.body.appendChild(ta);
  ta.select();
  document.execCommand('copy');
  document.body.removeChild(ta);
}

注意临时 textarea 要 position:fixed + 透明，否则会在页面里闪一下。

坑 6：XSS——最容易忘的坑

关键词最终要 innerHTML 渲染。如果用户输入 <img src=x onerror=alert(1)>，直接拼进去就完蛋。

解法：渲染前 HTML 转义

js
 
function escapeHtml(s) {
  return s.replace(/[&<>"']/g, c => ({
    '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
  }[c]));
}

哪怕是个"本地小工具"也别省这一步，习惯比侥幸重要。

坑 7：移动端——"我测试时没问题啊"

桌面看着完美，手机一开：标题溢出、按钮挤变形、输入框太高顶到天。

关键几条 CSS：

css
 
body { padding: 32px 20px; align-items: center; }
@media (max-width: 640px) {
  body { padding: 16px 12px; align-items: flex-start; }  /* 移动端顶部对齐 */
  .title { font-size: 25px; }                             /* 标题缩字号 */
  .stat { min-width: 0; }                                 /* 允许统计卡收缩 */
}

align-items: flex-start 这条特别容易漏——手机上卡片居中会让顶部留一大片空白，很丑。

坑 8：AI 生成界面的"塑料感"

这是最隐蔽的坑。AI 默认会给你：紫色渐变背景 + 居中标题 + 三个等高卡片 + emoji 图标。一眼"AI 味"。

解法：在 Prompt 里指定明确的设计语言，而不是说"好看点"。

我这次指定了 Apple Minimalist：

纯白底 #FFFFFF + 浅灰表面 #F5F5F7
Apple Blue #0071E3 做唯一强调色
大圆角 24px + 柔和分层阴影
关键词用横向条形图按频率比例展示，而不是千篇一律的标签云

一句话："简洁现代"是无效描述，"Apple 风格、纯白、单一强调色、条形图展示"才是有效约束。

三、好用的 Prompt 模板

经过这次案例，我固定下来一个前端单文件工具的 Prompt 模板：

code
 
请用一个单独的 HTML 文件（内联 CSS/JS，零外部依赖）实现【功能名】。

核心功能：
1. ...
2. ...

交互细节：
- 触发方式（实时/按钮）+ 防抖要求
- 边界状态（空输入/无结果/错误）的友好提示
- 反馈方式（toast/inline）+ 持续时间

视觉风格：
- 指定设计语言（如 Apple Minimalist / Linear / 极简）
- 具体元素：配色、圆角、阴影、布局
- 响应式断点

技术要求：
- 纯 HTML+CSS+JS，不依赖任何库
- 安全：XSS 转义、API 兼容降级
- 代码结构清晰，关键逻辑加注释

为什么这个模板好用：

段落    不写会怎样
交互细节    AI 会默认加按钮、用 alert、空输入报错
视觉风格（具体到设计语言）    产出"塑料感"渐变界面
边界状态    AI 只处理 happy path，空输入崩
安全要求    AI 不会主动做 XSS 转义和 API 降级
零依赖    AI 会顺手 import 一个 lodash

核心心法：把"你默认会偷懒的地方"全部写进 Prompt。

四、几点反思

"简单需求"不等于"低风险"。一个单文件小工具，藏着分词、性能、安全、兼容、设计 5 个维度的坑。AI 不会主动告诉你这些坑存在，得靠 Prompt 框出来。

AI 最容易漏的是"非 happy path"。空输入、纯停用词、复制失败、移动端——这些它不写你不说就不写。Prompt 里专门留一行"边界状态"能根治这个问题。

设计语言要"点名"，不要"形容"。"简洁现代"有 100 种理解，"Apple Minimalist、纯白、单一 Apple Blue 强调色"只有一种。

小工具也别省安全那一行。XSS 转义 + clipboard 降级，加起来 10 行代码，但能挡掉一堆诡异 bug。让 AI 写进 Prompt，养成肌肉记忆。

一句话总结：AI 编程的产出质量，约等于你 Prompt 里"边界条件 + 设计约束 + 安全要求"的详尽程度。 Happy path 它自己会写，坑得你帮它指出来。