Harness 实战教程
第 04 章 / CHAPTER 04

一些高级的使用方法

Copilot 副驾驶、Blender 3D 建模、HyperFrames 科普视频、skill-creator 创建技能、浏览器控制与油猴脚本。

Copilot 副驾驶

学习本节之前,请先了解 VS Code 的用法。Copilot 用于帮助你编写代码、辅助填写代码等,可以大大提高编程效率。

我们打开 VS Code 的「扩展」面板,搜索 Claude Code for VS Code 并安装。

VS Code 扩展商店中的 Claude Code for VS Code
安装扩展

我们之前已经配置过 CC Switch 了,点击这两处即可使用 Claude Code。打开一个工作区,输入你想要干的事情。

VS Code 中的 Claude Code 入口
扩展入口
打开一个工作区
打开工作区
在 Claude Code 中输入任务
输入任务

安装国产化 Copilot

如果你倾向于使用国产软件,可以安装 Trae Code

Trae Code 扩展页面
Trae Code

Trae Code 可以在侧边栏编写程序。

使用 Trae Code 侧边栏编写程序
侧边栏编程

也可以根据上下文自动补全代码。

Trae Code 根据上下文自动补全
自动补全

还可以修正你的代码。

Trae Code 修正代码
代码修正

搭建 3D 模型

GPT 6 Astra 具有非常优秀的建模能力,因此可以连接 Blender MCP 来建立 3D 模型。

  1. 访问 blender.org 安装 Blender
  2. 访问 github.com/ahujasid/blender-mcp 安装 Blender MCP。因为官方文档比较复杂,直接让 Codex 帮你安装即可
让 Codex 安装 Blender MCP
用 Codex 安装

根据实际说明,AI 可能会给你文件,你需要手动安装插件。

AI 生成的插件文件
插件文件
在 Blender 中安装插件
安装插件
完成插件安装
插件安装完成

安装后,回到主页,按下 N 键,点击即可启动 MCP 服务器。

按 N 键打开侧栏,启动 MCP 服务器
启动 MCP 服务器

看到如下界面,说明 MCP 已安装成功。

Blender MCP 服务器已启动
服务器启动
MCP 连接成功
连接成功

开始建模。

向 AI 描述要建立的模型
开始建模
AI 正在 Blender 中建模
建模过程
建模细节调整
建模细节
最终生成的 3D 模型
生成结果

最后,Blender 会给你生成的模型。

制作优美的科普视频

我们这里使用 HyperFrames 插件(Skill)。

HyperFrames 插件页面
HyperFrames 插件
安装 HyperFrames
安装插件

HyperFrames 本质上是把网页的流畅动画合成为一个视频。

用网页动画合成视频
动画合成

也可以结合 frontend-design 技能来优化设计。

结合 frontend-design 技能优化设计
优化设计

HyperFrames 有一个预览服务器,可以在生成视频之前先看一遍是否符合预期。如未自动打开,可以发消息直接打断 AI 思考。

HyperFrames 的预览服务器
预览服务器
视频预览效果
预览效果

Remotion 也是一个视频生成插件,这里不做演示。

Remotion 插件页面
Remotion

使用 skill-creator 创建技能

前面我们在中转站部分提到,可以使用中转站服务商提供的生图 API 请求模板来生图。这次我们把它集成在一个 Skill 里。

使用 skill-creator 把生图 API 集成进技能
创建生图技能

以后直接输入 /image gen 就可以生图了。

输入 /image gen 直接生图
直接生图

下面是 skill-creator 的一些用法示例。

  1. 创建一个 C++ 竞赛代码审查 Skill。功能:接收一段 C++ 代码,自动检查竞赛高频坑点:数组越界、int 溢出、变量未初始化、memset 误用、long long 混用、死循环。输出结构化报告:问题位置、风险等级、原因、修复示例。约束:只做静态文本分析,不编译运行;输出用 Markdown 表格。附带 3 个测试用例:int 溢出样例、未初始化变量、memset 作用于 int 数组。
  2. 创建 Markdown 转公众号 HTML 的 Skill。输入 Markdown 正文,输出适配微信公众号的内嵌 CSS HTML,去掉不兼容标签;处理标题、列表、代码块、引用块;代码块浅色背景。约束:输出 HTML 不能依赖外部 CSS 文件,全部样式内联;不生成图片。附带 2 个测试样例:含代码块的文章、普通随笔。
  3. 创建 GB/T 7714 参考文献校验 Skill。输入参考文献条目,检查格式:期刊、学位论文、网页文献;识别缺失项(作者、年份、期刊名、页码),给出修正版本。输出:校验结果、错误清单、修正后的参考文献。约束:遵循 GB/T 7714-2015,Markdown 输出。附带 4 个测试用例:期刊、学位论文、图书、网页文献。

使用浏览器控制以及创建油猴插件

ChatGPT 可以控制你的浏览器实现自动操作。在 ChatGPT 控制浏览器之前,需要先安装一个插件。

浏览器控制插件
安装插件

在 Codex 设置中启用。

在 Codex 设置中启用浏览器控制
启用开关

输入提示词,即可完成浏览器控制。

通过提示词让 AI 自动操作浏览器
浏览器自动操作

油猴能干什么

在创建油猴脚本之前,我们先搞清楚油猴能干什么。油猴可以在浏览器访问指定网页时自动注入 JS 代码,修改网页 DOM、CSS、网页逻辑,给网页加功能、改界面、自动操作网页。

网页净化、解除网页限制

  • 去除网页弹窗、悬浮广告、阅读遮挡弹窗
  • 解除禁止复制:很多网站不让选文字、复制,一键解锁
  • 移除网页上「登录才能看全文」的遮罩(仅前端渲染内容)
  • 给任意网站一键暗黑模式,修改字体、页面布局

网页自动化(重复操作自动跑)

  • 网课平台:自动下一集、自动播放、自动刷新、自动答题提醒
  • 表单自动填充、批量勾选、批量导出页面表格数据
  • 定时点击、页面监控(页面出现指定文字就弹窗提醒)

网站功能增强(最常用)

  • CSDN、知乎增强:免登录阅读、清理侧边垃圾推荐
  • GitHub 增强:加速下载 Release,显示文件大小
  • 电商:商品页面自动显示历史价格曲线、比价
  • 视频网站:播放器增强,自定义倍速、画面滤镜、截图按钮、提取视频 / 音频下载链接
  • 文献:一键抓取论文 PDF、批量导出引用信息

前端开发调试

  • 临时修改线上网页的 JS、CSS,快速调试页面效果
  • 抓取网页接口返回数据、导出表格
  • 做网页原型、临时测试交互逻辑

自定义小工具(自己写 JS 脚本)

你可以自己新建脚本写 JS。比如:打开 B 站自动切宽屏;打开搜索页自动过滤关键词;页面统计数据汇总。

如何安装油猴

  1. 可以直接进入 tampermonkey.net 官网下载油猴插件;也可以按下面的步骤手动安装
  2. 推荐使用 Edge 浏览器:进入 Edge 浏览器的插件商店,搜索「篡改猴」并获取
  3. 进入「管理扩展」页面,再进入「详细信息」
  4. 打开「允许访问文件 URL」这一项
  5. 然后就可以创建油猴脚本了,最后会生成一个 js 文件
  6. 点击篡改猴进入油猴插件页面,直接将 js 文件拖入到浏览器安装即可
在 Edge 插件商店搜索「篡改猴」
搜索篡改猴
获取篡改猴插件
获取插件
进入「管理扩展」页面
管理扩展
进入「详细信息」
详细信息
打开「允许访问文件 URL」
允许访问文件 URL
创建油猴脚本
创建脚本
点击篡改猴进入插件页面
篡改猴页面
油猴插件管理页面
插件页面
将 js 文件拖入浏览器安装
拖入安装