A collaborative visual-design system for making and checking decisions about how software looks and works for people. It covers interaction patterns, information structure, spatial layout, hierarchy, readability, composition, and rendered visual proof.

Use it when designing unfamiliar controls, dense interfaces, complex visual representations, or cross-channel experiences, and when reviewing a rendered design for clarity and hierarchy.

It helps resolve design choices that could change the implementation and checks the finished result against what users need to see and do.

muriel — Skill for Claude Code by andyed

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add andyed/muriel --skill compose

Clone the repo

git clone --depth 1 https://github.com/andyed/muriel

Made for: Claude Code.

Or install muriel, the plugin that ships this one along with the rest of its 1 skill, 7 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/andyed/muriel/compose/github.svg)](https://agentmods.dev/skills/andyed/muriel/compose)

Your own site

<a href="https://agentmods.dev/skills/andyed/muriel/compose"><img src="https://agentmods.dev/badge/skills/andyed/muriel/compose/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/andyed/muriel/compose"><img src="https://agentmods.dev/badge/skills/andyed/muriel/compose.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 98 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 4,711 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00098	$0.04711
Opus 5.5	$0.00039	$0.01884
Sonnet 5.5	$0.00020	$0.00942
Haiku 4.5	$0.00010	$0.00471

Measured 10d ago against content hash f6fa57b21bd0, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

muriel scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

The scan reads SKILL.md. This mod also ships 2 executable files (examples/drop-caps/gen_dropcap.py, examples/drop-caps/gen_foveated_dropcap.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/muriel/skills/compose/SKILL.md · 361 lines

How it starts

The opening of the file, as written. The whole thing — 361 lines — stays where its author put it; the contents beside it link to each section on GitHub.

muriel — science-informed interaction and visual craft

Muriel is a visual and interaction design collaborator for humans and AI agents. Her modus operandi is to embody science-informed interactions: draw on cognitive psychology, perception research, and HCI to shape representations, controls, feedback, and composition, then build and exercise them in the host product. The channels, tools, and production recipes are how that judgment becomes working software and visual artifacts.

The calling agent owns product truth, code architecture, domain behavior, and the overall delivery. Muriel owns design synthesis for the human-facing slice, interaction grammar, hierarchy, legibility, composition, and appropriate proof. Work through the project's canonical state and components; do not create a parallel control model just to make the surface easier to style.

Academic grounding in practice

Let research inform the mechanism while the design is taking shape. Connect the relevant human capability to an interaction choice: what the representation makes perceptible, what stable geometry preserves, what feedback teaches, or what a reversible control lets someone explore. Carry that rationale through implementation and verification.

Use the academic lineage in the selected channel or reference. When the choice needs deeper cognitive grounding, read references/human-capabilities.md. Explain which finding or framework informs the mechanism and where its applicability ends. Distinguish empirical support, design precedent, and a new hypothesis.

Treat convention as a useful starting hypothesis. Muriel is free to challenge it, combine mechanisms, or invent a new interaction when that opens a worthwhile possibility for the task. Academic grounding can inform an invention before there is evidence for the exact design. Make the idea tangible in a working probe; evaluate its learnability, expressive possibilities, task value, and recovery as relevant. Distinguish revisable conventions from locked product decisions and accessibility requirements.

Read the full file on GitHub · 361 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago Changed · +74 lines · -3 tokens per session f6fa57b21bd0
11d ago Changed · +12 lines d6e01e5f0425
1mo ago Changed · +1 lines 9903c7cbed5d
1mo ago Changed · +29 lines 611fa5a74582
2mo ago First seen · 245 lines · 101 tokens per session scan A cb1ec900ed72

Subscribe to this mod's changes

muriel is a skill published in the GitHub repository andyed/muriel (20 stars, last pushed 5d ago), licensed MIT. It adds 98 tokens to every session and 4,711 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Design and UX Matplotlib brand-guidelines claude-skill design-system design-tokens

anydesign

Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a…

uxKero/anydesign · 82 tokens

claude-design-idea-to-ready

Take a UI from a one-line idea to on-brand, shippable design with Claude, in the correct order — brand foundation first, then components, screens, interactions, accessibility, and only then generation via /design. Use whenever someone wants to design, redesign, or generate a screen, page, component, or onboarding flow…

chohra-med/claude_design_skill · 135 tokens

extract-design

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…

Manavarya09/design-extract · 140 tokens

ss-learn

Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or brand data. Use when a person asks StyleSeed to remember, learn from, generalize, review, or prepare a reusable rule…

bitjaru/styleseed · 73 tokens

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

omd-apply

A skill that applies a project's DESIGN.md file as visual and brand guidance for interface work. It covers components, colors, fonts, layout, copy, motion, and visual assets.

kwakseongjae/oh-my-design · 129 tokens