Published
May 6, 2026
⚠️ DO NOT ABUSE THIS This is a process for reverse-engineering code components from a published Webflow site, to be used ONLY when you are the rightful owner of those components and no longer have access to your original source code.
Approach
Tools
For this setup...
- VS Code
- Sygnal Agent Skills
- Claude Code
Process
- Create an empty directory
- Open VS Code
- Install Sygnal Agent Skills https://www.npmjs.com/package/@sygnal/agent-skills
npm install -g @sygnal/agent-skills - Learn the Webflow Code Component Skill this will download the full current CC docs locally, organized as a skill
agent-skills learn webflow-code-components- Setup playwright MCP
- Open Claude Code in VS Code
I have a project here {WEBFLOW-PUBLISHED-PAGE-URL} which has a webflow code component, possibly including slotted code components. I need to fully reconstruct those components in this project since we've lost the original source. I've given you a skill here for webflow code components as well. Use playwright to inspect the url, extract the details source code and rebuild the components.- Claude will do the extraction, and rebuild the components from the JS
- Once done you'll generally be given a summary of what it found and built
- You'll probably need to install some npm packages
npm install- And then install the library to your workspace to review and test it
webflow library shareNotes
- Review the props
- If the component arrangement is complex [nesting, etc] you can ask Claude how the component need to be arranged,
- If the props are complex, you can also ask it for details on how the properties need to be set, to mimic the original page setup
