AI Design Skills is a collection of reusable design instructions for AI coding tools, with each skill stored as a self-contained markdown file. Developers use the skills to guide tasks such as creating landing pages, and the catalogue lists one of these skills.
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.
npx skills add elayadesign/ai-design-skills --skill design-to-motiongit clone --depth 1 https://github.com/elayadesign/ai-design-skillsWrote 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.
[](https://agentmods.dev/skills/elayadesign/ai-design-skills/design-to-motion)<a href="https://agentmods.dev/skills/elayadesign/ai-design-skills/design-to-motion"><img src="https://agentmods.dev/badge/skills/elayadesign/ai-design-skills/design-to-motion/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.
<a href="https://agentmods.dev/skills/elayadesign/ai-design-skills/design-to-motion"><img src="https://agentmods.dev/badge/skills/elayadesign/ai-design-skills/design-to-motion.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00217 | $0.10022 |
| Opus 5.5 | $0.00087 | $0.04009 |
| Sonnet 5.5 | $0.00043 | $0.02004 |
| Haiku 4.5 | $0.00022 | $0.01002 |
Grade A, and why
design-to-motion 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 today.
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.
How it starts
The opening of the file, as written. The whole thing — 514 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design to Motion
A showcase animation is not a redesign. The viewer must see the exact design, and must see that it is alive.
exact frame → empty state → smooth load → every visual acts out its story → seamless repeat.
This skill has three parts. Part A rebuilds the design so the finished frame is indistinguishable from the source. Part B is the motion system. Part C records and exports. Work through A before touching B, and never encode anything before the checks in A7 and B9 pass. Parts A and B apply in both contexts below; Part C is for the showcase, or for a website only when exports are asked for.
Scope
Apply to any request to animate a static design: Figma frames, UI cards, dashboards, app screens, marketing heroes, product mockups, and designs placed on a photo background. When a rule here conflicts with a framework default, this file wins. When the user's explicit prompt conflicts with a rule, the user wins.
Not for interaction motion inside a shipping product (hovers, menus, toasts). For that, use a product motion skill such as emilkowalski/skills. Companion skill: landing-page-design in this repo, when the animation will live on a landing page.
Two contexts
Decide the context before anything else. It changes what you animate, how the motion starts and ends, and what you deliver.
| Showcase | Website | |
|---|---|---|
| Typical request | "Animate this design for me", a Figma link and nothing else | Building or editing a landing page or site, or the request names one |
| What gets animated | The whole frame | Only the sections that qualify (table below) |
| Start | Page load, from the empty state | When the section scrolls into view, once |
| After the intro | Stories run, then the frame dissolves and the cycle repeats (B5) | Stories run forever. No dissolve, no cycle |
| Text | Exported layers, so the frame is pixel exact | Live HTML text in the site's font, for SEO and accessibility. Only the visual parts are exported images or SVG |
| Deliverables | The page plus MP4 for X, website GIF, 800×500 GIF (Part C) | The animated sections inside the site's code. Exports only when asked |
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.
- today First seen · 514 lines · 217 tokens per session scan A 12240f806514
design-to-motion is a skill published in the GitHub repository elayadesign/ai-design-skills (5,677 stars, last pushed today), licensed MIT. It adds 217 tokens to every session and 10,022 once invoked, about $0.0009 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-10-26.
Other skills, from other repositories
anti-slop-design
Autonomous Principal Design Technologist. Cures vibe-coded software from AI frontend slop using curated token archetypes and 7-axis quality gating.
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
open-design-setup
Prepare or repair a project's prototyping environment so open-design can build prototypes with the project's own component library and render them through the project's toolchain. Use when the library target is needed and docs/design/prototyping.md is missing, stale, or failing; excludes HTML-only design work and…
edit-site
Plans, coordinates and customizes PAC CLI-downloaded Standard or Enhanced data model non-SPA Power Pages sites created from Microsoft templates or manually in Design Studio. Use for requests involving pages, localized content, navigation, assets, snippets, site markers, Liquid/web templates, page layouts, or styling.…
frontend-visual-qa
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide, dashboard, design-system, or Electron/native app — via real-browser/native-app journeys and a Playwright sweep. Use after UI…