前两周写文档的时候遇到一个很烦的问题：从 API 返回的数据里拿了一堆 user_name、created_at 这样的字段，要转成前端用的 userName、createdAt 驼峰命名。手动改吧，十几二十个字段，一个个改又慢又容易漏；写个脚本吧，就为了这一锤子买卖，感觉又有点小题大做。

后来想想，其实这种"临时但高频"的小需求，与其每次现写脚本，不如直接做个在线工具，一劳永逸。于是就有了这个文本大小写转换器。整个过程用 AI 辅助开发，从需求到上线大概花了 30 分钟，这篇文章就来聊聊实现思路和一些踩坑记录。

为什么不做成脚本，非要做网页？

说实话，一开始我的第一反应也是写个 Node.js 脚本，跑一下就行。但仔细一想，有几个问题：

1. 不可复用：下次遇到类似需求，脚本找不找得到是一回事，找到还得改参数。

2. 不方便分享：同事遇到同样的问题，把脚本发给他？他可能连 Node 环境都没装。

3. 不够直观：脚本只能处理静态输入，没法实时预览，交互性为零。

   
   

所以还是决定做成一个纯前端的单文件 HTML 工具。零依赖、无构建、双击就能用，扔到服务器上就是一个页面。

用 AI 写代码：需求描述比代码本身更重要

既然决定用 AI 辅助开发，那第一步就是给它清晰的规格说明。这里我踩了个大坑：一开始我只说"帮我写个大小写转换工具"，结果 AI 给了一个极其简陋的版本——一个输入框，一个按钮，点一下才转换，而且只有 UPPER 和 lower 两种格式。

这显然不是我要的。于是我开始反思 prompt 的写法。后来我把需求细化成这样：

你是一名资深前端工程师。请根据下方规格，生成一个独立的单文件 HTML 工具。
- 生产级别代码，质量高，可读性强
- 严格实现「功能列表」中的所有功能，不得省略、不得用 placeholder 代替
- 所有用户可见文案必须使用 i18n 机制

然后附上完整的功能列表、UI 布局 ASCII 图、交互细节、技术要求和验收标准。关键是把"实时预览""每种格式独立复制按钮""i18n"这些非功能需求也写清楚。

这个 prompt 的效果立竿见影，AI 生成的代码基本能跑，但有几个问题：

AI 生成的代码，哪里不对？

问题 1：中文文本被硬生生"分词"了

AI 第一版用的是 text.split(' ') 来分词，然后做驼峰转换。这在纯英文场景没问题，但一旦输入包含中文（比如 "你好 world"），结果就变成了 你好world，中文和英文之间没有空格分隔，看起来非常别扭。

我的解决方案是让 AI 用 Unicode 属性正则来分词，配合驼峰边界识别：

function splitWords(s) {
  return String(s)
    .replace(/([\p{Ll}\p{N}])(\p{Lu})/gu, '$1 $2')       // helloWorld -> hello World
    .replace(/(\p{Lu}+)(\p{Lu}\p{Ll})/gu, '$1 $2')        // parseXMLDoc -> parse XML Doc
    .split(/[^\p{L}\p{N}]+/u)
    .filter(Boolean);
}

function copyText(btn) {
  const text = btn.getAttribute('data-result');
  const flash = msg => {
    const orig = t('copy');
    btn.textContent = msg;
    setTimeout(() => btn.textContent = orig, 1500);
  };
  if (!navigator.clipboard) {
    flash(t('copyFail'));
    return;
  }
  navigator.clipboard.writeText(text)
    .then(() => flash(t('copied')))
    .catch(() => flash(t('copyFail')));
}

function escapeHtml(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML.replace(/"/g, '"');
}

const transforms = [
  { key: 'upper', fn: s => s.toUpperCase() },
  { key: 'lower', fn: s => s.toLowerCase() },
  { key: 'camelCase', fn: s => splitWords(s).map((w, i) => i === 0 ? w.toLowerCase() : capWord(w)).join('') },
  { key: 'pascalCase', fn: s => splitWords(s).map(capWord).join('') },
  // ... 其余格式
];
​