# 工具集

> 全部已收录的资源，编辑推荐的排在前面。下面几种条件可以同时用。

- 可以搜索：在地址后加 `?q=<关键词>`，多个关键词用空格分隔，要同时命中。搜的是名称、仓库、标签、职业、简介与 README。
- 可以按类型过滤：在地址后加 `?type=<cli|skill|plugin|mcp>`。
- 可以按职业过滤：在地址后加 `?profession=<职业编号>`，多个用逗号分隔，资源适合其中任意一个即可。编号见 https://hebbmind.com/api/v1/professions
- 可以按标签过滤：在地址后加 `?tag=<标签>`，多个用逗号分隔，资源要同时带有这些标签。标签见 https://hebbmind.com/api/v1/tags

适合运维 / SRE或算法 / AI或设计师的资源，带标签 `html`，共 7 项。

> - 运维 / SRE：部署、监控、云资源与系统稳定性。
> - 算法 / AI：模型训练、评测与大模型应用开发。
> - 设计师：界面、交互、视觉与品牌设计。

- [Archify](https://hebbmind.com/zh-TW/skill/archify.md): [Skill] 把自然语言描述、Mermaid 或真实代码仓库转成可交互的单文件 HTML 图表，覆盖架构图、流程图、时序图、数据流与状态机，生成后自动校验，可导出 PNG/SVG。
- [HyperFrames](https://hebbmind.com/zh-TW/cli/hyperframes.md): [CLI] 用 HTML、CSS 与可逐帧定位的动画写视频，命令行预览并渲染成确定性的 MP4；附带产品发布视频、字幕、口播重剪等 agent 技能。HeyGen 官方维护，需要 Node.js 22+ 与 FFmpeg。
- [HyperFrames Skills](https://hebbmind.com/zh-TW/skill/heygen-com-skills.md): [Skill] HeyGen 官方 HyperFrames 技能集：让 agent 用 HTML、CSS 与动画写出可确定性渲染的 MP4 视频，含产品宣传片、讲解视频、字幕、配乐卡点等创作流程。需要 Node.js 22+ 与 FFmpeg。
- [Diagram Design](https://hebbmind.com/zh-TW/skill/diagram-design.md): [Skill] 生成自包含 HTML+SVG 的杂志风图表：架构图、流程图、时序图、泳道图、甘特图等数十种类型，可读取网站配色匹配品牌，支持导入 Mermaid、draw.io 与 Excalidraw 源文件重绘。
- [Playground](https://hebbmind.com/zh-TW/plugin/playground.md): [Plugin] 让 agent 生成单文件 HTML 交互式 playground：一侧是可视化控件，一侧是实时预览，底部输出可复制回 Claude 的提示词。内置设计调参、数据探索、概念图、文档批注、代码评审、代码架构图等模板。Anthropic 官方维护。
- [Huashu Design](https://hebbmind.com/zh-TW/skill/huashu-design.md): [Skill] 一句话让 agent 用 HTML 产出高保真可点击原型、可编辑幻灯片、时间轴动画（可导出 MP4/GIF）与信息图，先给三个设计方向再落地，附五维度设计评审。花叔出品，MIT 协议。
- [Bencium Innovative UX Designer](https://hebbmind.com/zh-TW/skill/bencium-innovative-ux-designer.md): [Skill] 为品牌、活动、出版物、网页或产品建立独立的视觉语言：从主题本身的语境出发，不参考当下的设计作品，只用字体、颜色与留白做出 10 个相互独立的 HTML 排版方向，由人看过后明确选定一个，再进入第二轮做成可投产的设计系统与成品。不适合日常界面修补、小组件或套用现有设计系统。