How do I rebuild a CopyLayers asset in Vue, Astro, or any other stack?
Two ways: generate the self-contained HTML file first and port it into your project, or add one line to the prompt telling the AI to build it directly in your stack. Both work anywhere the AI can reach.
Two ways, and the only real difference is whether you see the layer before it's reshaped. Generating the HTML first lets you check it against the preview (the safer default); building directly in your stack is fewer steps but skips that check.
Either way, the AI needs to see your project — your components, conventions, and environment. Without that context you get code that works but looks nothing like the rest of your codebase.
Both work anywhere the AI can reach: Vue, Astro, Svelte, WordPress, Rails. If you're not committed to a stack yet, use Next.js and take the source files instead of rebuilding at all.
Steps
- Option A — Generate the HTML first, then port it
- 1Copy the layer's prompt and run it as-is — you get the self-contained HTML file.
- 2Open the file in a browser to confirm it matches the preview.
- 3Open your project in an AI environment that can read the codebase.
- 4Give it the HTML file and ask it to recreate the page following your project's structure, components, and conventions.
- 5Review the port against the original file — motion timing is the thing that most often drifts.
- Option B — Build directly in your stack
- 1Copy the layer's prompt.
- 2Add one line at the end: “Rebuild this following my project's architecture, components, and conventions.”
- 3Run it in an AI environment that can read your project, so it has your structure to build against.
- 4Review the result against the layer's preview — no separate HTML file to check, so this is the step that catches drift.
Walkthrough — coming soon.