mockup-extract

To extract a UI component into a sandbox for isolated design iteration, specify the target component's path or name. The system pulls the real source code, rewrites imports, and generates a sandboxed preview for rapid visual exploration.

Yes, you can use an existing application component as a visual reference without hand-coding it. The extraction process preserves the real source code and dependencies, embedding the accurate component directly into a mockup sandbox preview.

Dependency stubbing for UI redesign works by automatically rewriting imports and stubbing external dependencies. This isolates the extracted component within the sandbox environment, preserving its visual behavior while preventing external application conflicts.

The best way to create design variants from existing source code is extracting the target component into a mockup sandbox. This allows you to iterate on the real source code in isolation, ensuring high fidelity during rapid design exploration.

No, you do not need to manually rewrite imports for components extracted to a mockup sandbox. The extraction process automatically handles import rewriting and dependency stubbing to isolate the component seamlessly.

After extracting a component for design iteration, you can preview the results at the artifacts/mockup-sandbox/preview path. The extracted component is embedded as an iframe on the canvas for immediate visual feedback.