# Tools

> Every listed resource, editors’ picks first. The filters below can be combined.

- Search: append `?q=<keywords>` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README.
- Filter by type: append `?type=<cli|skill|plugin|mcp>` to the URL.
- Filter by profession: append `?profession=<profession id>` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions
- Filter by tag: append `?tag=<tag>` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags

Resources for DevOps / SRE or ML / AI or Data analysis or Design, Tagged `html`: 7 items.

> - DevOps / SRE: Deployment, monitoring, cloud resources and reliability.
> - ML / AI: Model training, evaluation and LLM application development.
> - Data analysis: Querying, statistical analysis, reporting and visualization.
> - Design: Interface, interaction, visual and brand design.

- [Archify](https://hebbmind.com/skill/archify.md): [Skill] Turns natural-language descriptions, Mermaid or a real code repo into interactive single-file HTML diagrams: architecture, flowcharts, sequence diagrams, data flows and state machines. Validates output automatically and exports PNG or SVG.
- [HyperFrames](https://hebbmind.com/cli/hyperframes.md): [CLI] Write videos in HTML, CSS and frame-seekable animations, preview them from the CLI and render deterministic MP4s. Comes with agent skills for product launch videos, captions and talking-head re-edits. Maintained by HeyGen; needs Node.js 22+ and FFmpeg.
- [HyperFrames Skills](https://hebbmind.com/skill/heygen-com-skills.md): [Skill] HeyGen's official HyperFrames skill set: lets agents write deterministic MP4 videos in HTML, CSS and animation, with workflows for promo videos, explainers, captions and beat-synced music. Needs Node.js 22+ and FFmpeg.
- [Diagram Design](https://hebbmind.com/skill/diagram-design.md): [Skill] Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.
- [Playground](https://hebbmind.com/plugin/playground.md): [Plugin] Has the agent build single-file HTML interactive playgrounds: visual controls on one side, live preview on the other, and a prompt to copy back into Claude. Templates for design tuning, data exploration, concept maps, doc annotation, code review and architecture diagrams. By Anthropic.
- [Huashu Design](https://hebbmind.com/skill/huashu-design.md): [Skill] Have an agent produce high-fidelity clickable prototypes, editable slides, timeline animations (exportable to MP4/GIF) and infographics in HTML from one sentence. Proposes three design directions first and includes a five-dimension design review. By Huashu, MIT licensed.
- [Bencium Innovative UX Designer](https://hebbmind.com/skill/bencium-innovative-ux-designer.md): [Skill] Develops an original visual language for a brand, campaign, publication, site or product. Without looking at contemporary design, it builds ten typography-only HTML directions; once you lock one, it turns it into a production system. Not for routine UI fixes or existing design systems.