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 Open Design web artifact.
Profile →npx skills add nexu-io/open-design --skill od-web-effect-extractor --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Effect Extractor Use this plugin when the user gives a website URL and asks Open Design 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 Open Design's website recreation and editable artifact workflow. ## Scope The goal is to produce a faithful, editable Open Design 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 st
- Scope
- Workflow
- 1. Prepare The Capture
- 2. Runtime Inspection
- 3. Extract The Visual Model
- 4. Rebuild In Open Design
- 5. Verify Visual Parity
- 6. Deliver
- Quality Bar
What does the od-web-effect-extractor skill do?
Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design web artifact.
How do I install it?
Run `npx skills add nexu-io/open-design --skill od-web-effect-extractor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.