Single-file HTML deliverables, picked by intent. A Claude Code Skill that dispatches to 7 HTML methods and produces a single
.htmlfile you can drop into a browser, attach to Slack, embed in Notion, or commit to a repo.
The companion skill visualize2 covers non-HTML output (SVG/PNG/PDF/MP4/GIF/JSON). But sometimes you want exactly the opposite — an HTML file you can share. That's this skill.
Note. For multi-file React or shadcn projects, use
frontend-design(Anthropic plugin) orweb-artifacts-builderinstead. This skill is for single-file deliverables.
| # | Method | Best for | Style hallmarks |
|---|---|---|---|
| 1 | Editorial diagram | blog/article explanatory figures | inline SVG, 4px grid, hairlines, no shadows |
| 2 | Interactive visual | "let me touch this" data figures | vanilla SVG + JS, hover/click |
| 3 | Distinctive landing | marketing / hero / one-pager | bold type, asymmetric grid, motion |
| 4 | Prototype / UI mockup | dashboards, settings, onboarding | design tokens, sidebar+main |
| 5 | Plotly HTML | charts the reader can pan/zoom | Plotly via CDN |
| 6 | Single-page report | stakeholder report, print-ready | typographic body, charts, tables |
| 7 | Slide deck | technical talks, demo decks | reveal.js via CDN |
A full intent → method lookup lives in references/methods.md.
A working sample for each of the 7 methods lives in samples/. Each is a single self-contained HTML file — clone the repo and open them in a browser to see them in action.
| # | Method | Sample file | What it shows |
|---|---|---|---|
| 01 | Editorial diagram | samples/01_editorial_customer_journey.html |
A 4-stage onboarding journey + 3 metric callouts in editorial style (4px grid, hairlines, atomic-tangerine accent). |
| 02 | Interactive visual | samples/02_interactive_sales_dashboard.html |
Quarterly sales bar chart with hover tooltips, click-to-lock highlight, and 3-way metric switcher (Revenue / Units / AOV). Pure SVG + vanilla JS, no framework. |
| 03 | Distinctive landing | samples/03_landing_lumen.html |
"Lumen & Co." design studio landing — sticky nav, asymmetric hero, infinite-scroll marquee, hover-invert feature triplet, dark CTA. |
| 04 | Prototype / UI mockup | samples/04_prototype_settings.html |
Aurora notification settings panel — dark token system, sidebar+main, working toggles, slider, status pills, gradient CTA. |
| 05 | Plotly HTML | samples/05_plotly_revenue.html |
12-month revenue line chart with full Plotly interactivity (hover, zoom, pan, legend toggle, PNG export). Generated by scripts/plotly_html.py from a CSV. |
| 06 | Single-page report | samples/06_report_q1.html |
Aurora Q1 2026 performance report — cover, exec summary, KPI cards, inline SVG bar chart, regional metrics table, narrative sections, print-ready CSS. |
| 07 | Slide deck (reveal.js) | samples/07_slides_q2_plan.html |
Q2 plan deck — title slide, KPI overview, section divider, vertical drill-down on each pillar, fragment-revealed bullets, speaker notes. Use → ↓ to navigate. |
GitHub renders HTML files as source rather than rendering them. Three options to view live:
- Locally: clone the repo and open the file in a browser, or run
python scripts/preview.py samples/and visithttp://localhost:8765/. - Quick web preview: paste the raw GitHub URL into https://htmlpreview.github.io/ — works for samples without external scripts (samples 01–04, 06).
- GitHub Pages: enable Pages on this repo (Settings → Pages → Branch:
main→/(root)) and the samples become reachable athttps://daishir0.github.io/htmldesign/samples/<file>.html.
Ask 1–3 short questions, then build:
You: 提案資料を作りたい
Claude (htmldesign): どの形式が近いですか？
1) スライドデッキ（reveal.js）
2) 単一ページのレポート
3) ランディングページ
You: 1
Claude: スライドデッキ + black テーマで作ります → outputs/proposal_deck.html
You: 売上グラフを hover できる Plotly HTML で
Claude: Plotly HTML + line + hover で生成します → outputs/revenue.html
# 1. Clone into your skills directory
git clone https://github.com/daishir0/htmldesign ~/.claude/skills/htmldesign
# 2. (Optional) Python deps for the data-driven helper
pip install plotlyThe skill is mostly direct HTML authoring — Claude writes the file. The two helper scripts only kick in for data-driven cases.
Once installed, ask Claude things like:
ブログ用の説明図を editorial で
売上の Plotly HTML を作って
新製品のランディング、ダーク基調
ダッシュボードのモックアップ作って
四半期レポートを単一HTMLで
プレゼン資料、reveal.js で
The skill picks the method, builds the file, and reports the path.
# CSV → Plotly HTML (interactive chart)
python ~/.claude/skills/htmldesign/scripts/plotly_html.py \
--csv data.csv --x month --y revenue --kind line \
--title "Aurora — 2026 Revenue" --out outputs/revenue.html
# Preview generated HTML in a browser via local HTTP server
python ~/.claude/skills/htmldesign/scripts/preview.py outputs/revenue.htmlNote about
run_python. Some examples inSKILL.mdandreferences/*.mduse arun_pythonhelper. This is a personal Python wrapper defined in the author's~/.claude/CLAUDE.md. It is not part of this skill. If you don't have it, simply replacerun_pythonwithpython(orpython3). The skill's scripts work with any standard Python 3.8+.
htmldesign/
├── SKILL.md # the skill itself (frontmatter + body)
├── README.md # this file (GitHub-only)
├── LICENSE # MIT
├── .gitignore
├── references/ # progressively-loaded per-method guides
│ ├── methods.md # intent → method lookup
│ ├── editorial.md # 4px-grid editorial diagrams
│ ├── interactive.md # vanilla SVG+JS interactive
│ ├── landing.md # marketing landing patterns
│ ├── prototype.md # UI tokens + components
│ ├── plotly_html.md # Plotly via CDN
│ ├── report.md # single-page report skeleton
│ └── slides.md # reveal.js patterns
├── scripts/
│ ├── plotly_html.py # CSV/JSON → interactive Plotly HTML
│ └── preview.py # local HTTP server for previewing
└── samples/ # one working sample per method (open in browser)
├── 01_editorial_customer_journey.html
├── 02_interactive_sales_dashboard.html
├── 03_landing_lumen.html
├── 04_prototype_settings.html
├── 05_plotly_revenue.html
├── 06_report_q1.html
└── 07_slides_q2_plan.html
The skill applies these rules top-to-bottom (first match wins):
- User explicitly named a method ("editorialで", "Plotlyで(HTML)", "reveal.jsで", "ランディング", "プロトタイプ") → use it.
- "プレゼン / スライド / slides / deck" → slides (reveal.js).
- "レポート / report / 単一ページにまとめて" with multiple sections → single-page report.
- "ランディング / landing / LP / マーケ" → distinctive landing.
- "ダッシュボード / 管理画面 / モックアップ / プロトタイプ" → prototype.
- Numeric data + interactive (hover/zoom/legend) → Plotly HTML.
- Bespoke small interactive figure (< 50 datapoints, custom shapes) → interactive visual.
- Explanatory figure for an article (no interactivity) → editorial diagram.
- Tie-breaker: editorial > interactive > prototype > Plotly HTML > landing > report > slides.
See SKILL.md §3 for the full ruleset.
- Always single HTML file.
- External assets only as CDN script tags (Plotly, reveal.js).
- Saves to
./outputs/<filename>.htmlunless you specify a path. - Filename derived from intent (lowercase snake_case).
- Single file, renders offline (CDN-only is acceptable; otherwise inline)
- Mobile-aware (responsive viewport + breakpoint at 480px)
- Accessibility: semantic HTML, alt/labels, contrast ≥ 4.5:1
- No emojis unless asked
- No tracking, no autoplay
- Print-friendly when the deliverable is a report
- Brand restraint: max 2 typefaces, max 5 colors
# Validate the skill structure
python ~/.claude/skills/skill-creator/scripts/quick_validate.py ~/.claude/skills/htmldesign
# Package as a redistributable .skill file
python ~/.claude/skills/skill-creator/scripts/package_skill.py ~/.claude/skills/htmldesign ./dist| If you want… | Use |
|---|---|
| Non-HTML output (SVG, PNG, PDF, MP4, GIF, JSON) | visualize2 |
| Multi-file React + Tailwind + shadcn components | frontend-design (Anthropic plugin) |
| Multi-component HTML artifacts with React | web-artifacts-builder |
.docx / .pptx / .xlsx documents |
docx / pptx / xlsx |
| Multi-file site to deploy | webgen |
- Brand-color auto-pickup (read theme tokens from a project file)
- Inline-everything mode (offline-first single file with embedded Plotly)
- Visual diff helper (compare two generated HTML files)
- More archetypes for landing (SaaS hero, manifesto, newsletter)
MIT — see LICENSE.
Built on the shoulders of:
Plotly, reveal.js,
cathrynlavery/diagram-design (editorial diagram philosophy),
Anthropic's frontend-design plugin (landing-page polish).