Agent Plugins Marketplace
← All plugins

design-eng

v0.1.0

Design-engineering skills for reverse-engineering UIs and giving them motion. ui-reverse-engineer turns a screenshot or live URL into a faithful, disassembled reconstruction with an extracted design-token system; motion-system designs the temporal layer (motion tokens, choreography, per-state transitions) for a design, inferring it from taste or measuring it from a video/URL; figma-export pushes the extracted tokens and components into Figma. Together they cover static design extraction, motion, and design-tool round-tripping.

Claude Code2 Skills

By MotionComplex0 GitHub starsUpdated 5 days ago

Directory evidence

Runtimes
Claude Code
Parsed components
2 skill or MCP entries
Source updated
Sep 18, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design-eng for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install design-eng@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/MotionComplex/agentic-kit

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/design-eng/.

Plugin files

plugins/design-eng/
├── .claude-plugin/plugin.json
├── skills/figma-export/SKILL.md
└── skills/ui-reverse-engineer/SKILL.md

Included Skills2

figma-exportskills/figma-export/SKILL.md

Push an extracted design system into Figma: turn a tokens.json (colors, spacing, type, radii, breakpoints) into Figma Variables + text/effect styles, and a components.html (isolated component instances + states) into a Figma component library with variants. Use this skill whenever the user wants to send, push, export, sync, or recreate a design system, tokens, or components IN Figma — "put this in Figma", "export these tokens to Figma", "make Figma variables from this", "turn these components into a Figma library", "sync the design system to Figma", "build the Figma file" — especially as the follow-on to a ui-reverse-engineer run (tokens.json + components.html → Figma). It is a token-first bridge: it maps the extracted system onto Figma constructs and hands the actual Figma mechanics to the official Figma MCP skills (figma-use, figma-generate-library). Trigger whenever the destination is Figma and the input is an extracted/coded design system, even if the word "skill" isn't used.

ui-reverse-engineerskills/ui-reverse-engineer/SKILL.md

Reverse-engineer any UI screenshot or design image into a faithful, disassembled reconstruction: the individual components rebuilt in isolation, the assembled composition, the bare layout skeleton, and an extracted design-token system. Use this skill whenever the user supplies a UI screenshot, app screen, website shot, Dribbble or Figma image, or any interface mockup and wants to recreate it, match it, rebuild it, clone the style, "extract the design system," "break it into components," "disassemble the UI," "what is this made of," or build a taste or component library from it — even if they never say the words "skill" or "pipeline." Trigger for phrases like "match this screenshot," "rebuild this interface," "recreate this UI," "extract the tokens/taste from this image," or "show me the components this is built from."

Plugin manifests1

plugins/design-eng/.claude-plugin/plugin.json
{
  "name": "design-eng",
  "displayName": "Design Engineering",
  "version": "0.1.0",
  "description": "Design-engineering skills for reverse-engineering UIs and giving them motion. ui-reverse-engineer turns a screenshot or live URL into a faithful, disassembled reconstruction with an extracted design-token system; motion-system designs the temporal layer (motion tokens, choreography, per-state transitions) for a design, inferring it from taste or measuring it from a video/URL; figma-export pushes the extracted tokens and components into Figma. Together they cover static design extraction, motion, and design-tool round-tripping.",
  "author": {
    "name": "MotionComplex"
  },
  "keywords": [
    "design",
    "ui",
    "design-system",
    "design-tokens",
    "reverse-engineer",
    "animation",
    "motion",
    "figma",
    "frontend",
    "css"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design-eng on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-eng)