Skip to content

M3 Expressive Design Skill

Material Design 3 and M3 Expressive packaged as an agent skill. Exact design tokens, per-component dp geometry, motion springs, and 2,587 reference images for Claude Code,…

Install

$claude plugin install m3-expressive@m3-expressive

Install command taken from the project's README or registry entry. Always review code before running it.

M3 Expressive: a Material Design 3 skill for AI coding agents

Give Claude Code, Codex, Cursor, Copilot, and Gemini CLI the real Material Design 3 spec. Exact design tokens, per-component dp geometry, motion spring values, shape morphing rules, emphasized typography, color roles, and 2,587 reference images, packaged as an Agent Skill your assistant loads on its own the moment you ask for Material UI.

claude plugin marketplace add abhixv/m3-expressive-design-skill
claude plugin install m3-expressive@m3-expressive

Not on Claude? Jump to Codex, Cursor, GitHub Copilot, Gemini CLI, or Windsurf, Cline, opencode, Zed, and anything else.


Why this exists

Ask any model for a Material 3 Expressive spec and it will answer instantly, in the right vocabulary, with numbers that look exactly like real tokens. Some of them are. The rest are invented, and an invented dp value is indistinguishable from a real one on the page, so it ships.

This skill closes that gap two ways. It puts the actual values in reach, and it holds the model to a source contract: every number, token name, and component name must be looked up, and anything M3 doesn't publish gets labelled as a design decision instead of quietly passed off as spec.

You ask Unassisted With this skill
"Standard scheme default spatial spring?" damping 0.8, stiffness 380 (those are the expressive values) damping 0.9, stiffness 700
"What does elevation level 3 resolve to?" 12dp 6dp
"Radius for a child inside a 48dp card with 16dp padding?" "48dp, keep it consistent" 32dp, since inner = outer − padding
"Gap between the two action buttons?" a number, stated as spec "My design decision (not in M3): 12dp"
"Fade the color with a bouncy spring?" sure color and opacity take effects springs: damping 1.0, no overshoot
"Ship this expressive treatment on web" sure availability is uneven, so it checks platforms.md first

The last two matter as much as the first three. Most Material mistakes aren't missing knowledge, they're plausible defaults applied to the wrong component, and those are what the do/don't rules in each reference catch.

Measured. 14 questions whose answers are exact values from the references, asked through claude -p with no tools and no skill, then again with this plugin loaded. Run on 11 October 2026:

Model Without the skill With the skill
Claude Sonnet 11/14, and 2 of the 3 misses were confidently wrong numbers 14/14
Claude Haiku 10/14, all 4 misses answered "unknown" 14/14

The first two rows of the table above are the two wrong answers Sonnet gave. Strong models already know a lot of M3 from memory; the skill's job is the remaining values, and the ones they get wrong without noticing.

What you get

Similar plugs

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…

Open-source AI job search agent and job finder: scan job boards, score each job 1-5 against your CV before you apply, tailor an ATS-friendly resume and cover letter, get…