Agent skill · design visual · nexu-io
od-web-effect-extractor
Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable OpenDesign web artifact.
Why this skill is useful
Adds a comprehensive extraction workflow for visual effects and animations that enables the AI to recreate complex web interactions and visual behaviors.
What it needs
Requires chrome, node installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Web Effect Extractor Use this plugin when the user gives a website URL and asks OpenDesign to recreate, remix, or learn from its visual effects. It is especially useful for hero backgrounds, WebGL scenes, Canvas animations, shader effects, cursor trails, scroll-driven motion, animated typography, and interaction patterns that are hard to understand from screenshots alone. This workflow is inspired by the MIT-licensed web-shader-extractor skill from lixiaolin94/skills, adapted for OpenDesign's website recreation and editable artifact workflow. Scope The goal is to produce a faithful, editable OpenDesign artifact that preserves the reference site's visual effect and interaction logic while replacing private content, trademarks, tracking code, and nonessential app logic. Extract only what is needed to understand and recreate the visual behavior: Layout structure, viewport behavior, breakpoints, and composition rhythm Color, typography, blend modes, gradients, texture, lighting, and post-processing Motion timing, easing, scroll triggers, pointer response, and idle animation loops Canvas, WebGL, Three.js, shader, particle, and framebuffer pipeline details Public static assets needed for visual parity, with provenance noted Do not copy private product copy, hidden application state, user data, analytics, auth flows, or unrelated business logic. Workflow 1. Prepare The Capture Start from the supplied URL and define the exact effect to recreate. If the user is vague, inspect the first viewport first and infer the likely target effect. Before extracting runtime details, prefer a browser context that can evaluate page scripts and inspect canvas/WebGL state. If Chrome DevTools MCP is available, use it for runtime interception. If it is not available, continue with the strongest available browser automation and clearly state that shader/runtime capture may be incomplete. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/od-web-effect-extractor