善用工具弥补技术深度

March 13, 2026 · 8 min read

这是一篇关于小白在没有任何技术深度，但是在善于使用AI工具的情况下，能否弥补技术深度鸿沟的探讨。

前言

我在迷茫的时候，总会去翻一些大佬的文章寻找方向，我特别想知道在AI洪流中，怎么去提升自己，于是我特地去翻了一下启蒙老师的博客，也许里面就有我想要的答案。在这提一下，特别感谢我的导师，带我进入到AI行业中。

感兴趣的可以点击查看原文： AI水平依然与用户挂钩

文中做了一个特别有意思的实验：

使用Opus 4.6在Docusaurus中添加“复制 Markdown”按钮的实验，通过模拟小白、基础和专家三类用户，探讨技术深度对AI协作效率的影响。

文章里面提到： 技术深度可以放大模型的能力，我非常赞同。

不知道你们会不会有这种感觉，在使用AI的时候会觉得特别没有安全感，总感觉给我埋了什么雷，即使它是世界上最强的claude

当自己想认真看一下ai改了什么的时候，时常因为自己技术不够深入，发现review起来非常吃力，有时候直接不想看了。

并且由于技术水平的上限，根本无法判断AI写的是否正确，写的不好要么给AI重新改，搞乱了只能作为AI垃圾丢掉，重头再来。

文章中的小白在最后并没有完成，原文说到：遗憾的是，修复后样式依然不正确，7次机会用完了。

但是我认为：

大模型发展到了今天，善于使用工具已经可以做到弥补技术深度的不足。这样的小需求，不应该在7次对话下依旧无法完成。

说实话，虽然我的博客是用Docusaurus框架写的，但我其实只是当作md笔记本一样写，我并不了解这个框架到底是一个什么原理，什么逻辑，我只知道一些md文档的格式，和启动命令是npm run start，其他什么美化我都是交给ai打理。

那对于我这个小白来说，能否在使用一些工具技巧的情况下完成这个需求呢？

话不多说，开始吧！

工具选择

对于这种需求来说，claude code简直太适合了了。这次我只打开终端，不打开ide，完全由它操作，全程用自然语言，看看需要几轮来完成。

进入计划模式

首先，这种需要参考一个项目来实现的，直接无脑计划模式就行了，进入计划模式，输入简洁的需求后，加上一句特别的提示词

1773412277325

这个提示词也没啥神奇，就是让大模型进行提问澄清，但是确实特别有用。

大模型发展到今天，人类传统思维的约束也许会限制模型的发挥，这也是为什么claude code工程师后面放弃了RAG检索代码库的方式，而是只给它一个grep，因为他们相信，大模型更懂自己需要什么。

按下回车键后，它开始探索链接的项目内容，在一段时间的探索后，它开始向我提问：

1773412730316

紧接着又问了我第二个问题：

1773412765938

两个问题回答后，它就开始写计划了，下面是它写的计划：

# 为 Docs 页面添加「复制 Markdown」按钮

## Context

用户希望参考 [FlyNumber/markdown_docusaurus_plugin](https://github.com/FlyNumber/markdown_docusaurus_plugin) 的实现，为博客的 docs 页面添加一个"复制 Markdown"按钮。点击后将当前页面的 Markdown 源码复制到剪贴板。

核心思路：构建时生成清洗后的 `.md` 文件 → 按钮点击时 fetch 该文件 → 复制到剪贴板。

## 需要新建/修改的文件

| 文件 | 操作 |
| ---- | ---- |
| `plugins/copy-markdown-source/index.js` | 新建 - 本地 Docusaurus 插件，postBuild 生成 .md 文件 |
| `src/components/CopyMarkdownButton/index.js` | 新建 - 复制按钮 React 组件 |
| `src/components/CopyMarkdownButton/styles.module.css` | 新建 - 按钮样式 |
| `src/theme/Root.js` | 修改 - 扩展现有组件，注入按钮到 docs 页面 |
| `docusaurus.config.js` | 修改 - 注册本地插件 |

## 实现步骤

### 1. 创建本地插件 `plugins/copy-markdown-source/index.js`

使用 Docusaurus `postBuild` 生命周期钩子：

- 从 `props.plugins` 中找到 `plugin-content-docs`，提取所有 doc 的 `permalink` 和 `source` 路径
- 读取源 `.md/.mdx` 文件，执行清洗（去 frontmatter、去 import、去 MDX 组件标签）
- 将清洗后的内容写入 `{outDir}{permalink}.md`

清洗规则：
- 移除 YAML frontmatter（`---...---`）
- 移除 `import` 语句
- 移除 MDX 组件：`<DocCardList />`、`<CsvTable ... />`、`<Tabs>`、`<TabItem>` 及闭合标签
- 合并多余空行
- 保留标准 HTML 标签（`<mark>`、`<span>`、`<details>` 等）和图片引用

注意：插件使用 CJS（`module.exports`），因为 Docusaurus 本地插件在 Node.js 端运行，项目 `package.json` 无 `"type": "module"`，CJS 兼容。需要 `fs` 和 `path`（Node 内置），无需额外依赖。

### 2. 创建按钮组件 `src/components/CopyMarkdownButton/`

简单的单按钮组件：
- 从 `window.location.pathname` 构造 `.md` 文件 URL（去尾部斜杠后加 `.md`）
- `fetch` 该文件，`navigator.clipboard.writeText` 复制
- 状态切换：默认显示复制图标，成功后显示"已复制"2 秒

样式：使用 CSS Modules，配合 `--ifm-color-primary` 等 Docusaurus CSS 变量，支持亮/暗模式。

### 3. 修改 `src/theme/Root.js`

在现有 `PasswordProtect` 包裹基础上，增加 `useEffect`：
- 检查当前路径是否以 `/docs/` 开头
- 查找 `article .markdown h1`（或 `article header`），在其后注入按钮容器
- 用 `createRoot` 渲染 `CopyMarkdownButton`
- 使用 `MutationObserver` 监听 DOM 变化，处理客户端路由切换时的重新注入
- 通过 `data-copy-md-btn` 属性防止重复注入

### 4. 修改 `docusaurus.config.js`

在 config 对象中新增 `plugins` 字段（与 `presets` 同级）：

```js
plugins: [
  './plugins/copy-markdown-source',
],
```

## 验证方式

1. `npm run build` — 检查 `build/docs/` 下是否生成了对应的 `.md` 文件，内容已清洗
2. `npm run serve` — 打开任意 docs 页面，确认按钮出现在标题区域
3. 点击按钮 → 粘贴到编辑器，确认复制的是清洗后的 Markdown 源码
4. 测试客户端导航：在 docs 页面间切换，确认按钮正确出现/消失
5. 确认非 docs 页面（首页、博客）不显示按钮