An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
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-expressiveInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →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…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
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…
OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering.