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…
