muriel

muriel is a design skill for coding agents. It translates between design languages, from the Visible Language Workshop's typography-as-data to film-style sci-fi interfaces, and expresses them in a multitude of mediums, from paper figures to video. It juries its own work. And it keeps every piece on brand and readable, with tokens from one brand.toml and text held to 8:1 contrast.

Artifacts are generated by scripts saved next to them, so they can be rerun when the data changes.

It runs as a Claude Code plugin or in any harness that reads the Agent Skills format. The Python package and muriel CLI also work without an agent. The name is Muriel Cooper's; she founded the Visible Language Workshop at MIT.

Examples are in the gallery at muriel.mindbendingpixels.com, a site built with muriel.

Install

In a Claude Code session:

/plugin marketplace add andyed/muriel
/plugin install muriel@andyed-muriel

Invoke it with /muriel:compose, or let the agent load it when a task has an open visual decision. The critique agent and jury seats install with it. /plugin uninstall removes everything.

For other harnesses, the Python package, or a development checkout, see More ways to install.

Channels

A channel is one output medium. Each has a markdown file of recipes, tools, and anti-patterns under channels/, and the agent reads the one that matches the job.

Channel	For (main tools)
Raster	Store assets, icons, banners, wordmarks (Pillow, muriel.typeset)
SVG	Paper figures, data-driven vectors, icons, wave fields (plain SVG, optionally svgwrite and cairosvg)
Diagrams	Named forms such as 2×2, cycle, pyramid, swimlane, Sankey, treemap, and DAG, each with a stated test for when it fits (muriel's generators; Mermaid and MathJax through Node)
Charts	Quantitative charts in JS libraries (Recharts, ECharts, Chart.js, Plotly, D3)
Science	Paper figures, notebook editorial, APA-style stats (matplotlib, LaTeX, muriel.stats)
Infographics	Single-image explainers (generated SVG)
Web	Blog posts, magazine layouts, HTML to PNG or PDF (marginalia, pandoc, Playwright or WeasyPrint)
Interactive	Live demos with parameter controls (WebGL, Canvas, D3, PixiJS)
Polish	UI detail: radii, press states, hit areas, icon motion (CSS, TSX, HTML)
Spatial	Perspective grids, layered typography, ridge plots (muriel.spatial, Three.js)
Video	Product demos, GIFs, HTML to MP4 (ffmpeg, hyperframes)
Terminal	Sparklines, bar charts, tables in Unicode (muriel.chart)
Heatmaps	Fixation density overlays (muriel.typeset)
Gaze