# 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 Frontend or ML / AI or Design, Tagged `data-visualization`: 8 items.

> - Frontend: Web and mobile-web interfaces: building, debugging and performance tuning.
> - ML / AI: Model training, evaluation and LLM application development.
> - Design: Interface, interaction, visual and brand design.

- [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.
- [visual-explainer](https://hebbmind.com/plugin/visual-explainer.md): [Plugin] Turns terminal output like architecture explanations, diff reviews and plan comparisons into styled HTML pages or slides with zoomable interactive Mermaid diagrams, replacing hard-to-read ASCII diagrams and tables. No build step; open directly in a browser.
- [Build Web Data Visualization](https://hebbmind.com/skill/openai-openai-skills.md): [Skill] OpenAI's official set of 18 web data visualization skills: chart selection and critique, D3, Canvas, Three.js, maps, statistical uncertainty, live dashboards, Gantt charts, UML and scrollytelling. Ships with a Codex plugin; installed alone, the plugin-level references are missing.
- [Build Web Data Visualization](https://hebbmind.com/plugin/build-web-data-visualization.md): [Plugin] OpenAI's official Codex plugin with 18 skills to choose, design, build, test and export web charts, maps, dashboards, Gantt charts and UML, using D3, Vega-Lite and Three.js with attention to accessibility and responsiveness. Codex only.
- [Lieflat Charts](https://hebbmind.com/skill/lieflat-charts.md): [Skill] Generates template-driven charts as single-file HTML: picks a chart from real Lupi, Basics, Glance, Maps and Interactive gallery implementations based on data shape, or fills one of 12 Chinese and English report templates. Defaults to Mono grayscale with semantic color presets. Written in Chinese.
- [PaperBanana](https://hebbmind.com/mcp/paperbanana.md): [MCP] Turns a paper's method description (text or PDF) or data files into publication-ready diagrams and plots, with several AI reviewer roles refining each figure. Needs an OpenAI or Gemini API key (billed per image), Python and uv. A community reimplementation, not by the original paper's authors.
- [PaperOrchestra](https://hebbmind.com/skill/paperorchestra.md): [Skill] The five-agent PaperOrchestra pipeline (outline, figures, literature review, section writing, polishing) as skills: turns research ideas, experiment logs and a conference template into a LaTeX paper and checks citations via Semantic Scholar. Needs Python; verify the draft yourself.