design-md-motion
A motion section for DESIGN.md with lint rules and a reference example, plus print and video surface profiles.
- Status
- Live
- Launched
- Licence
- MIT
- Language
- JavaScript
One command, copied from the repo.
Install design-md-motion: npx github:rishsadh/design-md-motion lint DESIGN.md
rishsadh/design-md-motion
What it does
DESIGN.md, the format from google-labs-code/design.md for describing a visual identity to coding agents, has no place for motion. This adds one: a motion: block in the front matter with a duration scale, easing, springs, loops, a reduced-motion default and named intents, plus a surfaces: block for print and video.
The lint command reads the front matter and says what is wrong and on which line, against 36 rules. The export command writes the motion tokens as CSS custom properties or W3C design tokens JSON, and the spring command turns a spring into a CSS linear() easing. It needs Node 18 or later and has one dependency, yaml.
It is an extension, not a change to the spec. The official linter reads these files with no errors, and ignores motion and surfaces in its exporters. It checks the file, not your product: it cannot tell if a page respects prefers-reduced-motion or if a PDF has the bleed it says it has. Some thresholds are judgement calls, such as the 200ms reduced-motion line and the 1000ms ceilings. It is version 0.1, a draft, and the spec will change.
Why it exists
As of 30 September 2026, issue 47 on the google-labs-code/design.md repo asks for motion tokens. It has been open since 24 April 2026. The maintainer replied on 1 May that motion can be added as custom tokens in a custom section, and asked people who do it to share what they made. A pull request that added motion to the base spec was closed on 15 June on the grounds that the spec stays small and prose carries intent.
The thread also shows what a motion section has to handle that a scale of three durations does not: loops are not transitions, reduced motion is usually a different behaviour and not a shorter animation, and springs have no standard form.