Content
Plugin
visualize
Turn any idea into a beautiful HTML visualization — with one prompt. A Claude Code plugin that creates stunning, self-contained HTML visualizations from natural language.
Plugin Signal43/100Fair
maintained33
capable14
documented100
adopted49
Install on Claude Code
> /plugin marketplace add careerhackeralex/visualize> /plugin install visualize@careerhackeralex
Stats
190
Stars
36
Forks
Maintained
Maintenance
JavaScript
Language
MIT
License
5mo ago
Last commit
5mo ago
Created
Repo: careerhackeralex/visualize
What's inside
README
1⚡ Visualize
Turn any idea into a beautiful HTML visualization — with one prompt.
A Claude Code plugin that creates stunning, self-contained HTML visualizations from natural language. Slide decks, dashboards, infographics, flowcharts, timelines, and more — all as single HTML files you can open anywhere.
HTML is not a "website." It's a visualization tool. Code is cheap. Everyone should feel empowered to visualize anything.
What It Does
Describe what you want to visualize → get a production-quality HTML file.
You: "Create a pitch deck for my AI startup"
→ pitch-deck.html (interactive slides, dark/light themes, keyboard nav, export to PNG/PDF)
You: "Visualize this CSV data as a dashboard"
→ sales-dashboard.html (KPI cards, Chart.js graphs, responsive grid)
You: "Make an infographic about remote work trends"
→ remote-work-infographic.html (big stats, scroll animations, print-ready)
Supported Visualization Types
| Type | Description |
|---|---|
| 🎯 Slide Deck | Presentations with keyboard nav, transitions, speaker notes |
| 📊 Dashboard | KPI cards, charts, metrics — Chart.js powered |
| 📈 Infographic | Scrollable visual storytelling with animations |
| 🔀 Flowchart | Process diagrams, decision trees, architecture diagrams |
| 📅 Timeline | Chronological events, roadmaps, milestones |
| ⚖️ Comparison | Side-by-side features, pros/cons matrices |
| 📉 Data Viz | Bar, line, pie, radar charts from raw data |
| 📄 One-Pager | Landing pages, summaries, briefs |
| 🧠 Mind Map | Concept relationships, brainstorming visuals |
| 📋 Kanban | Status boards, categorized item tracking |
Why This Over Gamma / Canva / PowerPoint?
| Gamma/Canva | PowerPoint | Visualize | |
|---|---|---|---|
| Cost | $10-40/mo | $100+ license | Free |
| Output | Proprietary | .pptx | Standard HTML |
| Customization | Template-limited | Manual | Infinite |
| Interactivity | Limited | None | Full HTML/CSS/JS |
| AI-native | Bolted-on | Copilot add-on | Core workflow |
| Offline | No | Yes | Yes |
| Version control | No | Barely | Yes (it's text) |
| File size | N/A | 10MB+ | ~20KB |
Features
Every visualization includes:
- 🌙 Dark / Light / Auto themes — toggle via hamburger menu, persisted to localStorage
- 📥 Download as PNG — 2x retina quality via html-to-image
- 🖨️ Print / Save PDF — optimized
@media printstyles - 📱 Responsive — works on desktop, tablet, and mobile
- ⌨️ Keyboard navigation — arrow keys for slide decks
- 🎨 Beautiful defaults — professional typography, HSL color system, 8px spacing grid
- 📦 Single file — everything inline, zero dependencies beyond optional CDN libraries
- ♿ Accessible — semantic HTML, WCAG AA contrast
CDN Libraries (optional, used when beneficial)
- Chart.js — beautiful charts with zero config
- D3.js — complex custom data visualizations
- Mermaid — diagrams from text definitions
- Three.js — 3D visualizations
- Leaflet — interactive maps
- Reveal.js — full-featured slide engine
Installation
Claude Code Plugin (recommended)
# Step 1: Add the marketplace (one-time)
claude plugin marketplace add careerhackeralex/visualize
# Step 2: Install the plugin
claude plugin install visualize@careerhackeralex
To update later:
claude plugin update visualize@careerhackeralex
Manual Installation
# Clone the repo
git clone https://github.com/careerhackeralex/visualize.git
# Claude Code auto-discovers plugins with .claude-plugin/plugin.json
# Just open Claude Code in the cloned directory, or add it as a plugin dir:
claude plugin install --plugin-dir /path/to/visualize
Usage
Once installed, just ask Claude Code to visualize anything:
"Create a presentation about our Q4 results"
"Visualize this data as a dashboard: [paste CSV/JSON]"
"Make an infographic summarizing this article: [paste URL]"
"Show me a flowchart of our deployment process"
"Create a timeline of AI milestones"
The skill triggers automatically on visualization-related requests.
Examples
See the examples/ directory for sample outputs.
Project Structure
visualize/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── skills/
│ └── visualize/
│ ├── SKILL.md # Core skill instructions
│ └── references/ # Design system, skeleton, patterns
├── examples/ # 15 sample HTML outputs
├── eval/ # Quality assurance & eval loop
├── research/ # Design research notes
├── CLAUDE.md # Claude Code context file
├── README.md # This file
└── LICENSE # MIT
How It Works
- You describe what you want to visualize
- Claude Code reads the skill instructions (design system, patterns, best practices)
- It generates a single
.htmlfile with inline CSS/JS - Open in any browser — done
The skill encodes professional design knowledge (typography scales, color theory, spacing rhythm, animation best practices) so every output looks polished without manual design work.
Contributing
We use a systematic evaluation loop to improve quality:
- Generate — run test cases from
eval/stress-tests.md - Evaluate — score outputs using the 8-dimension rubric
- Fix the skill — update
SKILL.mdor references (not individual outputs) - Re-evaluate — verify the fix works across test cases
- Ship when overall score ≥ 9.0 with no dimension below 8
See eval/LOOP.md for the full methodology.
Quality Bar
We aim to produce visualizations that people would:
- Screenshot and share on social media
- Use in a real meeting without embarrassment
- Prefer over Gamma/Canva output
- Ask "how did you make this?"
The bar is not "good for AI-generated." The bar is "good, period."
License
MIT — use it however you want.
Credits
Built by Career Hacker Alex (커리어해커 알렉스)
기술로 선한영향력을 만들고 싶습니다 — Create positive impact through technology.
File tree
600careerhackeralex/visualizeView on GitHub
.claude-plugin/
marketplace.json
plugin.json
.gitignore
CHANGELOG.md
CLAUDE.md
docs/
plans/
2026-02-28-eval-rebuild-design.md
2026-02-28-eval-rebuild-implementation.md
eval/
archive/
eval-results-raw.md
eval-round10-raw.md
eval-round11-raw.md
eval-round12-raw.md
eval-round13-raw.md
eval-round14-raw.md
eval-round15-raw.md
eval-round16-raw.md
eval-round17-research.md
eval-round18-raw.md
eval-round19-raw.md
eval-round2-raw.md
eval-round20-raw.md
eval-round21-raw.md
eval-round22-raw.md
eval-round23-raw.md
eval-round25-raw.md
eval-round26-raw.md
eval-round27-raw.md
eval-round28-raw.md
eval-round29-raw.md
eval-round3-raw.md
eval-round30-raw.md
eval-round32-raw.md
eval-round33-raw.md
eval-round34-raw.md
eval-round35-raw.md
eval-round36-raw.md
eval-round38-raw.md
eval-round4-raw.md
eval-round5-raw.md
eval-round6-raw.md
eval-round7-raw.md
eval-round8-raw.md
regen-round35-summary.md
research-round24.md
research-round31.md
research-round37.md
research-round9.md
round16-fixes.md
round19-fixes.md
round38-summary.md
screenshots/
round17/
slide-deck-demo-dark.jpg
slide-deck-demo-light.jpg
startup-pitch-deck-dark.jpg
startup-pitch-deck-light.jpg
round18/
round18-fixed/
ai-timeline.jpg
comparison-infographic.jpg
saas-dashboard.jpg
slide-deck-demo.jpg
startup-pitch-deck.jpg
system-architecture.jpg
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
system-architecture-dark.png
system-architecture-light.png
round19/
round19-fixed/
ai-timeline-dark.png
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark-slide1.png
slide-deck-demo-dark-slide5.png
slide-deck-demo-light.png
startup-pitch-deck-dark-slide1.png
startup-pitch-deck-dark-slide5.png
startup-pitch-deck-light.png
system-architecture-dark.png
system-architecture-light.png
round20/
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
system-architecture-dark.png
system-architecture-light.png
round22/
round22-fixed/
ai-timeline-dark.png
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light-s1.png
slide-deck-demo-light-s3.png
slide-deck-demo-light-s5.png
startup-pitch-deck-dark-s1.png
startup-pitch-deck-dark-s3.png
startup-pitch-deck-dark-s5.png
startup-pitch-deck-light.png
system-architecture-dark.png
system-architecture-light.png
round23/
round23-fixed/
FIXES_APPLIED.md
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
system-architecture-dark.png
system-architecture-light.png
round25/
round25-fixed/
ai-timeline-dark.png
ai-timeline-fixed.jpg
comparison-infographic-dark.png
comparison-infographic-fixed.jpg
saas-dashboard-dark.png
saas-dashboard-fixed.jpg
slide-deck-demo-dark.png
slide-deck-demo-fixed.jpg
startup-pitch-deck-dark.png
startup-pitch-deck-fixed.jpg
system-architecture-dark.png
system-architecture-fixed.jpg
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide1.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide1.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
system-architecture-dark.png
system-architecture-light.png
round26/
round26-fixed/
ai-timeline.jpg
comparison-infographic.jpg
saas-dashboard.jpg
slide-deck-demo.jpg
startup-pitch-deck.jpg
ai-timeline-dark.png
ai-timeline-light.png
comparison-infographic-dark.png
saas-dashboard-dark.png
slide-deck-demo-dark.png
startup-pitch-deck-dark.png
system-architecture-dark.png
round27/
round27-fixed/
ai-timeline-dark.png
carousel-infographic-dark.png
saas-dashboard-dark.png
startup-pitch-deck-dark.png
ai-timeline-dark.png
carousel-infographic-dark.png
comparison-infographic-dark.png
quote-card-dark.png
saas-dashboard-dark.png
slide-deck-demo-dark.png
startup-pitch-deck-dark.png
system-architecture-dark.png
round28/
round28-fixed/
ai-timeline-dark.png
carousel-infographic-dark.png
comparison-infographic-dark.png
saas-dashboard-dark.png
startup-pitch-deck-dark.png
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
status-report-dark.png
status-report-light.png
system-architecture-dark.png
system-architecture-light.png
round29/
round29-fixed/
carousel-threads-dark.png
process-guide-dark.png
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
carousel-korean-dark.png
carousel-korean-light.png
carousel-threads-dark.png
carousel-threads-light.png
cheatsheet-claude-code-dark.png
cheatsheet-claude-code-light.png
cheatsheet-git-dark.png
cheatsheet-git-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
event-poster-dark.png
event-poster-light.png
process-guide-dark.png
process-guide-light.png
quote-card-dark.png
quote-card-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
status-report-dark.png
status-report-light.png
system-architecture-dark.png
system-architecture-light.png
round30/
round30-fixed/
carousel-threads-dark.png
event-poster-dark.png
quote-card-dark.png
saas-dashboard-dark.png
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
carousel-infographic-slide3.png
carousel-infographic-slide5.png
carousel-korean-dark.png
carousel-korean-light.png
carousel-threads-light.png
cheatsheet-claude-code-light.png
round32/
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
carousel-korean-dark.png
carousel-korean-light.png
carousel-threads-dark.png
carousel-threads-light.png
cheatsheet-claude-code-dark.png
cheatsheet-claude-code-light.png
cheatsheet-git-dark.png
cheatsheet-git-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
event-poster-dark.png
event-poster-light.png
process-guide-dark.png
process-guide-light.png
quote-card-dark.png
quote-card-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
status-report-dark.png
status-report-light.png
system-architecture-dark.png
system-architecture-light.png
round33/
round33-fixed/
carousel-infographic.jpg
carousel-korean.jpg
comparison-infographic.jpg
process-guide.jpg
saas-dashboard.jpg
slide-deck-demo.jpg
startup-pitch-deck.jpg
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
carousel-korean-dark.png
carousel-korean-light.png
carousel-threads-dark.png
cheatsheet-claude-code-dark.png
cheatsheet-claude-code-light.png
cheatsheet-git-dark.png
cheatsheet-git-light.png
comparison-infographic-dark.png
comparison-infographic-light.png
event-poster-dark.png
event-poster-light.png
process-guide-dark.png
process-guide-light.png
quote-card-dark.png
quote-card-light.png
saas-dashboard-dark.png
saas-dashboard-light.png
slide-deck-demo-dark.png
slide-deck-demo-light.png
slide-deck-demo-slide3.png
slide-deck-demo-slide5.png
startup-pitch-deck-dark.png
startup-pitch-deck-light.png
startup-pitch-deck-slide3.png
startup-pitch-deck-slide5.png
status-report-dark.png
status-report-light.png
system-architecture-dark.png
system-architecture-light.png
round34/
round34-fixed/
carousel-infographic-dark.png
quote-card-dark.png
slide-deck-demo-dark.png
startup-pitch-deck-dark.png
status-report-dark.png
status-report-light.png
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
carousel-korean-dark.png
carousel-threads-dark.png
cheatsheet-claude-code-dark.png
cheatsheet-git-dark.png
comparison-infographic-dark.png
event-poster-dark.png
process-guide-dark.png
quote-card-dark.png
saas-dashboard-dark.png
slide-deck-demo-dark.png
startup-pitch-deck-dark.png
status-report-dark.png
system-architecture-dark.png
round35/
ai-timeline-dark.png
ai-timeline-light.png
carousel-infographic-dark.png
carousel-infographic-light.png
... 267 moreFAQ
visualize is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes visualize. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is visualize?
- Turn any idea into a beautiful HTML visualization — with one prompt. A Claude Code plugin that creates stunning, self-contained HTML visualizations from natural language.
- How do I install visualize?
- Run these in Claude Code: /plugin marketplace add careerhackeralex/visualize then /plugin install visualize@careerhackeralex. Then prompt normally.
- Does visualize auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is visualize free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.