gutanbug

Visual Docs — Design skill for Claude Code

Design community

Claude Code plugin that turns plans, designs, reports and guides into a clean one-page visual document (HTML Artifact).

How to install Visual Docs

This entry records only its repository, not the path inside it, so there is no exact command to give. Open gutanbug/visual-docs and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Visual Docs does

Claude Code plugin that turns plans, designs, reports and guides into a clean one-page visual document (HTML Artifact).

Alternatives in Design

Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
L Docs Package — Document a core Lowdefy package (api, build, cli, client, engine, layout, operators) 3k ★
Plan Artifact — Creates one polished, self-contained HTML artifact from a plan, PRD, roadmap, strategy, migration, rollout, re 652 ★

README

visual-docs

A Claude Code plugin that turns plans, designs, reports and guides into a clean one-page visual document (HTML Artifact).

![visual-docs demo](docs/demo.gif)

**[Live demo →](https://gutanbug.github.io/visual-docs/)**

One design language: generous whitespace, gray hierarchy, a single blue accent, rounded surfaces
Ready-made components: hero, flow, bento, stats, layers, tables, API list, decisions, roadmap
Light / dark mode and mobile layout out of the box
vdoc.py builds and lints the page using only the Python standard library
Output text is written in Korean (해요체)

Install

In Claude Code:

/plugin marketplace add gutanbug/visual-docs
/plugin install visual-doc@visual-docs

Usage

/visual-doc:make Summarize docs/notify-design.md as a one-page design doc

Or just ask: "이 기획 내용을 아티팩트로 깔끔하게 정리해줘". The page is written to `./visual-doc//page.html` and published as an Artifact when the `Artifact` tool is available.

Example

[`examples/visual-docs`](examples/visual-docs) was generated with this plugin.

Full page (dark)

![visual-docs dark preview](docs/preview-dark.png)

vdoc.py

python3 vdoc.py build --title "Notify design" --body body.html --out page.html [--css extra.css]
python3 vdoc.py check page.html
python3 vdoc.py serve page.html --port 8765

`check` catches missing titles, bento rows that don't sum to 6, flow/roadmap count mismatches, unknown icons, raw color values, disallowed external assets and unwrapped tables.