企业官网建设流程全解析

Trae 实战：用 Agent Skills 一键安装 Archify，自动生成项目架构图

摘要：本文介绍如何使用 Vercel Labs 的 Agent Skills 工具，在 Mac 上通过npx skills命令一键安装archify技能，并让 Trae 自动调用它生成项目架构图。文章涵盖 Skills 的原理、安装流程、常见问题排查以及 Trae 调用方式，适合想提升 AI 编程助手自动化能力的开发者参考。

一、什么是 Agent Skills？

Agent Skills 是 Vercel Labs 推出的 AI 编程助手能力包规范。它把一个特定任务的操作流程、脚本、参考文档封装成一个文件夹，核心文件是SKILL.md。

一个 Skill 的结构通常是：

archify/ ├── SKILL.md ├── scripts/ ├── references/ └── assets/

其中SKILL.md包含 YAML 元数据和执行指令。Agent 启动时只读取name和description，当用户任务匹配时才加载完整内容，这种渐进式加载机制让安装几十个技能也不会撑爆上下文。

二、什么是 Archify？

Archify 是一个架构图生成技能。它不是让 AI 随便画一张图，而是按固定流程工作：

1. Agent 读取项目代码、模块和依赖关系；
2. 生成结构化的 JSON IR（中间表示）；
3. 对 JSON 做 Schema、布局和完整性校验；
4. 渲染成自包含的 HTML 文件，包含 SVG 架构图、深浅主题和导出能力。

相比手动画架构图，它的优势是可重复、可校验、与代码结构一致。
官网地址：https://tt-a1i.github.io/archify/gallery.html

三、安装步骤

在 Mac 终端执行：

npx skillsaddtt-a1i/archify-g

命令拆解：

执行后会出现交互式选择界面：

◆ Select skills to install │ ↑↓ move, space select, enter confirm │ │ ❯ ○ Select All (0/2) │ ○ archify │ ○ archify-review

用方向键移动，空格选中，回车确认。如果只想装主功能，勾选archify即可。

接着会询问安装到哪些 Agent：

◆ Which agents do you want to install to? │ ── Universal (.agents/skills) ── always included ── │ • Cursor │ • Codex │ • GitHub Copilot │ ...

Universal 部分默认包含，直接回车即可。

四、让 Trae 识别 Archify

安装完成后，技能位于~/.agents/skills/archify/。
可以在 Trae 中设置 ->技能与命令，在导入设置中启用.agent技能目录。
开启后，智能体将自动加载.agents/skills路径下的自定义技能。

五、在 Trae 中使用

在 Trae 中切换到SOLO 模式或者AI侧栏选中技能：

使用 archify 分析当前仓库并生成架构图

接着我们就能在输入框中输入我们的需求，可以结合代码生成架构图或者直接生成交互流程图等。
生成的文件html 页面 类型类似于这样子

这个页面是动态的，可以进行点击，去查看详细细节方便我们参考

六、常见问题

1. 克隆失败：HTTP2 framing layer 错误

这是国内访问 GitHub 时常见的网络问题。解决方法：

# 强制使用 HTTP/1.1gitconfig--globalhttp.version HTTP/1.1

或者使用镜像手动克隆后本地安装：

gitclone https://ghproxy.net/https://github.com/tt-a1i/archify.gitcdarchify npx skillsadd./-g

2. Trae 没有识别到技能

检查目录是否正确：

ls~/.trae/skills/archify/SKILL.md

如果文件存在但仍未识别，重启 Trae 或在设置中手动导入。

3. 界面卡住不动

安装过程中的多选界面需要键盘操作，不是卡死。按↑↓移动、空格选择、回车确认。如果终端焦点丢失，点击一下终端窗口再按键。

七、总结

Agent Skills 把 AI 编程助手从"通用聊天机器人"变成了"可插拔的能力平台"。通过npx skills管理技能包，开发者可以像 npm 安装包一样，一键为 Cursor、Trae、Codex 等工具添加专业能力。Archify 只是其中一个例子，类似的技能还有代码审查、文档生成、测试用例生成等，值得探索。